Gestalt
A kinetic typography typewriter — letters built from geometric shapes orbiting on spokes. Pure rotation animation with real-time auto-sizing and depth blur.
Year: 2026
Roles: Creative Technologist & Designer
Gestalt, 2026
A kinetic typographic typewriter where every letter is composed of geometric shapes — circles, rectangles, and paths — orbiting on fixed-length spokes from anchor hubs arranged in a ring around each letter center.
How It Works
Each letterform is parsed from an SVG component into individual shapes. These shapes are connected to hub anchors via spokes of fixed length. As you type, spokes rotate from a parked position to their active configuration, carrying shapes into place to form the letter. Three properties animate per spoke: rotation angle, self-rotation, and alpha (for ink fade transitions).
Features
- 26 letter SVGs — each parsed into geometric primitives with ink/mask layering
- Auto-sizing — text automatically shrinks to fit the canvas as you type longer words
- Depth blur — completed lines blur progressively as they scroll upward, creating a depth-of-field effect
- Kerning control — adjustable letter spacing via on-canvas slider
- Playback mode — replay typed sequences with adjustable speed (slow/normal/fast)
- Multi-line composition — press Enter to commit lines; lines stack and shrink as they scroll up
Technical Notes
Built with p5.js using instance mode. The hub/spoke system uses a snap-lerp animation (linear interpolation with threshold snapping) for smooth transitions. Layer ordering ensures masks punch holes correctly through ink shapes. Custom paths are supported via the Designer page (alpha).