64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:T31b2,"use client"; import { useEffect, useRef, useState } from "react"; // --------------------------------------------------------------------------- // SolariFlap — a mechanical split-flap (Solari board) display for short // status strings. Each character cell is FOUR stacked layers, not a single // rolling digit (that's counter-carry-ripple's territory): // - a static bottom plate (permanently shows the settled char's bottom // half, updated mid-flip) // - a static "under" plate behind the flap (only ever exposed by the // hover-peek lift; holds a plausible upcoming glyph) // - the flap itself: one absolutely-positioned div with two opposite // faces (front = outgoing glyph's top half, back = incoming glyph's // top half, pre-rotated 180deg) that rotates -180deg on a real 3D // hinge (transform-origin: bottom). Because the back face is baked // to rotateX(180deg), driving the parent from 0 to -180 makes the // back face the one facing the camera in the second half of the // swing — the classic double-sided flip-card trick, done with a // single element instead of two. // A value change schedules each cell through a short chain of quick // flips (3-6 steps through random charset glyphs, landing on the target // on the last one) so it reads as clattering machinery, not a lookup. // Per-cell start times are staggered by a random 20-40ms offset times the // cell's index, so the ripple visibly travels left-to-right. All of this // is direct DOM writes on refs (style.transform/transition set // imperatively, no React state on the per-flip hot path) — only the // settled `displayed` char lives on a plain object, not state. // // Hover (mouse only, this is a status display, not a control): entering // the board pauses further step-scheduling for every cell (in-flight // steps still finish, but no new ones start) until the pointer leaves; // entering one cell additionally lifts that cell's flap 22deg on its // hinge, exposing the static "under" plate behind it as a peek at an // upcoming glyph. Cells are real ))} ); } const CSS = ` .ns-sf-board{display:inline-block;} .ns-sf-row{display:flex;gap:3px;} .ns-sf-cell{ position:relative; width:var(--sf-w); height:var(--sf-h); padding:0; border:1px solid var(--border); border-radius:4px; background:var(--foreground); overflow:hidden; perspective:70px; cursor:default; -webkit-tap-highlight-color:transparent; } .ns-sf-plate{ position:absolute; left:0; width:100%; height:50%; overflow:hidden; display:flex; justify-content:center; font-family:var(--font-geist-mono, ui-monospace, monospace); font-size:calc(var(--sf-h) * 0.52); line-height:var(--sf-h); color:var(--background); } .ns-sf-under{ top:0; align-items:flex-start; } .ns-sf-bottom{ bottom:0; align-items:flex-end; border-top:1px solid var(--background); box-shadow:inset 0 5px 6px -3px color-mix(in srgb, var(--background) 60%, transparent); } .ns-sf-leaf-clip{ position:absolute; top:0; left:0; width:100%; height:50%; overflow:hidden; z-index:2; } .ns-sf-leaf{ position:absolute; top:0; left:0; width:100%; height:100%; transform-style:preserve-3d; transform-origin:bottom center; transform:rotateX(0deg); } .ns-sf-face{ position:absolute; top:0; left:0; width:100%; height:var(--sf-h); display:flex; align-items:center; justify-content:center; font-family:var(--font-geist-mono, ui-monospace, monospace); font-size:calc(var(--sf-h) * 0.52); color:var(--background); backface-visibility:hidden; -webkit-backface-visibility:hidden; } .ns-sf-face-front{ box-shadow:inset 0 -5px 6px -2px color-mix(in srgb, var(--background) 50%, transparent); } .ns-sf-face-back{ transform:rotateX(180deg); box-shadow:inset 0 5px 6px -2px color-mix(in srgb, var(--background) 50%, transparent); } @media (prefers-reduced-motion: reduce){ .ns-sf-leaf{ transition:none !important; } } `; 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L64",null,{"files":[{"path":"registry/core/split-flap-board/component.tsx","content":"$65","type":"registry:ui","target":"components/ui/split-flap-board.tsx"}],"className":"h-[70svh] min-h-80"}]]}]