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

Sticky Zoom Panels

Scroll-storytelling паттерн для feature-блоков, продуктовых этапов и вертикальных презентаций.

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

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

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

Sticky Zoom Panels

'use client';

import { motion, useScroll, useTransform } from 'framer-motion';
import { useRef } from 'react';

export function StickyZoomPanels() {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
  const scale = useTransform(scrollYProgress, [0, 1], [0.92, 1.04]);

  return <motion.div ref={ref} style={{ scale }} className="h-64 rounded-[24px] bg-neutral-900" />;
}