HOW TO HOLD
3.7 SECONDS.

THE PAGE IS A TIMING INSTRUMENT.

DRAGSTRIP translates the fictional Nitro Nationals into an engineered editorial experience. The emotional register is not nostalgia and not motorsport merchandise. It is controlled violence measured with clinical precision: burnout black surrounds a single nitro-yellow signal, chrome catches hard daylight, and every number looks torn from a timing tower. The content follows the run outward, moving from the driver’s 3.7-second experience to body load, fuel chemistry, the time slip, surface craft and the night program.

Every visual is code. There are no generated, stock or hidden raster assets. The dragster is inline SVG, the smoke is canvas, the track is CSS perspective, and the molecule is a set of shaded HTML atoms and bonds. That constraint is proudly native to the Velocity Wing.

THE 3.7 / SIGNATURE

In main.js, update(ms) is the central clock. The range input supplies any value from 0 to 3700. metrics(ms) maps that value to velocity, acceleration, car translation, launch lift, shake and chute deployment. distanceAt(ms) interpolates the fictional time-slip beams—60, 330, 660, 1,000 and 1,320 feet—so the visual instrument and printed verdict agree. Seven phase records supply the driver-body annotations.

Clicking RUN starts animate(now); real elapsed time advances the same clock, making playback and scrubbing interchangeable. The Reaction Bay adds a second, human clock: startReactionTest() temporarily takes over the section-navigation bulbs, falls three ambers 80 milliseconds apart, opens green, and compares a second press against performance.now(). It is fully operable from the keyboard and restores the tree to its current section afterward.

resizeStage() caches geometry, while drawSmoke() recycles 32 radial-gradient particles. Visibility changes cancel the pass, smoke and reaction sequence; only ambient smoke restarts when the page returns. Reduced-motion users receive a static stage, manual timeline and instant reaction light.

VISUAL TECHNIQUES

Chrome without images

Inline SVG and CSS gradients alternate narrow bands of white, graphite and silver to imply reflected lane light. The dragster, chute canopies, timing beams and JET 02 dryer are geometry rather than pictures. No generated assets exist for this wing; the limitation is part of the exhibition.

The Christmas tree

The fixed .tree-nav is both staging tree and semantic section navigation. An IntersectionObserver tracks data-nav-section landmarks, adds aria-current, and lights pre-stage, stage, 3 ambers and green in sequence. On phones it becomes a bottom timing dock with 44-pixel targets.

Depth, heat and paper

Perspective lane rules, a conic heat plume, molecular orbit, perforated receipt edges and the black registration wedge behind the time study create distinct materials without leaving the palette. Scroll reveals use opacity and transforms only. A turbulence SVG texture and deliberately uneven grids keep the engineering surfaces from feeling like generic cards.

PALETTE + TYPE

Archivo Black carries impacts, section headlines and the huge 3.7. Its compact mass feels physically accelerated. Chivo Mono carries body copy, labels, telemetry and the time slip. The pairing keeps spectacle and measurement visibly distinct. Both families are self-hosted from the project font library.

REPRODUCE THIS

Ask an AI coding agent for a pure HTML/CSS/JavaScript editorial site where one real-time physical event becomes the page’s master clock. Specify the exact duration, the phase thresholds, the quantities that derive from time and how the interface changes at each threshold. Require a range input and real-time playback to share one update function. Then lock a dominant near-black field, one high-energy signal color, a condensed impact face and a technical mono.

“Build a responsive, code-drawn velocity story around a 3.7-second fictional quarter-mile pass. Make an accessible millisecond scrubber drive a CSS/SVG vehicle, telemetry and human-impact annotations through one JavaScript clock. Use no image assets, pause animation when hidden, preserve manual interaction under reduced motion, and turn a Christmas tree into section navigation.”