TITLE: Trace Flow — a living circuit board in copper and signal

PROMPT: Build a single self-contained HTML page that turns the viewport into a living printed circuit board seen through a 3D perspective. Body background #0f172a, overflow hidden. A fixed stage with perspective 1500px holds a .plate layer inset -9% whose transform rotateX/rotateY is driven by pointer position and eased with a dirty-gated requestAnimationFrame lerp (idle stops writing styles); an inner .board sits at translateZ(26px). The board itself is one inline SVG, viewBox 0 0 1200 800, preserveAspectRatio xMidYMid slice, built by assigning an innerHTML string to the existing svg element (never createElementNS, no namespace attribute anywhere). Background: a linear gradient #0d4a37 to #062a1f with a large radial #1a6a4c copper-pour bloom, a 2px silkscreen frame at 16% opacity and a 45-degree hatch pattern of 10%-opacity #d4a537 lines. Traces are generated from a seeded mulberry32 PRNG: 9 horizontal walks starting off-canvas left plus 11 vertical walks starting off-canvas top, each walking 48-144px steps with 62% chance of a 48-96px jog, clamped inside the board, then converted to rounded polyline paths with 13px chamfers. Each trace renders five stacked paths: #0f172a shadow at 9px, #d4a537 copper at 3.6px, a 1px rgba(255,231,168,.28) highlight, a #6ee7b7 10px glow with dasharray 14 986 at 13% opacity, and a #6ee7b7 2.3px signal dash — the last two use pathLength 1000 and a CSS keyframe animating stroke-dashoffset from 0 to -1000 so pulses travel the full path, with per-trace negative animation-delay for desync. Vias at sampled trace corners: 7.5px copper ring, 2.7px dark hole, plus a pulsing #6ee7b7 halo animated on stroke-opacity with staggered delays. Eight components (U1 mcu, U2 regulator, U3 shift register, Q2 mosfet, L1 inductor, C4 capacitor, R12 resistor, D1 led) drawn as dark rects with copper pins, a green polarity dot and monospace silkscreen labels; hover turns their stroke to #6ee7b7 and writes their name and description into a probe readout. Clicking a trace adds a .ping class for 1.1s that speeds its dash animation and brightens the glow. Overlay chrome: top-left header with a monospace kicker, an 800-weight system-ui headline where TRACE is #f8fafc and FLOW is a gradient-clipped #d4a537 to #6ee7b7 wordmark, and a tracked-out subtitle; bottom-left legend of three colour swatches; bottom-right panel with a custom-styled range input (0.4 to 3) that sets a --rate custom property controlling every pulse duration and updates a MHz readout. Fixed dot-grid grain and a radial vignette sit above the board. Respect prefers-reduced-motion by disabling pulse, glint and via animations and the tilt.

DESCRIPTION: A deep-green fabrication board fills the screen and tilts gently toward the pointer like a physical object under a microscope. Copper traces snake in orthogonal runs with chamfered corners, and bright mint pulses chase along them at staggered intervals while vias breathe in sequence and solder points glint. Silkscreen part labels, a revision stamp and a test-point marker give it the authority of real hardware. A gradient-clipped wordmark and a monospace instrument panel with a live signal-rate slider complete the composition — technical, precise and quietly alive.

TECHNIQUES: seeded procedural trace routing with chamfered polyline paths; inline SVG built entirely through innerHTML strings; pathLength-normalised stroke-dasharray/dashoffset animation driven by a single inherited CSS custom property; layered stroke glow instead of SVG filters; staggered negative animation-delay for desynchronised pulses; CSS 3D perspective tilt with eased rAF and dirty-gating; pointer-following overlay sheen via custom properties; radial-gradient dot grid with mask-image; custom range input styling across webkit and moz; reduced-motion media query.

INTERACTION: Move the pointer to tilt the whole board in 3D (and slide a soft specular sheen across it); hover any component to highlight it and read its part number and function in the probe panel; click a trace to inject a bright fast pulse along it; drag the signal-rate slider to change how fast every pulse and via cycle, with the MHz readout updating live. Reduced-motion users get a still board with no tilt and no pulsing.