Depth Parallax Scene

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import { useReducedMotion, useVisibilityPause } from "@/lib/motiq";
7 
8/* -------------------------------------------------------------------------- */
9/* Types                                                                      */
10/* -------------------------------------------------------------------------- */
11 
12export interface ParallaxLayer {
13  /** Anything renderable — an SVG ridge, a gradient sky, floating cards. */
14  node: React.ReactNode;
15  /** 0 = far background (barely travels) … 1 = nearest foreground (travels most). */
16  depth: number;
17  /**
18   * Max depth-of-field blur in px applied to this layer as the scene centers.
19   * Set it on the far layers only; near layers should stay sharp.
20   */
21  blurAtDepth?: number;
22}
23 
24export interface DepthParallaxSceneProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
25  /** Back-to-front layers. Order is paint order; `depth` drives travel and drift. */
26  layers: ParallaxLayer[];
27  /**
28   * `"page"` (default) reads the scene's position in the viewport — the landing-page
29   * usage, with no scroll container of its own. `"container"` gives the component a
30   * keyboard-scrollable stage so the effect works inside a card or docs preview.
31   */
32  scrollMode?: "page" | "container";
33  /** Total vertical travel in px at depth 1 across the whole pass. */
34  range?: number;
35  /** Let the pointer nudge the layers. */
36  pointer?: boolean;
37  /** Horizontal pointer travel in px at depth 1 (vertical is ~54% of it). */
38  pointerStrength?: number;
39  /** Apply `blurAtDepth` to the layers that declare it. */
40  depthOfField?: boolean;
41  /** Idle sine drift before the pointer ever enters — the ambient life on load. */
42  ambientDrift?: boolean;
43  /** Scene height. */
44  height?: number | string;
45  /** Container mode only: pass distance as a multiple of the scene height. */
46  scrollLength?: number;
47  /** Progress smoothing rate (λ per second). */
48  smoothing?: number;
49  /** Accessible description — the scene is decorative and carries a single role="img". */
50  label?: string;
51  /** Force the static, motion-free variant regardless of system preference. */
52  reducedMotion?: boolean;
53}
54 
55/* -------------------------------------------------------------------------- */
56/* Constants + helpers                                                        */
57/* -------------------------------------------------------------------------- */
58 
59// … truncated