"use client"; import { type MotionValue, motion, type SpringOptions, useReducedMotion, useScroll, useSpring, useTransform, } from "motion/react"; import { type ReactNode, type RefObject, useRef } from "react"; import { cn } from "@/lib/utils"; export type HeroParallaxProduct = { title: string; link: string; thumbnail: string; }; export type HeroParallaxProps = { products: HeroParallaxProduct[]; rows?: number; /** Horizontal travel in px per row, multiplied by `rowSpeeds`. */ distance?: number; /** Speed multiplier per row for a layered, multi-depth feel. */ rowSpeeds?: number[]; /** Header content shown above the rows. */ children?: ReactNode; /** Scrollable ancestor to track instead of the window. */ containerRef?: RefObject; className?: string; cardClassName?: string; }; const SPRING: SpringOptions = { bounce: 0, damping: 30, stiffness: 300 }; function ProductCard({ product, x, still, className, }: { product: HeroParallaxProduct; x: MotionValue; still: boolean; className?: string; }) { return (

{product.title} ); } function Row({ products, progress, travel, cardClassName, still, }: { products: HeroParallaxProduct[]; progress: MotionValue; travel: number; cardClassName?: string; still: boolean; }) { const x = useSpring(useTransform(progress, [0, 1], [0, travel]), SPRING); return (

0 && "flex-row-reverse")}> {products.map((product) => ( ))}

); } export function HeroParallax({ products, rows = 3, distance = 600, rowSpeeds, children, containerRef, className, cardClassName, }: HeroParallaxProps) { const reduceMotion = useReducedMotion() ?? false; const ref = useRef(null); const { scrollYProgress } = useScroll({ container: containerRef, offset: ["start start", "end start"], target: ref, }); const tilt = useSpring( useTransform(scrollYProgress, [0, 0.2], [15, 0]), SPRING, ); const turn = useSpring( useTransform(scrollYProgress, [0, 0.2], [20, 0]), SPRING, ); const fade = useSpring( useTransform(scrollYProgress, [0, 0.2], [0.2, 1]), SPRING, ); const lift = useSpring( useTransform(scrollYProgress, [0, 0.2], [-200, 40]), SPRING, ); const perRow = Math.ceil(products.length / rows); const productRows = Array.from({ length: rows }, (_, r) => products.slice(r * perRow, (r + 1) * perRow), ); return (

{children ? (

{children}

) : null} {productRows.map((row, r) => ( ))}

); }