horizontal-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 HorizontalScrollItem = ({
8    image,
9    index,
10    isLeft,
11    scrollYProgress,
12    totalItems
13}: {
14    image: string;
15    index: number;
16    isLeft: boolean;
17    scrollYProgress: MotionValue<number>;
18    totalItems: number;
19}) => {
20    const direction = isLeft ? -1 : 1;
21    const position = index / totalItems;
22 
23    const translateX = useTransform(
24        scrollYProgress,
25        [0, position, 1],
26        [-index * 500 * direction, 0, (totalItems - index) * 500 * direction]
27    );
28    const rotateY = useTransform(
29        scrollYProgress,
30        [0, position, 1],
31        [index * 35 * direction, 0, (totalItems - index) * -35 * direction]
32    );
33    const blur = useTransform(scrollYProgress, [0, position, 1], [index * 2, 0, (totalItems - index) * 2]);
34    const contrast = useTransform(scrollYProgress, [0, position, 1], [index * 0.5, 1, (totalItems - index) * 0.5]);
35 
36    const translateY = useTransform(
37        scrollYProgress,
38        [0, position, 1],
39        [(totalItems - index) * 20, totalItems * 20, index * 20]
40    );
41 
42    const filter = useTransform([blur, contrast], ([blur, contrast]) => `blur(${blur}px) contrast(${contrast})`);
43 
44    return (
45        <motion.div
46            style={{
47                translateX,
48                filter,
49                translateY: useTransform(translateY, (value) => `${value - 400}px`),
50                perspective: 1000,
51                transformStyle: 'preserve-3d'
52            }}
53            className="h-[300px] max-w-sm w-full absolute rounded-xl overflow-visible"
54        >
55            <motion.div style={{ rotateY }}>
56                <Image src={image} alt={image} width={1000} height={1000} className="object-cover h-[300px] w-full rounded-xl" />
57            </motion.div>
58        </motion.div>
59    );
60};
61 
62interface HorizontalScrollProps {
63    items: { image: string }[];
64}
65 
66export function HorizontalScroll({ items }: HorizontalScrollProps) {
67    const ref = useRef<HTMLDivElement>(null);
68 
69    const { scrollYProgress } = useScroll({
70        container: ref,
71        offset: ['start start', 'end end']
72    });
73 
74    return (
75        <div ref={ref} className="h-full w-full overflow-y-auto relative" style={{ minHeight: '400px' }}>
76            <div className="h-full w-full absolute top-0 left-0">
77// … truncated