{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "foil-block", "title": "Foil Block", "description": "A full-width closing CTA band built on hot foil blocking — a die strikes the headline's terminal word and a rule frame around the primary button, and only transfers foil where temperature AND pressure both clear a hard threshold at once. The spent web indexes forward after every strike, carrying a fading negative record of the last nine, so the band keeps moving with zero input.", "dependencies": [], "files": [ { "path": "registry/loud/foil-block/component.tsx", "content": "\"use client\";\n\nimport { useEffect, useId, useRef } from \"react\";\n\n// ---------------------------------------------------------------------------\n// FoilBlock — a full-width closing CTA band built on hot foil blocking\n// (hot stamping). A heated die presses a metallised polyester web onto the\n// headline's terminal word and a rule frame around the primary button; the\n// web is a stack (PET carrier / release coat / lacquer / vacuum-metallised\n// aluminium / heat-activated size) that only transfers above a hard DUAL\n// threshold — temperature AND pressure both have to clear their floor in the\n// same pixel, or nothing sticks there. That is this component's whole\n// identity and what separates it from its nearest neighbour in this round,\n// structure-quoin-lockup: quoin-lockup's variable is PRESSURE distributing a\n// layout (composed metal type, a bed the whole page rests on); foil-block's\n// variable is a TRANSFER THRESHOLD deciding whether a mark takes AT ALL, and\n// it never renders a bed of type — only a headline word and a button frame\n// get struck.\n//\n// MECHANIC: die temperature is 118degC everywhere inside the die's own\n// outline, falling linearly to 109degC over the outer 6px of that outline (a\n// die perimeter runs cold in the real process). Contact pressure is a\n// continuous field of 3 drifting gaussian lobes, +/-0.11MPa about a 0.42MPa\n// mean, drifting at 0.014Hz — nothing about it resets between strikes, so\n// two consecutive strikes fail in different places. A pixel receives foil\n// iff T >= 96degC AND p >= 0.34MPa: a hard threshold, no soft ramp, which is\n// what produces the ragged cold-edge void pattern instead of a clean fill.\n// The mask is evaluated once, at dwell end, and held through peel/index/idle\n// — it does not re-evaluate every frame.\n//\n// STRIKE CYCLE, 4.60s: approach 420ms (die descends, ease-out cubic) -> dwell\n// 300ms (the die closes its last 1.5px of travel under load; mask evaluated\n// at dwell end, t=720ms) -> peel 280ms (die lifts the whole 280ms; the last\n// 90ms the carrier still clings and the foil edge stretches as hairline tail\n// filaments) -> web index 3600ms, the ENTIRE remainder of the cycle. The web\n// can only be held still while the die is down, so it feeds continuously for\n// every millisecond the die is up and advances exactly one hole pitch per\n// cycle. An earlier cut indexed for 1550ms and then sat idle for 2050ms,\n// which is what read as the band stopping and starting again: 45% of every\n// cycle had no moving part at all. The spent web is this component's resting\n// loop: it carries the negative record of the last strikes (alpha 1.0 ->\n// 0.5) and keeps indexing with zero input, which is what makes the band\n// alive at rest. It is deliberately NOT the only thing moving — an\n// unconditional specular band sweeps at 0.19 cycles/s across every\n// transferred area regardless of the strike cycle, foil's directional\n// vacuum-metallised anisotropy, and the make-ready pressure field differs\n// strike to strike, so the mature (already-struck) region is never a still\n// image sliding under a moving band.\n//\n// TRANSFERRED FOIL IS PERMANENT. It is on the stock; the next impression\n// cannot take it back off. An earlier cut called clear() on the mask at\n// every approach, so the struck word dropped to bare unfoiled type for the\n// 720ms of approach + dwell and then snapped back — the visible restart.\n// What a re-strike changes is WHERE the voids fall, because the pressure\n// field has drifted, so a strike now reads as the void pattern re-rolling\n// under a descending die rather than as the word blinking out.\n//\n// ACCESSIBILITY: canvas is aria-hidden. The headline is a real, always-legible\n// heading — its terminal word is given color:transparent ONLY once a 2D\n// context is confirmed live, so a canvas failure leaves plain readable text,\n// never a gap. The button is a real \n )}\n \n {secondaryLabel}\n \n \n \n \n );\n}\n\nFoilBlock.displayName = \"FoilBlock\";\n", "type": "registry:ui", "target": "components/ui/foil-block.tsx" } ], "cssVars": { "theme": { "color-ns-muted": "var(--ns-muted)", "color-ns-accent": "var(--ns-accent)", "color-ns-accent-hover": "var(--ns-accent-hover)" }, "light": { "ns-muted": "#4d4d4d", "ns-accent": "#006bff", "ns-accent-hover": "#0059d1" }, "dark": { "ns-muted": "#8f8f8f" } }, "meta": { "collection": "loud", "tags": [ "cta", "closing-cta", "canvas", "print", "foil", "letterpress", "threshold", "button" ], "instruction": "Build as a full-width closing CTA band (eyebrow, headline, primary button, secondary link) whose visual identity is hot foil blocking (hot stamping): a heated die presses a metallised web onto the headline's LAST word and a thin rule frame offset 8px outside the primary button (never the button's own fill, which stays plain --ns-accent DOM chrome). Rasterize each die's own outline into a small offscreen 2D canvas sized to the DOM element's bounding rect times a capped dpr (word: fillText of the last word at the wrapper's real computed font; frame: strokeRect of a FRAME_STROKE_PX=3 rule inset 8px outside the button rect), read out the alpha channel as the 'sharp' mask, and box-blur a copy of it at radius 6px*dpr to build an edge-distance proxy used ONLY for the die's own 9°C cold-edge falloff (temp = 118 - 9*edgeFrac, inside the die outline only). Contact pressure is a continuous field of 3 gaussian lobes (sigma 0.16 in the region's own 0..1 local coords) summing sin(2*pi*0.014*tAbs + phase) terms of amplitude 0.11 about a mean of 0.42, evaluated at the die's own local (u,v) and an ABSOLUTE simulation-time argument so it never resets between strikes -- consecutive strikes fail in different places. A pixel receives foil iff temp>=96 AND pressure>=0.34: hard threshold, no soft ramp, which is what produces the ragged cold-edge void pattern (rendered as cDim blended 0.5 toward --background) instead of a clean fill. This mask is evaluated exactly ONCE per strike, at dwell end (720ms into the 4.60s cycle: 420ms approach ease-out-cubic die descent of max(10, 0.037*min(w,h))px + 300ms dwell), and held through 280ms peel (last 90ms: 3-7 hairline <=2px tail filaments stretching off the trailing edge as the carrier still clings) + 1550ms web index (spent web scrolls 71px at 46px/s) + 2050ms idle (web still, specular band still sweeping) -- it does NOT re-evaluate per frame. NOTE ON THE SPEC'S PHASE TABLE: the source spec's per-phase durations (420+300+280+1550+1960ms) sum to 4510ms against its own stated 4.60s cycle total; the 1960ms idle figure was the value that gave way, corrected here to 2050ms (CYCLE_MS - approach - dwell - peel - index) so the four other named numbers and the 4.60s identity both hold exactly. On every completed index phase, snapshot the word's sharp+mask arrays into a ghost history capped at 9 entries, each rendered in a dedicated 30px-tall strip along the band's bottom edge (behind a hairline --border rule), translating left with the live index progress and decaying alpha linearly from 1.0 (newest) to 0.18 (oldest, 9th) across the 639px visible run (9*71px) -- this ghost train, not the specular sweep, is the primary resting-loop signal, and is pre-seeded at mount (synthetic strikes at negative virtual times against the SAME continuous pressure field) so the band never looks freshly booted. Independently and unconditionally, a specular band (responsive width max(16, 0.064*min(w,h))px, nominally ~24px, at a 31° diagonal) sweeps across every currently-transferred pixel at 0.19Hz forever, applying a LUMINANCE-ONLY delta of local_foil_L +/- 0.16 (never a hue, never --ns-accent) -- this is what keeps the mature/already-struck region from ever being a static image sliding under a moving band, on top of every strike's own different void pattern. Composite each die region and the ghost strip with a single ImageData buffer + putImageData call per frame (not per-pixel fillRect), and rebuild the die rasters whenever the adaptive backing-store dpr changes so the buffer and the canvas device pixels never drift apart. Colors: cLive (transferred foil) is L 0.94 toward white in dark theme / L 0.78 toward black in light theme, both mixed from --background -- 'bright metal on dark ground' vs 'dark burnish on pale stock', not a compromise. cDim (void/cold-edge) is --ns-muted mixed 0.55 toward --background then blended another 0.5 toward --background at render. --border is used only as a 1px hairline (die registration bracket corners, ghost-strip rule). --ns-accent never appears in canvas code at all -- it is DOM-only, on the real