Interactive / Typespace
Interactive · Generative 3D Typography · Web Audio

Typespace: Words forming 3D constellations

Typed keystrokes coalesce into an ethereal 3D celestial constellation, hovering in three dimensions before slowly dissolving back into the cosmos. No generative AI — just your words, procedural geometry, and harmonic sound.

Role
Creative Direction & 3D Engine
Stack
Next.js · r3f · GLSL · Web Audio
Input
Keystrokes, Orbit Controls
Year
2025 – 2026
Typespace generative typographic constellation forming in Three.js and orbiting in real-time
0
AI prompts needed — pure human touch to procedural form
3D
Full spatial orbital controls over typographic letterforms
100%
Algorithmic harmonic audio synthesized on each keystroke
<2s
Time to interactive for complex WebGL/GLSL shaders
01

Liberating typography from the 2D grid.

Type has lived on flat pages and bounded screens for six centuries. Typespace treats letters as physical astronomical nodes linked by gravitational lines, turning reading into spatial contemplation.

02

Procedural sound synthesis.

Rather than playing canned audio samples, each keystroke calculates an overtone series through Web Audio oscillators, matching the character's ASCII frequency and camera velocity to create an evolving ambient drone.

03

The beauty of impermanence.

Modern feeds hoard messages eternally. Typespace lets words burn brightly, drift gracefully across the camera plane, and slowly evaporate into star particles, reflecting the transient nature of spoken human thought.

Context & Pedagogy

My Contribution

  • Created overall concept, creative direction, and spatial typography hierarchy
  • Engineered 3D particle mesh and GLSL custom shaders in React Three Fiber
  • Synthesized realtime audio nodes using native Web Audio API

Pedagogical Heritage

  • Emerged from research into dynamic typography at School of Visual Arts (SVA) NYC
  • Explores non-utilitarian, purely experiential software craftsmanship