teamai-test/.teamai/skills/common/web-design-engineer/references/style-recipes/active-theory.md

active-theory — Active Theory (Cinematic WebGL)

• School: Motion / Experimental
• Vibe: Cinematic web experiences, WebGL heroes, physical-feeling interaction
• Best for: Brand launch sites, game / entertainment products, "experience marketing" pieces
• Touchstone: activetheory.net, NASA / Apple WWDC dev portals they've made, Doritos / movie tie-in launches

Palette

• Often a single dramatic hue from the project's content — black + one signature color from the brand or film
• High contrast — deep black + bright accent
• Tinted neutrals — never plain gray; gray-with-cast (cool blue cast for sci-fi, warm amber for cinematic)

Typography

• Display: a strong grotesque or a custom display face built for the campaign — Druk, Editorial New, ABC Diatype Mono
• Body type secondary — most content rides over imagery; less reading, more witnessing
• All-caps display common, with very tight or very open tracking depending on tone

Spacing: cinematic — content sits centered or in unexpected corners against a full-bleed canvas

Radius: 0

Shadow: from WebGL lighting, not CSS

Motion: feature-film-grade. Camera moves through a 3D space. Physics-driven debris / particles. The page is a stage.

Signature moves

• A full-screen WebGL hero scene that the user moves through (scroll = camera path)
• Real-time physics or particle systems responding to cursor / device tilt
• Carefully art-directed transitions between scenes (not generic fades)
• Sound design integrated (subtle ambient audio that ducks during text passages)
• A single moment of maximum impact — the recipe builds toward one payoff frame

Avoid

• Many small WebGL moments (one big set-piece is the recipe, not five small ones)
• Trying to ship a content-heavy site this way (cinematic recipes work for marketing moments, not docs)
• Reaching for off-the-shelf Three.js demos (this recipe demands hand-crafted scenes — generic WebGL reads as cheap)

AI prompt seed

Cinematic VFX still, single dramatic moment from a sci-fi launch film, key light from one direction, deep shadows, single brand-accent hue floating in the scene, particle debris in air, 2.39:1 aspect.

Don't use when

• Performance / accessibility constraints rule out heavy WebGL
• The product is utilitarian (this recipe is for moments, not for daily use)
• The build budget is sub-3-weeks

---

Same school — Motion / Experimental: field-io · resn-storytelling
Browse all 25 recipes: INDEX.md