Scroll Expand & Focus Hero

1"use client";
2 
3import * as React from "react";
4 
5import { useReducedMotion } from "@/hooks/use-reduced-motion";
6import { useScrollProgress } from "@/hooks/use-scroll-progress";
7import { cn } from "@/lib/utils";
8 
9import "./scroll-expand.css";
10 
11export type ScrollExpandMediaType = "image" | "video";
12export type ScrollExpandDirection = "expand" | "focus";
13export type ScrollExpandFrameShape = "rounded" | "circle";
14export type ScrollExpandAlignment = "start" | "center" | "end";
15export type ScrollExpandContentPosition = "center" | "bottom";
16export type ScrollExpandContentLayer = "frame" | "stage";
17export type ScrollExpandStartPosition = {
18  /** Horizontal center of the resting frame, as a stage percentage. */
19  x?: number;
20  /** Vertical center of the resting frame, as a stage percentage. */
21  y?: number;
22};
23 
24/**
25 * The subject of the shot, as a percentage of the media's own dimensions.
26 *
27 * `startPosition` lives in stage space while the subject lives in image space,
28 * so a `cover` crop pulls them apart as soon as the stage aspect ratio changes.
29 * Naming the subject here lets the media pan itself under the frame instead.
30 */
31export type ScrollExpandFocalPoint = {
32  x?: number;
33  y?: number;
34};
35 
36/**
37 * Choreography values re-tuned for a narrow, portrait stage. The frame geometry
38 * is computed in JavaScript, so a container query cannot reach it — a phone
39 * needs its own numbers rather than a scaled-down desktop composition.
40 */
41export type ScrollExpandCompactOverrides = {
42  startWidth?: number;
43  startHeight?: number;
44  startPosition?: ScrollExpandStartPosition;
45  focalPoint?: ScrollExpandFocalPoint;
46  startRadius?: number;
47  endRadius?: number;
48  mediaZoom?: number;
49  mediaPosition?: React.CSSProperties["objectPosition"];
50  mediaTransformOrigin?: React.CSSProperties["transformOrigin"];
51  scrollDistance?: number;
52  holdDistance?: number;
53  overlayScrim?: number;
54  titleAlign?: ScrollExpandAlignment;
55  contentAlign?: ScrollExpandAlignment;
56  contentPosition?: ScrollExpandContentPosition;
57};
58 
59type ScrollExpandItemRegistry = {
60  register: (node: HTMLDivElement) => void;
61  unregister: (node: HTMLDivElement) => void;
62};
63 
64const ScrollExpandItemContext = React.createContext<
65  ScrollExpandItemRegistry | undefined
66>(undefined);
67 
68export interface ScrollExpandProps
69  extends Omit<
70    React.ComponentPropsWithoutRef<"div">,
71    "title" | "onProgress"
72  > {
73  src?: string;
74  mediaType?: ScrollExpandMediaType;
75// … truncated