Scroll Animation Parallax

1"use client";
2// beui.dev/components/motion/scroll-animation
3 
4import {
5  motion,
6  type MotionStyle,
7  useReducedMotion,
8  useScroll,
9  useSpring,
10  useTransform,
11} from "motion/react";
12import { type ReactNode, type RefObject, useRef } from "react";
13 
14import { cn } from "@/lib/utils";
15 
16// Soft follow so the drift trails the scroll smoothly; looser than the UI
17// springs in lib/ease.ts on purpose.
18const PARALLAX_SPRING = { stiffness: 120, damping: 30, mass: 0.6 };
19 
20export interface ParallaxProps {
21  children: ReactNode;
22  /**
23   * Drift as a fraction of the element's travel through the viewport.
24   * Positive moves with the scroll (foreground), negative against it
25   * (background). ~0.1–0.5 reads best.
26   */
27  speed?: number;
28  axis?: "x" | "y";
29  /** Scroll container for contained scroll areas. Defaults to the viewport. */
30  container?: RefObject<HTMLElement | null>;
31  /** Spring-smooth the drift. Disabled automatically under reduced motion. */
32  spring?: boolean;
33  className?: string;
34}
35 
36export function Parallax({
37  children,
38  speed = 0.3,
39  axis = "y",
40  container,
41  spring = true,
42  className,
43}: ParallaxProps) {
44  const reduce = useReducedMotion();
45  const ref = useRef<HTMLDivElement>(null);
46  const { scrollYProgress } = useScroll({
47    target: ref,
48    container,
49    offset: ["start end", "end start"],
50    // Run after paint so a container ref defined higher in the tree is hydrated;
51    // otherwise framer falls back to the document and only the page scroll works.
52    layoutEffect: false,
53  });
54 
55  // progress 0→1 as the element crosses the viewport; map to a symmetric drift.
56  const travel = speed * 100;
57  const drift = useTransform(scrollYProgress, [0, 1], [travel, -travel]);
58  const smoothed = useSpring(drift, PARALLAX_SPRING);
59  const value = spring && !reduce ? smoothed : drift;
60 
61  const style: MotionStyle = reduce ? {} : axis === "x" ? { x: value } : { y: value };
62 
63  return (
64    <motion.div ref={ref} style={style} className={cn(className)}>
65      {children}
66    </motion.div>
67  );
68}