эффекты

Магнитный курсор

Кнопки и карточки слегка тянутся к указателю и возвращаются обратно с приятной пружиной.

Custom hookMotion springs

Подробнее и перенос

Здесь собраны живое демо, prompt для генерации похожего решения и готовый React-сниппет для переноса в HTML embed или кастомный блок Tilda.

Prompt для GPT

Готовая формулировка для генерации похожего эффекта

Создай современную веб-анимацию «Магнитный курсор» для Next.js и React. Нужен эффект: интерактивные элементы притягиваются к курсору с упругим easing. Используй Custom hook, Motion springs, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

React-компонент

Магнитный курсор

'use client';

import { motion, useSpring } from 'framer-motion';
import { useRef } from 'react';
import { useMousePosition } from '@/hooks/useMousePosition';

export function MagneticCursor() {
  const ref = useRef<HTMLButtonElement>(null);
  const { x, y, isInside } = useMousePosition(ref);
  const moveX = useSpring(isInside ? x * 28 : 0);
  const moveY = useSpring(isInside ? y * 28 : 0);

  return <motion.button ref={ref} style={{ x: moveX, y: moveY }}>Magnetic</motion.button>;
}