эффекты
Built by Luneka Lab digital agency

Magnetic Cursor

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

Custom hookMotion springs
Готовый сниппет для переноса

У каждой демки есть React-компонент, который можно скопировать и адаптировать под HTML embed или кастомный блок в Tilda. Библиотека собрана Luneka Lab как showroom motion-подходов для клиентских сайтов.

Написать намРаботать с нами
Назад в библиотеку
Загрузка сцены
React component

Magnetic Cursor

'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>;
}