Interactive poster systems
Controlled Chaos Poster Lab
Three.js · Generative typography · Audio-reactive design
An interactive 9:16 poster instrument — seven visual systems, seeded chaos, audio-reactive displacement, and shareable creations — built as a reusable experience package for the Thrundesign portfolio.
Authored control, seeded chaos
Controlled Chaos is a vertical poster lab: change a phrase, pick a visual system, and let seeded motion rewrite the composition. The same @thrun-design/controlled-chaos package powers the case-study preview, fullscreen lab, and shared creation replay — without putting Three.js on the homepage.
Seven visual systems
Particle disintegration, chrome liquid, CRT / photocopy, inflatable and elastic type (Rapier), torn paper collage, and type architecture. Each system ships curated presets, quality budgets, and reduced-motion fallbacks. Audio routing can drive displacement and post stacks across every active system.
How the instrument is built
- 01
Experience package
Renderer, state, systems, audio, and export live in packages/controlled-chaos with a stable public export map (manifest, schemas, react, preview, replay, persistence).
- 02
Serializable creations
PosterCreationV1 captures phrase, system, palette, seed, and audio routing. Visitors download PNG and creation JSON locally — audio bytes never leave the browser.
- 03
Case study embed
The case study offers a poster-backed preview with interaction load. Full editing stays in /lab/controlled-chaos; existing shared pages hydrate via /creation/[id].
- Visual systems
- 7
- Curated presets
- 21
- Poster frame
- 9:16
Particles through architecture
Across all active systems
Shareable stills and loops
Credits
- Design & engineering
- Thrun Design Co.
- Stack
- Next.js · Three.js · R3F · Rapier