Hero Parallax

1"use client";
2 
3import {
4  type MotionValue,
5  motion,
6  useReducedMotion,
7  useScroll,
8  useSpring,
9  useTransform,
10} from "framer-motion";
11import * as React from "react";
12 
13export type HeroParallaxItem = {
14  title: string;
15  thumbnail: string;
16  href?: string;
17};
18 
19export type HeroParallaxProps = React.HTMLAttributes<HTMLDivElement> & {
20  /** Cards to scatter across the parallax rows (best with ~15). */
21  products: HeroParallaxItem[];
22  /** Replaces the default headline block. */
23  header?: React.ReactNode;
24  /**
25   * Scrollport for measuring progress. Defaults to the viewport — pass a
26   * ref to an overflow container when embedding the hero in a framed demo.
27   */
28  scrollContainer?: React.RefObject<HTMLElement | null>;
29};
30 
31// SPRING.smooth — surfaces / shared-layout feel.
32const SPRING = { stiffness: 320, damping: 32, mass: 0.9 } as const;
33 
34function ProductCard({
35  product,
36  translate,
37}: {
38  product: HeroParallaxItem;
39  translate: MotionValue<number>;
40}) {
41  const Wrapper = product.href ? motion.a : motion.div;
42  return (
43    <Wrapper
44      style={{ x: translate }}
45      whileHover={{ y: -20 }}
46      transition={SPRING}
47      href={product.href}
48      className="group/card relative h-64 w-[26rem] shrink-0"
49    >
50      <img
51        src={product.thumbnail}
52        alt={product.title}
53        draggable={false}
54        className="absolute inset-0 size-full rounded-xl object-cover shadow-lg [outline:1px_solid_color-mix(in_oklch,var(--border)_60%,transparent)] [outline-offset:-1px]"
55      />
56      <div className="pointer-events-none absolute inset-0 rounded-xl bg-black/50 opacity-0 transition-opacity duration-300 group-hover/card:opacity-100" />
57      <h3 className="absolute bottom-4 left-4 text-white opacity-0 transition-opacity duration-300 group-hover/card:opacity-100">
58        {product.title}
59      </h3>
60    </Wrapper>
61  );
62}
63 
64const HeroParallax = React.forwardRef<HTMLDivElement, HeroParallaxProps>(
65  ({ products, header, className, scrollContainer, ...props }, ref) => {
66    const reduce = useReducedMotion();
67    const containerRef = React.useRef<HTMLDivElement>(null);
68    React.useImperativeHandle(
69      ref,
70      () => containerRef.current as HTMLDivElement,
71    );
72 
73    const firstRow = products.slice(0, 5);
74    const secondRow = products.slice(5, 10);
75    const thirdRow = products.slice(10, 15);
76 
77    const { scrollYProgress } = useScroll({
78      target: containerRef,
79      container: scrollContainer,
80      offset: ["start start", "end start"],
81// … truncated