Stacked Cards Carousel

Карточный карусельный стек для отзывов, экранов, пакетов услуг и feature-слайдов.

Framer MotionState machine

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

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

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

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

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

React component

Stacked Cards Carousel

'use client';

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

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

export function StackedCardsCarousel() {
  const [index, setIndex] = useState(0);

  return (
    <div>
      <div className="relative min-h-[18rem]">
        {cards.map((card, order) => {
          const offset = (order - index + cards.length) % cards.length;
          return offset < 3 ? <motion.div key={card} animate={{ y: offset * 18, scale: 1 - offset * 0.06 }}>{card}</motion.div> : null;
        })}
      </div>
      <button onClick={() => setIndex((value) => (value + 1) % cards.length)}>Next</button>
    </div>
  );
}