Hover or focus kinetic specimens to scatter the glyphs; release focus to reassemble them.

Werkstatt-Notiz 45 — Build guide

HOW KINETIKA MOVES

The concept: Kinetika is a fictional Zurich/Berlin type foundry whose specimens refuse to sit still. The page treats letterforms as physical material: mass, spring, strain, collision, recovery. That means the typography is not decoration around the product; it is the hero image, catalogue, demo and interface at once. The visual language is severe Swiss brutalism: near-black field, off-white paper inversions, hairline measuring rules, mono metadata and one acid accent, #d8ff3e, used like a warning label.

The kinetic engine

Per-character splitting starts in splitChars() in main.js. Every [data-kinetic] headline is rebuilt as outer .k-char spans for transform writes and inner .k-char__in spans for the staggered load reveal. The original phrase remains as an aria-label; the constructed spans are hidden from assistive tech.
Scroll-velocity wave uses one shared requestAnimationFrame loop. It smooths scrollY deltas, then Kinetic.update() maps velocity into scaleY, lift and tracking-like horizontal spread. Family constants live in PROFILES, so Gravitt topples, Oszilla breathes and Monolit jitters only under load.
The stress scanner is the final calibration layer. updateStressScanner() in main.js bends the fixed acid beam toward pointer position and scroll velocity, updates CSS variables --scan-x, --scan-y and --scan-skew, and refreshes the mono readout without adding a second animation loop.
Scatter/reassemble is handled by Kinetic.scatter() and Kinetic.gather(). Hover, focus and keyboard activation throw each glyph to a seeded offset, rotation and scale; the return uses the springy cubic-bezier(0.18, 1.35, 0.3, 1) transition on .is-scattered .k-char.
Marquees are full-bleed two-row bands. Duplicated text inside width: max-content rows runs through marqL and marqR; outline words are transparent fill plus -webkit-text-stroke.
The playground is rebuilt by renderStage(). It creates safe .pg-char spans with textContent, assigns delay and random-vector variables, and syncForce() pipes the range slider into CSS variables for wave height, scatter radius, gravity drop and stretch width.

Palette & type tokens

--ink #0a0a0aField

--paper #f2f2ecInversion

--acid #d8ff3eImpact

--mute #a3a39aMetadata

Anton carries the display specimens because its compressed vertical force feels engineered. Archivo provides the UI, body copy and Oszilla's real 100–900 weight table. Space Mono handles labels, readouts, prices, coordinates and the type-crime ticker. Everything is self-hosted from /assets/fonts/.

Reproduce this

Prompt an AI agent like this: "Build a one-page site for a fictional type foundry whose specimens move. Use stark Swiss brutalism: near-black, off-white, one acid accent, hairline measuring grids and dense mono metadata. Write a kinetic type engine that splits headlines into character spans; in one rAF loop, map smoothed scroll velocity to scaleY, lift and tracking spread; on hover/focus, scatter glyphs to seeded transforms and spring them back. Add full-bleed opposing text-stroke marquees, a live input playground with a force slider, and a type-crime ticker. Respect reduced motion, pause hidden/off-screen animation and use only transform/opacity." Then push the art direction: asymmetry over centered safety, one violent accent over polite balance, and copy with enough invented numbers to feel like a real foundry catalogue.