Compare Reveal

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import { useControllableState, useReducedMotion, useVisibilityPause } from "@/lib/motiq";
7 
8/* -------------------------------------------------------------------------- */
9/* Types                                                                      */
10/* -------------------------------------------------------------------------- */
11 
12/** A comparison side: an image descriptor, or any node you render yourself. */
13export type CompareRevealSource = React.ReactNode | { src: string; alt?: string };
14 
15export interface CompareRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
16  /** The "before" side, revealed from the left edge to the divider. */
17  before: CompareRevealSource;
18  /** The "after" side, filling the rest of the frame. */
19  after: CompareRevealSource;
20  /** Uncontrolled starting divider position, 0–100. */
21  defaultPosition?: number;
22  /** Controlled divider position, 0–100. */
23  position?: number;
24  /** Fires with the new target percentage on drag, key, or snap. */
25  onPositionChange?: (pct: number) => void;
26  /** Play the one-time self-demonstrating sweep on first viewport entry. */
27  introSweep?: boolean;
28  /** Divider spring — 140/18 (ζ≈0.76) reads as elastic resistance. */
29  stiffness?: number;
30  damping?: number;
31  /** Corner chips, [before, after]. */
32  labels?: [string, string];
33  /** Percentage the divider snaps to on double-click. */
34  snapOnDoubleClick?: number;
35  /** Force the still variant regardless of system preference. */
36  reducedMotion?: boolean;
37  /** Stop the rAF loop while scrolled offscreen or the tab is hidden. */
38  pauseWhenHidden?: boolean;
39}
40 
41/* -------------------------------------------------------------------------- */
42/* Constants (Motion Lab ship spec)                                           */
43/* -------------------------------------------------------------------------- */
44 
45const SPRING_K = 140;
46const SPRING_C = 18;
47/** Intro sweep: 50 → 96 → 4 → 50 over 2.6s, cubic ease per leg. */
48const SWEEP_SECONDS = 2.6;
49const KEY_STEP = 2;
50const KEY_STEP_LARGE = 10;
51/** A side's chip fades out once that side narrows past this percentage. */
52const LABEL_FADE = 12;
53 
54const clamp = (v: number, lo: number, hi: number) => (v < lo ? lo : v > hi ? hi : v);
55const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
56// … truncated