Flow Warp Image

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 
12/** Anything the canvas can sample from: a URL, or an already-painted surface. */
13export type FlowWarpSource = string | HTMLCanvasElement | HTMLImageElement;
14 
15export interface FlowWarpImageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
16  /** Image URL (or a canvas/image element) sampled into the warping mesh. */
17  src?: FlowWarpSource;
18  /** Describes the picture for assistive tech. Empty string = purely decorative. */
19  alt?: string;
20  /** Mesh resolution as [columns, rows]. */
21  grid?: [number, number];
22  /** Per-node return spring stiffness. */
23  stiffness?: number;
24  /** Per-node damping. */
25  damping?: number;
26  /** Pointer push radius in CSS px. */
27  radius?: number;
28  /** Impulse gain multiplier (1 = the tuned default). */
29  strength?: number;
30  /** Throw a radial splash from the last pointer position on exit. */
31  splashOnLeave?: boolean;
32  /** Let a virtual pointer ride a Lissajous path after 3s of stillness. */
33  idleWave?: boolean;
34  /** Deterministic seed for the built-in fallback surface (used when `src` is unset). */
35  seed?: number;
36  /** Overlay content (labels, titles) rendered above the canvas. */
37  overlay?: React.ReactNode;
38  /** Force the still variant regardless of system preference. */
39  reducedMotion?: boolean;
40  /** Stop the rAF loop while scrolled offscreen or the tab is hidden. */
41  pauseWhenHidden?: boolean;
42}
43 
44/* -------------------------------------------------------------------------- */
45/* Physics constants (Motion Lab ship spec)                                   */
46/* -------------------------------------------------------------------------- */
47 
48const DEFAULT_GRID: [number, number] = [32, 20];
49const K_DEFAULT = 90;
50const C_DEFAULT = 8;
51const PUSH_RADIUS = 140;
52/** Base impulse gain; pointer speed adds SPEED_GAIN · |v|. */
53const BASE_GAIN = 260;
54const SPEED_GAIN = 0.45;
55/** Pointer speed is clamped so a flick can't blow the mesh apart. */
56const MAX_POINTER_SPEED = 3200;
57const SPLASH_RADIUS = 230;
58const SPLASH_POWER = 300;
59const KEY_SPLASH_POWER = 130;
60const KEY_BURST_POWER = 340;
61// … truncated