Image Stack Deck

Подходит для moodboard-блоков, серийных фото, lookbook-разделов и коротких подборок.

Framer MotionDeck interactions

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

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

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

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

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

React component

Image Stack Deck

'use client';

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

const cards = ['One', 'Two', 'Three', 'Four'];

export function ImageStackDeck() {
  const [offset, setOffset] = useState(0);
  const ordered = cards.map((_, index) => cards[(index + offset) % cards.length]);

  return (
    <div>
      {ordered.map((card, index) => <motion.div key={card} animate={{ rotate: index * 4 - 6, y: index * 18 }}>{card}</motion.div>)}
      <button onClick={() => setOffset((value) => (value + 1) % cards.length)}>Shuffle</button>
    </div>
  );
}