Coverflow Gallery

Подходит для подборок, коллекций и серийных медиа-блоков с акцентом на выбор текущего кадра.

Framer Motion3D transforms

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

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

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

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

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

React component

Coverflow Gallery

'use client';

import { motion } from 'framer-motion';
import { useState } from 'react';

const slides = ['A', 'B', 'C', 'D'];

export function CoverflowGallery() {
  const [active, setActive] = useState(1);

  return slides.map((slide, index) => {
    const offset = index - active;
    return <motion.button key={slide} onClick={() => setActive(index)} animate={{ rotateY: offset * -28, opacity: offset === 0 ? 1 : 0.42 }}>{slide}</motion.button>;
  });
}