Arc 9 · Kinetic & Organic

Kinetic reveal

Four canvas-per-character animations between Pretext-derived positions. Morph tweens between two wrap widths. Wave runs a sine displacement across character indices. Pour cascades characters in. Typewriter reveals one at a time. Each effect is a loop over per-character transforms; Pretext provides the layout both animations start and end from.

Mechanism

At mount we compute per-character x/y positions for the line at two candidate widths (narrow / wide). Each effect animates between some start state and some end state using those positions:

Morph: interpolate each character's position from layout-A to layout-B over time.
Wave: start from layout-A, add per-frame sine offset indexed by character.
Pour: layout-A positions, each character starts above with opacity 0, falls into place with elastic easing and staggered delay.
Typewriter: layout-A positions, characters revealed sequentially.

Application

Calm kinetic typography for landing pages. Message arrivals that feel like breath. Headlines that reveal rather than assert. Text that responds to attention — the page alive under the reader.

"Simplify, simplify."

Henry David Thoreau, Walden (1854)

Direct Claude

"reveal on entrance" → pour with staggered character delays and elastic easing "living text" → sine displacement indexed by character, continuous loop "morph between layouts" → two Pretext layouts, lerp per-character positions "one character at a time" → typewriter with optional cursor blink

Inspired by Pablo Stanley's typexperiments kinetic typography engine.