Depth Pan Slider

Хорош для hero-кадров и product-превью, где нужен лёгкий parallax без тяжёлого WebGL.

Custom hook3D transforms

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

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

Написать нам Работать с нами

Назад в библиотеку

Загрузка сцены

React component

Depth Pan Slider

'use client';

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

export function DepthPanSlider() {
  const ref = useRef<HTMLDivElement>(null);
  const { x, y } = useMousePosition(ref);

  return <motion.div ref={ref} animate={{ x: x * 24, y: y * 18 }}>Depth panel</motion.div>;
}