MOTION / TypeScript · DOM transforms · Intl.Segmenter

Kinetic Typography Lab

Study moving glyphs, spatial distortion and responsive letterforms in an editorial type field.

LIVE SURFACE / 01

Set type in motion. Keep the word whole.

STUDIO / KINETIC-TYPOGRAPHY

The canvas is ready
when you are.

Nothing runs in the background. Open the preview to start the experiment.

CONTROL SURFACE / 09

Parameters

Wave amplitude, frequency and speed shape the traveling field. Pointer radius and amplitude shape local distortion; focus the stage and use arrows, with Home to center. Proportional width is a geometric CSS scale, not a font axis. Running parameter edits apply immediately; edits while paused wait for Resume or Restart. Pause freezes motion and readouts, focus changes preserve the virtual cursor, and Restart resets time and cursor.

Motion model

Choose the active typographic study.

Text content

Plain text; grapheme clusters stay intact. Limited to 48 characters.

Motion intensity

Wave travel in pixels; pointer deformation strength in normalized space.

Frequency

Wave cycles across the line.

Wave speed

Travel rate in radians per second.

Wave phase

Phase offset in radians for every glyph in the traveling field.

Interaction radius

Pointer influence radius relative to the typography region.

Proportional width

Geometric horizontal scaling. This is not a variable-font axis.

Reduce motionUse stable positions while retaining manual pointer interaction.

One preview frame at a time · no camera, microphone, storage, or external demo URLs.

FIELD NOTES / KINETIC TYPE

A letter is a shape with a place in time.

Glyph segmentation

The DOM renderer wraps Unicode grapheme clusters, not UTF-16 code units or code points. Intl.Segmenter keeps combining sequences, flags and joined emoji intact in supported browsers; a conservative fallback handles marks and emoji modifiers. The visual spans are hidden from assistive technology and one intact text node is exposed.

Traveling wave and phase

For normalized glyph position u, the vertical offset is A·sin(2πfu − vt + φ). Each glyph has a different spatial phase, so the line travels as a field instead of repeating one shared CSS keyframe. Delta is derived from the animation timestamp, and the frame loop runs only for an active wave.

Map interaction to the stage

Pointer x/y are normalized against the stage rectangle, then each glyph center is normalized against the same rectangle. A smoothstep falloff clamps influence to the selected radius; displacement and rotation are bounded. The virtual cursor holds its last point when the pointer leaves the frame, so moving to a playback control does not change the pose. Arrow keys move the same virtual cursor and Home centers it. Touch-action preserves vertical page panning, and pointer cancellation clears the influence.

Variable axes and honest alternatives

No variable-font asset is included or licensed in this lab, and system UI fonts vary by platform. The proportional specimen therefore demonstrates CSS geometric horizontal scaling, not a genuine OpenType width axis. It cannot reproduce a variable font’s designed intermediate shapes or preserve natural proportions.

DOM versus SVG or Canvas

DOM spans preserve native shaping at grapheme boundaries, selectable source text through the accessible equivalent, and simple per-glyph transforms. SVG text offers explicit coordinate systems but shaping and hit testing need care; Canvas gives draw control but no native selection or semantic text. This demo favors moderate line lengths and readable HTML.

Performance and limits

Wave frames write transforms only and perform no geometry reads. Pointer glyph centers are measured together from the untransformed layout when text, width, model or size changes, then cached; each pointer update reads only the stage bounds. Transform writes use that stable base geometry, avoiding per-glyph forced layouts and accumulated drift. The 48-grapheme limit bounds this work. Longer paragraphs, many simultaneous lines or complex shaping need profiling and likely another renderer.

Reduced motion and use

The reduced-motion setting removes continuous wave animation and leaves the text in a stable pose; pointer distortion remains manually manipulable as a spatial study. Motion values are not silently overridden. Pause freezes pointer and keyboard input plus the readout; focus changes preserve the cursor, paused parameter edits apply on Resume or Restart, Resume preserves cursor and phase, and Restart returns to a neutral cursor and time. Suitable uses include short editorial titles, kinetic posters and exploratory type studies, never essential long-form reading.

Font source and license

The preview uses the platform’s system UI sans-serif stack and ships no font binary. Those fonts are supplied by the operating system and are not redistributed by this repository. Original demo code is MIT licensed; font appearance can differ by platform.

SOURCE / LICENSE

Original implementation · MIT · no external assets

View source