image-pile

1'use client';
2 
3import React, { useEffect, useState } from 'react';
4import Image from 'next/image';
5import { motion } from 'framer-motion';
6 
7type ImagePileProps = {
8    images: string[];
9    speed?: number;
10};
11 
12export function ImagePile({ images, speed = 2 }: ImagePileProps) {
13    const [topIndex, setTopIndex] = useState(0);
14 
15    useEffect(() => {
16        const id = setInterval(() => {
17            setTopIndex((prevIndex) => (prevIndex + 1) % images.length);
18        }, speed * 1000);
19 
20        return () => clearInterval(id);
21    }, [images.length, speed]);
22 
23    return (
24        <div className="relative h-[200px] sm:h-[260px] md:h-[390px] lg:h-[450px] xl:h-[500px] w-[310px] sm:w-[500px] md:w-[725px] lg:w-[900px] xl:w-[1200px] overflow-visible">
25            {images.map((image, i) => {
26                const isTop = topIndex === i;
27                const secondTopIndex = (topIndex + 2) % images.length;
28                const zIndex = isTop ? 100 : secondTopIndex ? 99 : images.length - i;
29                const y: number = Math.random() * 20;
30                const x: number = Math.random() * 20;
31                const rotation = i * (Math.random() * 1 + 2) - 2;
32 
33                return (
34                    <motion.div
35                        key={`stacked-card-${i}`}
36                        className="absolute w-full h-full"
37                        style={{ zIndex, transformOrigin: 'center center' }}
38                        animate={{
39                            rotateZ: isTop ? 0 : rotation,
40                            translateX: Math.random() < 0.5 ? x : -x,
41                            opacity: isTop ? [0, 1] : 0.8,
42                            translateY: isTop ? [30, Math.random() < 0.5 ? y : -y] : Math.random() < 0.5 ? y : -y,
43                            transition: { duration: 0.5 }
44                        }}
45                        initial={isTop ? { rotateZ: 0 } : { rotateZ: rotation }}
46                    >
47                        <div className="relative h-full w-full overflow-hidden rounded-3xl">
48                            <Image
49                                src={image}
50                                alt={`stacked-card-${i}`}
51                                height={1080}
52                                width={1920}
53                                className="h-full w-full object-cover"
54                                priority={isTop}
55                            />
56                        </div>
57                    </motion.div>
58                );
59// … truncated