52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T3f73,"use client"; import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react"; import type { HTMLAttributes } from "react"; import { cn } from "../../utils"; import { useLiveRef } from "../../internals/dom/use-live-ref"; import { useReducedMotion } from "../../internals/motion/media-query"; import { BLEED, CYCLE, DEFAULT_COLUMNS, DEFAULT_POWER, DEFAULT_TILES, FALL_STAGGER, buildStrip, columnBand, columnDelays, columnEdges, columnFlow, columnTiles, coverFit, sampleSource, sourceSlot, createCoverage, easeEdge, oddTiles, paletteRoles, resolvePalette, settleCoverage, stepCoverage, stripIndex, type Coverage, type DatamoshEffect, type DatamoshPaletteName, type DatamoshSweep, type Direction, } from "./datamosh-transition-core"; export type DatamoshTransitionPhase = "idle" | "covering" | "covered" | "revealing"; /** * What the forwarded ref carries. The Svelte source exposes `cover()`, * `reveal()` and `play()` on the component instance and binds the overlay * element through `ref`; React has no instance, so both travel through one * handle: the three methods plus `element`. */ export interface DatamoshTransitionHandle { /** Cover the page. Resolves once every column is down. */ cover: () => Promise; /** Clear the page. Resolves once every column has fallen away. */ reveal: () => Promise; /** Cover, then reveal — a one-shot flash. */ play: () => Promise; /** The overlay element. */ readonly element: HTMLDivElement | null; } /** * DatamoshTransition — a page-transition overlay that looks like a corrupted * video decode. * * A fixed grid of columns (narrow on the left, wide on the right) fills with * flat blocks of saturated colour. Inside each column a stack of tiles falls * along one sigmoid: slivers at the edges, one tile snapping open through * the middle. `cover()` drops the columns over the page like a curtain, * right to left; `reveal()` lets them fall away. Nothing moves sideways. * * Mount once (root layout) and drive it from your router's navigation hook. */ export interface DatamoshTransitionProps extends Omit, "color"> { /** Additional classes on the overlay */ className?: string; /** * Palette name or colour list (hex or rgb()). The lightest and darkest * colours recur most often. */ colors?: string[] | DatamoshPaletteName; /** Shape of the covering band: curtain, rise, split or interlace */ variant?: DatamoshEffect; /** Order in which the columns move */ sweep?: DatamoshSweep; /** * Picture to decode: tiles take their colours from it instead of the * palette. A URL (same-origin or CORS-enabled), an image or a canvas. */ source?: string | HTMLImageElement | HTMLCanvasElement; /** Seed for the colour order — same seed, same strip */ seed?: number; /** Number of columns */ columns?: number; /** Column edge exponent: 1 = uniform grid, higher = wider columns to the right */ power?: number; /** Tiles per column stack (forced odd) */ tiles?: number; /** Time for one column to cover, ms */ coverDuration?: number; /** Time for one column to clear, ms */ revealDuration?: number; /** Delay between neighbouring columns, ms (rightmost first) */ stagger?: number; /** Speed of the falling tiles, 1 = default */ speed?: number; /** Fill the positioned parent instead of the viewport */ contained?: boolean; /** Stacking order of the overlay */ zIndex?: number; /** Called with every phase change (the Svelte `bind:phase`) */ onPhaseChange?: (phase: DatamoshTransitionPhase) => void; /** Called once the page is fully covered */ oncovered?: () => void; /** Called once the page is fully revealed */ onrevealed?: () => void; } function currentDpr() { return Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 2); } export const DatamoshTransition = forwardRef( function DatamoshTransition( { className, colors = "broadcast", variant = "curtain", sweep = "right", source, seed = 1, columns = DEFAULT_COLUMNS, power = DEFAULT_POWER, tiles = DEFAULT_TILES, coverDuration = 380, revealDuration = 480, stagger = 28, speed = 1, contained = false, zIndex = 9999, onPhaseChange, oncovered, onrevealed, style, ...restProps }, ref ) { const reduced = useReducedMotion(); const palette = useMemo(() => resolvePalette(colors), [colors]); const columnsC = Math.max(1, Math.round(Number.isFinite(columns) ? columns : DEFAULT_COLUMNS)); const powerC = Number.isFinite(power) && power > 0 ? power : DEFAULT_POWER; const tilesC = oddTiles(tiles); const speedC = Number.isFinite(speed) && speed > 0 ? speed : 1; const strip = useMemo(() => buildStrip(seed, palette), [seed, palette]); const delays = useMemo( () => columnDelays( columnsC, sweep, Math.max(0, Number.isFinite(stagger) ? stagger : 0) / 1000, seed ), [columnsC, sweep, stagger, seed] ); /** Darkest colour as a backing fill, so rounding seams never show the page through. */ const backing = palette[paletteRoles(palette).darks[0] ?? 0] ?? "#14101f"; const [phase, setPhaseState] = useState("idle"); const hostRef = useRef(null); const canvasRef = useRef(null); // Everything the loop reads, always current, without re-creating the engine. const live = useLiveRef({ reduced, palette, columnsC, powerC, tilesC, speedC, strip, delays, backing, variant, coverDuration, revealDuration, onPhaseChange, oncovered, onrevealed, }); // --- plain closure state (touched every frame, never rendered) --------------- const s = useRef({ ctx: null as CanvasRenderingContext2D | null, w: 0, h: 0, edges: [] as number[], cov: createCoverage(DEFAULT_COLUMNS) as Coverage, direction: "reveal" as Direction, phase: "idle" as DatamoshTransitionPhase, phaseTime: 0, elapsed: 0, rafId: null as number | null, lastT: 0, pending: [] as Array<() => void>, sourceImage: null as CanvasImageSource | null, sourceSize: { w: 0, h: 0 }, sourceTable: null as string[][] | null, }).current; // The engine: stable functions over `s` and `live`, built once. const engine = useMemo(() => { function setPhase(next: DatamoshTransitionPhase) { if (s.phase === next) return; s.phase = next; setPhaseState(next); live.current.onPhaseChange?.(next); } function settlePending() { const list = s.pending; s.pending = []; for (const resolve of list) resolve(); } function clear() { s.ctx?.clearRect(0, 0, s.w, s.h); } function draw() { const c = s.ctx; const p = live.current; if (!c || !s.edges.length) return; const { w, h } = s; c.clearRect(0, 0, w, h); const bleed = Math.round(BLEED * h); const len = p.palette.length; // Reduced motion paints one still frame part-way into a step. const t = p.reduced ? CYCLE * 0.45 + p.columnsC * FALL_STAGGER : s.elapsed; for (let i = 0; i < p.columnsC; i++) { const x0 = s.edges[i]!; const cw = s.edges[i + 1]! - x0; if (cw <= 0) continue; const band = columnBand( p.variant, i, easeEdge(s.cov.top[i] ?? 0), easeEdge(s.cov.bot[i] ?? 0) ); const bandTop = Math.round(band.y0 * h); const bandBot = Math.round(band.y1 * h); if (bandBot <= bandTop) continue; c.fillStyle = p.backing; c.fillRect(x0, bandTop, cw, bandBot - bandTop); const flow = columnFlow(t, i, p.columnsC, p.speedC); for (const tile of columnTiles(flow, p.tilesC, h, bleed)) { // Mirrored stacks rise instead of fall; the overhang still laps the next tile. const top = band.mirror ? h - tile.bot : tile.top; const bot = band.mirror ? h - tile.top : tile.bot; const y0 = Math.max(bandTop, top); const y1 = Math.min(bandBot, bot); if (y1 <= y0) continue; c.fillStyle = s.sourceTable?.[i]?.[sourceSlot(tile.id, i, p.tilesC)] ?? p.palette[stripIndex(p.strip, tile.id, i) % len]!; c.fillRect(x0, y0, cw, y1 - y0); } } } function stopLoop() { if (s.rafId !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(s.rafId); s.rafId = null; } function requestFrame() { if (s.rafId !== null || !s.ctx || typeof requestAnimationFrame !== "function") return; s.lastT = 0; s.rafId = requestAnimationFrame(tick); } function finish(dir: Direction) { settleCoverage(s.cov, dir); setPhase(dir === "cover" ? "covered" : "idle"); if (dir === "reveal") { stopLoop(); clear(); } else if (!live.current.reduced) { requestFrame(); } else { draw(); } settlePending(); if (dir === "cover") live.current.oncovered?.(); else live.current.onrevealed?.(); } function tick(now: number) { s.rafId = null; if (!s.ctx) return; // Time-based: identical pacing at 60 Hz and 120 Hz; long stalls clamp. const dt = s.lastT ? Math.min(0.05, Math.max(0, (now - s.lastT) / 1000)) : 0; s.lastT = now; s.elapsed += dt; if (s.phase === "covering" || s.phase === "revealing") { s.phaseTime += dt; const p = live.current; const duration = (s.direction === "cover" ? p.coverDuration : p.revealDuration) / 1000; const done = stepCoverage(s.cov, s.direction, s.phaseTime, dt, duration, p.delays); if (done) { finish(s.direction); return; } } draw(); if (s.phase !== "idle") s.rafId = requestAnimationFrame(tick); } function run(dir: Direction): Promise { // A superseded call resolves now: its caller moves on, the new phase takes over. settlePending(); const promise = new Promise((resolve) => s.pending.push(resolve)); // Already there: nothing to animate, no callback. if ( (dir === "reveal" && s.phase === "idle") || (dir === "cover" && s.phase === "covered") ) { settlePending(); return promise; } s.direction = dir; s.phaseTime = 0; setPhase(dir === "cover" ? "covering" : "revealing"); const instant = !s.ctx || live.current.reduced || typeof requestAnimationFrame !== "function" || (typeof document !== "undefined" && document.hidden); if (instant) finish(dir); else requestFrame(); return promise; } /** Sample the loaded picture onto the current grid; any failure falls back to the palette. */ function buildSourceTable() { s.sourceTable = null; if (!s.sourceImage || !s.edges.length || typeof document === "undefined") return; const pw = 96; const ph = Math.max(8, Math.round((pw * s.h) / Math.max(1, s.w))); try { const scratch = document.createElement("canvas"); scratch.width = pw; scratch.height = ph; const sctx = scratch.getContext("2d", { willReadFrequently: true }); if (!sctx) return; const fit = coverFit(s.sourceSize.w, s.sourceSize.h, pw, ph); sctx.drawImage(s.sourceImage, fit.sx, fit.sy, fit.sw, fit.sh, 0, 0, pw, ph); const { data } = sctx.getImageData(0, 0, pw, ph); const norm = s.edges.map((e) => e / Math.max(1, s.w)); s.sourceTable = sampleSource(data, pw, ph, norm, live.current.tilesC); } catch { // Cross-origin picture without CORS taints the canvas: keep the palette. s.sourceTable = null; } } function measure() { const host = hostRef.current; const canvas = canvasRef.current; if (!host || !canvas || !s.ctx) return; const p = live.current; const dpr = currentDpr(); s.w = Math.max(1, Math.round(host.clientWidth * dpr)); s.h = Math.max(1, Math.round(host.clientHeight * dpr)); canvas.width = s.w; canvas.height = s.h; s.ctx.imageSmoothingEnabled = false; s.edges = columnEdges(s.w, p.columnsC, p.powerC); buildSourceTable(); if (s.cov.top.length !== p.columnsC) { const covered = s.phase === "covered" || s.phase === "covering"; s.cov = createCoverage(p.columnsC, covered); } if (s.phase !== "idle") draw(); } return { run, draw, finish, measure, stopLoop, requestFrame, settlePending, buildSourceTable, }; }, [live, s]); const cover = useCallback(() => engine.run("cover"), [engine]); const reveal = useCallback(() => engine.run("reveal"), [engine]); const play = useCallback(async () => { await engine.run("cover"); await engine.run("reveal"); }, [engine]); useImperativeHandle( ref, () => ({ cover, reveal, play, get element() { return hostRef.current; }, }), [cover, reveal, play] ); // --- mount: context, observers, hidden tab --------------------------------- useEffect(() => { const host = hostRef.current; const canvas = canvasRef.current; if (!host || !canvas) return; s.ctx = canvas.getContext("2d"); if (!s.ctx) return; engine.measure(); let ro: ResizeObserver | undefined; if (typeof ResizeObserver !== "undefined") { ro = new ResizeObserver(() => engine.measure()); ro.observe(host); } // A hidden tab stops rAF: finish the phase so an awaiting navigation never hangs. const onVisibility = () => { if (!document.hidden) { if (s.phase !== "idle") engine.requestFrame(); return; } engine.stopLoop(); if (s.phase === "covering") engine.finish("cover"); else if (s.phase === "revealing") engine.finish("reveal"); }; document.addEventListener("visibilitychange", onVisibility); return () => { engine.stopLoop(); ro?.disconnect(); document.removeEventListener("visibilitychange", onVisibility); engine.settlePending(); s.ctx = null; }; }, [engine, s]); // Grid-shaping props: re-measure (column count may change the coverage arrays). const gridInit = useRef(false); useEffect(() => { if (!gridInit.current) { gridInit.current = true; return; } engine.measure(); }, [columnsC, powerC, engine]); // Reduced motion flips mid-phase: settle instantly rather than animate. useEffect(() => { if (!reduced) return; if (s.phase === "covering") engine.finish("cover"); else if (s.phase === "revealing") engine.finish("reveal"); else if (s.phase === "covered") { engine.stopLoop(); engine.draw(); } }, [reduced, engine, s]); // Load the picture source; a stale load never overwrites a newer one. useEffect(() => { s.sourceImage = null; s.sourceTable = null; const src = source; if (!src || typeof window === "undefined") return; let cancelled = false; const ready = (img: CanvasImageSource, iw: number, ih: number) => { if (cancelled || iw <= 0 || ih <= 0) return; s.sourceImage = img; s.sourceSize = { w: iw, h: ih }; engine.buildSourceTable(); if (s.phase !== "idle") engine.draw(); }; if (typeof src !== "string") { if (src instanceof HTMLCanvasElement) ready(src, src.width, src.height); else if (src.complete && src.naturalWidth) ready(src, src.naturalWidth, src.naturalHeight); else src.addEventListener("load", () => ready(src, src.naturalWidth, src.naturalHeight), { once: true, }); return () => { cancelled = true; }; } const img = new Image(); img.decoding = "async"; if (!src.startsWith("data:")) img.crossOrigin = "anonymous"; img.onload = () => ready(img, img.naturalWidth || 300, img.naturalHeight || 150); img.src = src; return () => { cancelled = true; img.onload = null; }; }, [source, tilesC, engine, s]); return ( ); } ); 55:T4876,"use client"; /** * DatamoshTransition core — pure math, no DOM. * * The look: flat blocks of saturated colour in a FIXED column grid, each column * a stack of tiles falling along one sigmoid curve — slivers at the top and * bottom, one fat tile snapping open through the middle. Nothing ever moves * horizontally; only the vertical tiling animates. * * On top of that sits the transition itself: every column owns a covered band * [top, bot] (0..1 of the height). Cover drops the band's bottom edge like a * curtain, reveal lets its top edge fall away, columns staggered right to left. */ // --- defaults ------------------------------------------------------------------ export const DEFAULT_COLORS = [ "#ffffff", "#3566ff", "#ffcf00", "#192aff", "#d62036", "#282142", "#ec4978", "#ff9900", "#14101f", "#00dd33", "#00ef82", ] as const; /** Column edges sit at W·(i/N)^power: narrow left, wide right — reads as receding perspective. */ export const DEFAULT_COLUMNS = 11; export const DEFAULT_POWER = 1.65; /** Odd so exactly one tile sits dead centre and takes the whole bulge. */ export const DEFAULT_TILES = 15; /** Seconds per tile step at speed 1. */ export const CYCLE = 0.2; /** Seconds between neighbouring columns starting to fall (right column first). */ export const FALL_STAGGER = 0.006; /** Sigmoid exponent — steepness at the centre is tile height. */ export const STRETCH = 8.5; /** Exponential arrival rate inside a tile step (the "spring"). */ export const SPRING_K = 1.6; /** Each tile overhangs the one below by this fraction of the height. */ export const BLEED = 0.012; /** Phase offset per column, in tiles — the zig-zag. Negative: stacks ride higher to the right. */ export const COL_PHASE = -0.4; /** Slope of the curve past both ends; clamping would pile off-screen tiles onto y = 0. */ export const TAIL_SLOPE = 0.05; /** Length of the cyclic colour strip every column reads. */ export const STRIP_LENGTH = 61; // --- randomness ---------------------------------------------------------------- /** Small, fast, seedable PRNG (32-bit state). Same seed → same sequence. */ export function mulberry32(seed: number): () => number { let a = seed >>> 0; return () => { a = (a + 0x6d2b79f5) >>> 0; let t = a; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } // --- palette ------------------------------------------------------------------- /** Relative luminance of a hex (#rgb / #rrggbb) or rgb() colour; null when unparseable. */ export function luminance(color: string): number | null { const s = color.trim().toLowerCase(); let rgb: number[] | null = null; const hex = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/); if (hex) { const h = hex[1]!; const full = h.length === 3 ? h .split("") .map((c) => c + c) .join("") : h; rgb = [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16)); } else { const m = s.match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/); if (m) rgb = [Number(m[1]), Number(m[2]), Number(m[3])]; } if (!rgb) return null; const [r, g, b] = rgb.map((v) => { const c = Math.min(255, v) / 255; return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; }) as [number, number, number]; return 0.2126 * r + 0.7152 * g + 0.0722 * b; } export interface PaletteRoles { /** The lightest colour — recurs most often (~a quarter of the strip). */ light: number; /** The darkest one or two colours — the other contrast anchor. */ darks: number[]; /** Everything else. */ hues: number[]; } /** Split a palette into contrast anchors and mid-tone hues by luminance. */ export function paletteRoles(colors: readonly string[]): PaletteRoles { const ranked = colors .map((c, i) => ({ i, l: luminance(c) ?? 0.5 })) .sort((a, b) => a.l - b.l || a.i - b.i); const light = ranked[ranked.length - 1]!.i; const darkCount = colors.length >= 5 ? 2 : 1; const darks = ranked.slice(0, darkCount).map((r) => r.i); const hues = ranked.slice(darkCount, -1).map((r) => r.i); return { light, darks, hues }; } function pickDifferent(from: number, avoid: number[], len: number): number { for (let i = 1; i <= len; i++) { const c = (from + i) % len; if (!avoid.includes(c)) return c; } return from; } /** * The cyclic colour strip, as palette indices. Light and dark anchors recur * often on purpose: a fixed palette stride walks past them and leaves flat * mid-tone corduroy. No two neighbours repeat, including across the wrap. */ export function buildStrip(seed: number, colors: readonly string[], len = STRIP_LENGTH): number[] { const n = colors.length; if (n < 2) return Array.from({ length: len }, () => 0); const { light, darks, hues } = paletteRoles(colors); const pool = hues.length ? hues : darks; const rand = mulberry32(seed); const strip: number[] = []; let lastHue = -1; for (let k = 0; k < len; k++) { const r = rand(); let next: number; if (r < 0.26) { next = light; } else if (r < 0.42) { next = darks[Math.floor(rand() * darks.length)]!; } else { let h = pool[Math.floor(rand() * pool.length)]!; if (h === lastHue && pool.length > 1) h = pool[(pool.indexOf(h) + 1) % pool.length]!; lastHue = h; next = h; } if (k > 0 && next === strip[k - 1]) next = pickDifferent(next, [strip[k - 1]!], n); strip.push(next); } if (len > 2 && strip[len - 1] === strip[0]) { strip[len - 1] = pickDifferent(strip[len - 1]!, [strip[len - 2]!, strip[0]!], n); } return strip; } /** Colour for a tile, keyed by its IDENTITY (never its on-screen slot) — colours stay put. */ export function stripIndex(strip: readonly number[], id: number, column: number): number { const len = strip.length; const s = id - column; return strip[((s % len) + len) % len]!; } // --- geometry ------------------------------------------------------------------ /** Column edges in device px: W·(i/N)^power, rounded. Length = columns + 1. */ export function columnEdges(width: number, columns: number, power: number): number[] { const edges: number[] = []; for (let i = 0; i <= columns; i++) { edges.push(Math.round(width * Math.pow(i / columns, power))); } return edges; } /** Force a usable odd tile count (≥ 3). */ export function oddTiles(tiles: number): number { const t = Math.max(3, Math.round(Number.isFinite(tiles) ? tiles : DEFAULT_TILES)); return t % 2 === 0 ? t + 1 : t; } /** * Where tile boundary `k` sits, 0..1 of the height. Sigmoid across [0, tiles], * extended LINEARLY (shallow slope) past both ends rather than clamped. */ export function tileEdge(k: number, tiles: number, stretch = STRETCH): number { const u = k / tiles; if (u < 0) return u * TAIL_SLOPE; if (u > 1) return 1 + (u - 1) * TAIL_SLOPE; const a = Math.pow(u, stretch); return a / (a + Math.pow(1 - u, stretch)); } const SPRING_NORM = 1 - Math.exp(-SPRING_K); /** * Re-time the fraction of one tile step: exponential arrival mirrored at the * halfway point. Rushes in, hangs at the centre (fattest), releases. Monotonic, * exact at 0 and 1, so the stack never drifts off schedule. */ export function springStep(p: number): number { const half = (t: number) => (1 - Math.exp(-SPRING_K * t)) / SPRING_NORM; return p < 0.5 ? 0.5 * half(2 * p) : 1 - 0.5 * half(2 * (1 - p)); } /** * Unbounded phase of column `i` at `elapsed` seconds. Never wrapped: tile * identity is derived from it, so a wrap would teleport every boundary. */ export function columnFlow(elapsed: number, column: number, columns: number, speed = 1): number { const delay = (columns - 1 - column) * FALL_STAGGER; const t = elapsed - delay; const raw = t <= 0 ? 0 : (t * speed) / CYCLE; const linear = raw + column * COL_PHASE; const step = Math.floor(linear); return step + springStep(linear - step); } export interface TileRect { id: number; /** Device px, unclamped. */ top: number; /** Device px, bleed included, unclamped. */ bot: number; } /** * The tiles of one column at `flow`, ordered BOTTOM-UP (paint order): each * tile overhangs the one below it by `bleed` px, so painting upward laps the * overhang over the lower tile instead of hiding it under it. */ export function columnTiles( flow: number, tiles: number, height: number, bleed: number ): TileRect[] { const out: TileRect[] = []; const base = -Math.floor(flow); for (let n = tiles + 2; n >= -2; n--) { const id = base + n; const k = id + flow; const top = Math.round(tileEdge(k, tiles) * height); const bot = Math.round(tileEdge(k + 1, tiles) * height) + bleed; if (bot <= top) continue; out.push({ id, top, bot }); } return out; } // --- coverage ------------------------------------------------------------------ export type Direction = "cover" | "reveal"; export interface Coverage { /** Covered band per column, linear 0..1 (eased only when drawn). */ top: Float32Array; bot: Float32Array; } export function createCoverage(columns: number, covered = false): Coverage { const top = new Float32Array(columns); const bot = new Float32Array(columns); if (covered) bot.fill(1); return { top, bot }; } /** Order in which the columns move. */ export type DatamoshSweep = "right" | "left" | "center" | "edges" | "random"; /** * Delay before each column moves, in seconds. `right` starts at the rightmost * column, `center` fans out from the middle, `edges` closes in from both * sides, `random` is a seeded shuffle. */ export function columnDelays( columns: number, sweep: DatamoshSweep, stagger: number, seed = 1 ): number[] { const mid = (columns - 1) / 2; const rank = (i: number): number => { switch (sweep) { case "left": return i; case "center": return Math.abs(i - mid); case "edges": return mid - Math.abs(i - mid); case "random": return 0; default: return columns - 1 - i; } }; if (sweep === "random") { const order = Array.from({ length: columns }, (_, i) => i); const rand = mulberry32(seed ^ 0x5eed); for (let i = order.length - 1; i > 0; i--) { const j = Math.floor(rand() * (i + 1)); [order[i], order[j]] = [order[j]!, order[i]!]; } const delays = new Array(columns); order.forEach((col, k) => (delays[col] = k * stagger)); return delays; } return Array.from({ length: columns }, (_, i) => rank(i) * stagger); } /** * Advance every column one step toward `direction`. Cover drops the band's * bottom edge to 1 (and pulls a half-fallen top back up); reveal lets the top * edge fall onto the bottom one. Monotonic per column, so an interruption just * reverses from wherever each column is. Returns true once every column is done. */ export function stepCoverage( cov: Coverage, direction: Direction, phaseTime: number, dt: number, duration: number, delays: ArrayLike ): boolean { const n = cov.top.length; const rate = duration > 0 ? dt / duration : Infinity; let done = true; for (let i = 0; i < n; i++) { const started = phaseTime >= (delays[i] ?? 0); if (direction === "cover") { // An emptied column restarts from the top as a fresh curtain. if (cov.bot[i]! - cov.top[i]! <= 1e-6 && cov.bot[i]! < 1) { cov.top[i] = 0; cov.bot[i] = 0; } if (started) { cov.bot[i] = Math.min(1, cov.bot[i]! + rate); cov.top[i] = Math.max(0, cov.top[i]! - rate); } if (cov.bot[i]! < 1 || cov.top[i]! > 0) done = false; } else { if (started) cov.top[i] = Math.min(cov.bot[i]!, cov.top[i]! + rate); if (cov.top[i]! < cov.bot[i]!) done = false; } } return done; } /** Snap every column to the end of `direction`. */ export function settleCoverage(cov: Coverage, direction: Direction) { if (direction === "cover") { cov.top.fill(0); cov.bot.fill(1); } else { cov.top.fill(0); cov.bot.fill(0); } } /** Ease for a band edge: cubic in-out, exact at 0 and 1. */ export function easeEdge(a: number): number { const x = Math.min(1, Math.max(0, a)); return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; } // --- effects --------------------------------------------------------------------- /** * Shape of the covered band. `curtain` drops from the top and falls away, * `rise` climbs from the bottom and lifts off, `split` opens from the centre * line and squeezes shut onto it, `interlace` alternates curtain and rise * column by column. Everything stays vertical. */ export type DatamoshEffect = "curtain" | "rise" | "split" | "interlace"; export interface Band { /** 0..1 of the height. */ y0: number; y1: number; /** Draw the tile stack upside down (tiles rise instead of fall). */ mirror: boolean; } /** * Map a column's curtain-space band `[top, bot]` (already eased) onto the * screen for `effect`. Curtain space is what `stepCoverage` animates; every * effect is a pure re-mapping of it, so interruptions behave the same. */ export function columnBand(effect: DatamoshEffect, column: number, top: number, bot: number): Band { const rise = effect === "rise" || (effect === "interlace" && column % 2 === 1); if (effect === "split") { const half = Math.max(0, bot - top) / 2; return { y0: 0.5 - half, y1: 0.5 + half, mirror: false }; } if (rise) return { y0: 1 - bot, y1: 1 - top, mirror: true }; return { y0: top, y1: bot, mirror: false }; } // --- palettes -------------------------------------------------------------------- /** Ready-made palettes. Each keeps one light anchor and a couple of near-blacks. */ export const DATAMOSH_PALETTES = { broadcast: DEFAULT_COLORS, thermal: [ "#fff4d6", "#ffd23f", "#ff9f1c", "#ff5a1f", "#e0282e", "#b0125b", "#6a0f63", "#2a0a3d", "#0d0614", ], sunset: [ "#fff6d8", "#fbc56b", "#f59a3a", "#e97a1d", "#c85a14", "#8a4a22", "#5a3b25", "#2d1c16", "#140b08", ], mono: ["#ffffff", "#e5e5e5", "#b5b5b5", "#8a8a8a", "#5c5c5c", "#2e2e2e", "#141414", "#050505"], acid: [ "#f4ffe8", "#e4ff1a", "#00ff9c", "#00e0ff", "#3d5afe", "#8c3dff", "#ff2bd6", "#1b0b36", "#070707", ], } as const satisfies Record; export type DatamoshPaletteName = keyof typeof DATAMOSH_PALETTES; /** Resolve a palette name or colour list; falls back to the default for anything unusable. */ export function resolvePalette( colors: readonly string[] | DatamoshPaletteName | undefined ): string[] { if (typeof colors === "string") return [...(DATAMOSH_PALETTES[colors] ?? DEFAULT_COLORS)]; return colors && colors.length >= 2 ? [...colors] : [...DEFAULT_COLORS]; } // --- picture source -------------------------------------------------------------- /** Largest brightness gain the `boost` auto-levels may apply. */ export const MAX_GAIN = 1.6; /** Share of the picture's height the slots sample from, centred. */ export const SOURCE_SPAN = 0.6; /** * Height (0..1) a slot samples the picture at: spread linearly over the middle * `SOURCE_SPAN` of the picture. Not along the fall's sigmoid, which packs * almost every slot against the edges, and not over the full height, where * frames and borders (the darkest, dullest parts of most pictures) sit. */ export function sourceSlotY(slot: number, tiles: number): number { return 0.5 + ((slot + 0.5) / tiles - 0.5) * SOURCE_SPAN; } /** * Which rest slot a tile's colour is sampled from. Keyed by IDENTITY, like the * colour strip: a tile keeps its piece of the picture as it falls, so the * image gets dragged down in chunks instead of sliding under the grid. */ export function sourceSlot(id: number, column: number, tiles: number): number { const s = id - column; return ((s % tiles) + tiles) % tiles; } /** Source rect that fits an image over a box like `object-fit: cover`. */ export function coverFit( imgW: number, imgH: number, boxW: number, boxH: number ): { sx: number; sy: number; sw: number; sh: number } { if (imgW <= 0 || imgH <= 0 || boxW <= 0 || boxH <= 0) return { sx: 0, sy: 0, sw: imgW, sh: imgH }; const scale = Math.max(boxW / imgW, boxH / imgH); const sw = boxW / scale; const sh = boxH / scale; return { sx: (imgW - sw) / 2, sy: (imgH - sh) / 2, sw, sh }; } /** * Colour table `[column][slot]` sampled from an RGBA buffer that already maps * onto the overlay box. Each cell averages a 3×3 neighbourhood at the column's * centre and the slot's height. `edges` are column edges normalised to 0..1. * * With `boost` (default), the table is auto-levelled (darkest cell → black, * brightest → white) and saturated, so a moody picture still decodes into the * flat, saturated blocks the effect is about. */ export function sampleSource( pixels: ArrayLike, pw: number, ph: number, edges: readonly number[], tiles: number, boost = true ): string[][] { const at = (x: number, y: number) => { const cx = Math.min(pw - 1, Math.max(0, x)); const cy = Math.min(ph - 1, Math.max(0, y)); return (cy * pw + cx) * 4; }; const cells: [number, number, number][][] = []; let lo = Infinity; let hi = -Infinity; for (let i = 0; i + 1 < edges.length; i++) { const x = Math.round(((edges[i]! + edges[i + 1]!) / 2) * (pw - 1)); const row: [number, number, number][] = []; for (let s = 0; s < tiles; s++) { const y = Math.round(sourceSlotY(s, tiles) * (ph - 1)); let r = 0; let g = 0; let b = 0; for (let dy = -1; dy <= 1; dy++) { for (let dx = -1; dx <= 1; dx++) { const k = at(x + dx, y + dy); r += pixels[k]!; g += pixels[k + 1]!; b += pixels[k + 2]!; } } const cell: [number, number, number] = [r / 9, g / 9, b / 9]; const l = 0.2126 * cell[0] + 0.7152 * cell[1] + 0.0722 * cell[2]; lo = Math.min(lo, l); hi = Math.max(hi, l); row.push(cell); } cells.push(row); } const span = hi - lo; // Gain capped: a dark, low-contrast picture (a dusk scene) would otherwise be // blown out into one flat neon colour. const level = boost && span > 8 ? Math.min(MAX_GAIN, 255 / (hi - lo * 0.5)) : 1; // Lift the floor only halfway, so shadows stay dark without crushing to black. const offset = boost && span > 8 ? lo * 0.5 : 0; const saturation = boost ? 1.35 : 1; const clamp = (v: number) => Math.round(Math.min(255, Math.max(0, v))); return cells.map((row) => row.map(([r, g, b]) => { let [nr, ng, nb] = [(r - offset) * level, (g - offset) * level, (b - offset) * level]; const l = 0.2126 * nr + 0.7152 * ng + 0.0722 * nb; nr = l + (nr - l) * saturation; ng = l + (ng - l) * saturation; nb = l + (nb - l) * saturation; return `rgb(${clamp(nr)}, ${clamp(ng)}, ${clamp(nb)})`; }) ); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/internals-motion.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"react/src/components/datamosh-transition/DatamoshTransition.tsx","content":"$54","type":"registry:ui","target":"@ui/fancy/components/datamosh-transition/DatamoshTransition.tsx"},{"path":"react/src/components/datamosh-transition/datamosh-transition-core.ts","content":"$55","type":"registry:ui","target":"@ui/fancy/components/datamosh-transition/datamosh-transition-core.ts"},{"path":"react/src/components/datamosh-transition/index.ts","content":"\"use client\";\n\nexport { DatamoshTransition } from \"./DatamoshTransition\";\nexport type {\n\tDatamoshTransitionProps,\n\tDatamoshTransitionPhase,\n\tDatamoshTransitionHandle,\n} from \"./DatamoshTransition\";\nexport {\n\tDATAMOSH_PALETTES,\n\ttype DatamoshEffect,\n\ttype DatamoshSweep,\n\ttype DatamoshPaletteName,\n} from \"./datamosh-transition-core\";\n","type":"registry:ui","target":"@ui/fancy/components/datamosh-transition/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]