scroll-choreography

1"use client";
2 
3import { motion, useScroll, useSpring, useTransform } from "framer-motion";
4import { useRef } from "react";
5import { cn } from "@workspace/ui/lib/utils";
6 
7interface ScrollChoreographyProps {
8  className?: string;
9  images: {
10    topLeft: string;
11    topRight: string;
12    bottomLeft: string;
13    bottomRight: string;
14  };
15}
16 
17export function ScrollChoreography({
18  className,
19  images,
20}: ScrollChoreographyProps) {
21  const containerRef = useRef<HTMLDivElement>(null);
22 
23  const { scrollYProgress } = useScroll({
24    target: containerRef,
25    offset: ["start start", "end end"],
26  });
27 
28  const smoothProgress = useSpring(scrollYProgress, {
29    stiffness: 400, // Higher stiffness for a slightly faster snap
30    damping: 50,   // Play with damping to add a little bounce/jerk
31    mass: 1.2,     // Adds a bit more weight to the movement
32    restDelta: 0.001,
33  });
34 
35  // Default positions relative to center
36  const xLeft = "-20vw";
37  const xRight = "20vw";
38  const yTop = "-14vh";
39  const yBottom = "14vh";
40 
41  // Phase 1: 0 - 0.3 (Diagonal movement)
42  // Phase 2: 0.35 - 0.65 (Stack alignment to center)
43  // Phase 3: 0.7 - 0.9 (Top Right expands to full screen)
44 
45  // Top Left -> moves to Bottom Left, then to Center
46  const tlX = useTransform(smoothProgress, [0, 0.3, 0.35, 0.65, 1], [xLeft, xLeft, xLeft, "0vw", "0vw"]);
47  const tlY = useTransform(smoothProgress, [0, 0.3, 0.35, 0.65, 1], [yTop, yBottom, yBottom, "0vh", "0vh"]);
48 
49  // Bottom Right -> moves to Top Right, then to Center
50  const brX = useTransform(smoothProgress, [0, 0.3, 0.35, 0.65, 1], [xRight, xRight, xRight, "0vw", "0vw"]);
51  const brY = useTransform(smoothProgress, [0, 0.3, 0.35, 0.65, 1], [yBottom, yTop, yTop, "0vh", "0vh"]);
52 
53  // Bottom Left -> stays, then moves to Center
54  const blX = useTransform(smoothProgress, [0, 0.3, 0.35, 0.65, 1], [xLeft, xLeft, xLeft, "0vw", "0vw"]);
55  const blY = useTransform(smoothProgress, [0, 0.3, 0.35, 0.65, 1], [yBottom, yBottom, yBottom, "0vh", "0vh"]);
56 
57  // Top Right -> stays, then moves to Center, then expands
58  const trX = useTransform(smoothProgress, [0, 0.3, 0.35, 0.65, 1], [xRight, xRight, xRight, "0vw", "0vw"]);
59  const trY = useTransform(smoothProgress, [0, 0.3, 0.35, 0.65, 1], [yTop, yTop, yTop, "0vh", "0vh"]);
60 
61  // Top Right (Hero) scaling/expansion properties
62  const heroWidth = useTransform(smoothProgress, [0.65, 0.7, 0.9, 1], ["36vw", "36vw", "100vw", "100vw"]);
63// … truncated