flip-scroll

1'use client';
2 
3import React, { useRef } from 'react';
4import Image from 'next/image';
5import { motion, MotionValue, useScroll, useTransform } from 'framer-motion';
6 
7const BackFace = () => (
8    <div
9        className="border border-white/15 h-[500px] w-full absolute rounded-3xl top-0 left-0 flex items-center justify-center bg-black text-white font-bold text-7xl"
10        style={{ transform: 'rotateY(180deg) translateZ(-1px)', backfaceVisibility: 'hidden' }}
11    >
12        ?
13    </div>
14);
15 
16const FlipScrollItem = ({
17    image,
18    index,
19    isLeft,
20    scrollYProgress,
21    totalItems,
22    mode
23}: {
24    image: string;
25    index: number;
26    isLeft: boolean;
27    scrollYProgress: MotionValue<number>;
28    totalItems: number;
29    mode: 'alternate' | 'normal';
30}) => {
31    const direction = isLeft ? -1 : 1;
32    const position = index / totalItems;
33 
34    const translateX = useTransform(
35        scrollYProgress,
36        [0, position, 1],
37        [-index * 400 * direction, 0, (totalItems - index) * 400 * direction]
38    );
39 
40    const normalRotateY = useTransform(
41        scrollYProgress,
42        [0, position - 0.04, position - 0.015, position + 0.015, position + 0.04, 1],
43        [180, 180, 0, 0, -180, -180]
44    );
45    const alternateRotateY = useTransform(
46        scrollYProgress,
47        [0, position, 1],
48        [index * -180 * direction, 0, (totalItems - index) * 180 * direction]
49    );
50 
51    return (
52        <motion.div
53            style={{ translateX, perspective: 1000, transformStyle: 'preserve-3d' }}
54            className="h-[500px] max-w-sm w-full absolute rounded-3xl overflow-visible"
55        >
56            <motion.div
57                style={{ rotateY: mode === 'normal' ? normalRotateY : alternateRotateY, transformStyle: 'preserve-3d' }}
58                className="relative"
59            >
60                <Image
61                    src={image}
62                    alt={image}
63                    width={1000}
64                    height={1000}
65                    style={{ backfaceVisibility: 'hidden', transform: 'translateZ(1px)' }}
66                    className="object-cover h-[500px] w-full rounded-3xl absolute top-0 left-0"
67                />
68                <BackFace />
69            </motion.div>
70        </motion.div>
71    );
72};
73 
74interface FlipScrollProps {
75    items: { image: string }[];
76    mode?: 'alternate' | 'normal';
77}
78 
79export function FlipScroll({ items, mode = 'normal' }: FlipScrollProps) {
80    const ref = useRef<HTMLDivElement>(null);
81 
82// … truncated