A tactile mechanical split-flap digital clock display inspired by vintage Solari di Udine airport departure boards. Combines realistic 3D leaf card curvature, procedural acoustic clatter synthesis, and bold transit typography.
Kinetic Simulation
Traditional split-flap boards produce a uniquely satisfying rhythmic physical presence. We capture the physical inertia, leaf-card folding geometry, and acoustic impact of interlocking mechanical tabs.
Mechanics & Motion
Upper flap rotates downward along its bottom hinge axis with hardware-accelerated 3D perspective and dynamic gradient shadows cast across the stationary bottom leaf.
Web Audio API generates authentic interlocking plastic tab clicks using bandpass-filtered noise bursts and exponential decay gain envelopes with micro-pitch jitter.
Digits cycle sequentially through intermediate numbers when rolling rather than jumping instantaneously, simulating the real mechanical shaft rotation of transit indicators.
Faithful transit themes including Matte Charcoal with Ivory lettering, European Railway Signal Orange on Black, and Night Shift Amber for low-light environments.
Modular split-flap panels supporting 12h/24h time, day-of-week abbreviations, three-letter month displays, and customizable custom departure message headers.
Freezes requestAnimationFrame and suspends the Web Audio context when the tab is backgrounded via the Page Visibility API, ensuring zero battery drain when out of view.
Engineering Blueprint
| Subsystem | Technical Implementation | Performance Spec | Platform Fidelity |
|---|---|---|---|
| Card Geometry | Dual 3D DOM cards with transform-style: preserve-3d; transform-origin: bottom center |
GPU composited layer (zero layout thrashing) | Sub-pixel text alignment with zero jitter |
| Shadow Casting | Dynamic linear gradient opacity computed continuously via rotation angle formula | Calculated in CSS keyframe animation | Accurate ambient occlusions |
| Acoustic Model | White noise buffer piped through 2200 Hz biquad bandpass filter + 18ms gain envelope | Zero network audio samples loaded | Procedural variation on every flap |
| Frame Budget | Native 60 FPS / 120 FPS refresh on ProMotion and high-refresh desktop monitors | < 0.4ms script execution per tick | Rock-solid frame timing |
| Background Standby | Auto-suspends Web Audio clock and halts render loop when document.hidden === true |
0.0% CPU usage in background tabs | Eco & battery optimized |
Usage Flow
01 · Launch
Mount on any browser window or set as a fullscreen standby display on your desk.
02 · Choose
Toggle between classic airport charcoal, railway orange, or night shift amber.
03 · Audio
Tune the mechanical click volume or mute sound entirely for silent operation.
04 · Relax
Enjoy the peaceful, rhythmic visual cadence of real mechanical transit engineering.