Guide route
How the Kinetic Type pilot was made.
This route documents the brief, the motion system, the evidence labels, the reduction path, and the critique loop—before the next variation ships.
Brief
Build one isolated JD Workshop variation where typography is the interaction model, not decoration. The pilot proves motion is diagrammatic, evidence-aware, and humane.
Motion breakdown
Built demo Kinetic field
Background character stream moves along scroll velocity. Faster motion scatters letters; stillness tightens them back into cluster. Implemented with CSS transitions + a scroll-speed estimator.
Concept Velocity kerning
Not implemented in this pilot. Proposed technique: interpolate `letter-spacing` from current scroll delta. Requires requestAnimationFrame sampling with dead-zone thresholds to avoid jitter.
Real Clip-path reveals
Sections animate via `clip-path: inset(...)` transitions tied to IntersectionObserver entry. Verified across desktop and mobile breakpoints.
Reduced motion
When the browser prefers reduced motion, this site becomes a static high-contrast typographic poster. The kinetic field stops, transitions collapse to near-zero duration, and the hero hierarchy remains legible. This is not an apology—it is the document’s own evidence discipline.
Evidence labels
Worked frontend techniques, publishable interfaces.
Speculative motion systems, waiting for client context.
Pilot implementations, static-checked and telemetry-ready.
Critique passes
- Pass 1: Desktop screenshot review passed. Hero type layer moved below the console with offset spacing to avoid overlap under 1440 px.
- Pass 2: Mobile at 375 px passed. Nav collapses to stacked links. Telemetry element moves to footer to avoid above-the-fold clutter.
- Pass 3: Reduced-motion state verified manually. Static poster hierarchy intact.