Countdown Vapor Digits

1"use client";
2 
3import { useEffect, useRef } from "react";
4 
5// ---------------------------------------------------------------------------
6// deterministic 2-octave value noise — house field, no deps
7// ---------------------------------------------------------------------------
8function hash2(x: number, y: number) {
9  const n = Math.sin(x * 127.1 + y * 311.7) * 43758.5453123;
10  return n - Math.floor(n);
11}
12function vnoise(x: number, y: number) {
13  const xi = Math.floor(x);
14  const yi = Math.floor(y);
15  const xf = x - xi;
16  const yf = y - yi;
17  const u = xf * xf * (3 - 2 * xf);
18  const v = yf * yf * (3 - 2 * yf);
19  const a = hash2(xi, yi);
20  const b = hash2(xi + 1, yi);
21  const c = hash2(xi, yi + 1);
22  const d = hash2(xi + 1, yi + 1);
23  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;
24}
25function noise2(x: number, y: number) {
26  return 0.65 * vnoise(x, y) + 0.35 * vnoise(x * 2.1 + 19.7, y * 2.1 + 7.3);
27}
28 
29// ---------------------------------------------------------------------------
30// VaporCountdown — live countdown where every digit change is a phase
31// transition: the outgoing digit sublimates into monochrome grains drifting up
32// on curl-noise wind while the incoming digit condenses from the same cloud,
33// grains spring-seeking their new glyph homes. Canvas 2D over a real <time>
34// element (screen-reader truth). Direct-DOM rAF loop, no React state on the
35// hot path; hour/minute columns sleep between their rare transitions.
36// ---------------------------------------------------------------------------
37 
38const FLOATS = 6; // grains: x, y, vx, vy, hx, hy · vapor: x, y, vx, vy, age, life
39const MAX_GRAINS = 2500; // per digit
40const SAMPLE_STRIDE = 3; // px between alpha samples on the glyph raster
41const SPRING_K = 90; // s⁻² — hero-gravity-well constants exactly
42const ZETA = 0.55; // damping ratio; < 1 gives a soft condensation overshoot
43const DRAG = 0.92; // per-frame velocity drag
44const DT_MAX = 0.032; // s — clamp tab-switch jumps
45const FIELD_SCALE = 0.008; // px → noise units for the wind field
46const CURL_EPS = 0.75; // noise-space finite-difference step for curl
47const PAD_X = 40; // canvas overdraw so vapor is not clipped at the digits' box
48const PAD_TOP = 110;
49const PAD_BOTTOM = 20;
50 
51const DEFAULT_LABELS = ["HOURS", "MINUTES", "SECONDS"] as const;
52 
53type Slot = {
54  g: Float32Array; // incoming/settled grains
55  v: Float32Array; // sublimating vapor grains
56  gc: number;
57  vc: number;
58  active: boolean;
59};
60 
61// … truncated