🎨 Creative Web Squad

Brutally creative web experiences — 3D, shaders, motion, kinetic type. Built from DNA extracted of lusion.co and oryzo.ai.

🎯 Purpose

Create premium, award-worthy websites that combine:

Vanilla Three.js + handwritten GLSL shaders
GSAP scroll choreography with pinned sequences
Kinetic typography via MSDF fonts in WebGL
Maximalist sci-fi editorial aesthetic
60fps performance on mid-tier mobile

This squad refuses templates, AI-slop gradients, and "safe" bootstrap layouts.

🧬 Squad Composition (12 agents)

Tier 0 — Diagnosis & Direction

Agent	Role
`site-deconstructor`	Extracts tech + visual DNA from reference URLs/files
`creative-director`	Sets vision, aesthetic rules, coherence guardrails

Tier 1 — Masters (mind clones)

Agent	Real Mind	Expertise
`bruno-simon`	Bruno Simon	Vanilla Three.js, interactive 3D portfolios, scene composition
`paul-henschel-drcmda`	Paul Henschel	React Three Fiber, Poimandres stack, declarative 3D
`yuri-artyukh`	Yuri Artyukh (Akella)	Shaders, GLSL, post-processing, creative coding
`olivier-larose-osmo`	Olivier Larose	GSAP ScrollTrigger, scroll choreography

Tier 2 — Specialists (mind clones)

Agent	Real Mind	Expertise
`matt-deslauriers`	Matt DesLauriers	canvas-sketch, generative art, creative algorithms
`cassie-evans`	Cassie Evans	SVG animation, kinetic type, GSAP demos
`george-francis`	George Francis	Generative design, parametric visuals

Functional Roles

Agent	Focus
`performance-engineer`	Bundle size, GPU profiling, Core Web Vitals
`accessibility-guardian`	WCAG 2.2 AA, reduced-motion, keyboard nav

Orchestrator

Agent	Role
`creative-web-chief`	Coordinates the squad, enforces quality gates

🚀 Quick Start

Activate the squad

@creative-web

@creative-web-chief

Build a new site

@creative-web-chief *new-site "sci-fi portfolio for AI startup"

Deconstruct a reference

@site-deconstructor *extract-dna <url-or-path>

Build a specific scene

@bruno-simon *build-scene "hero with floating product + scroll parallax"

Write a shader

@yuri-artyukh *write-shader "displacement with blue-noise dithering"

Compose scroll choreography

@olivier-larose-osmo *compose-scroll "pinned hero → text reveal → 3D transition"

📐 Tech Stack (locked)

yaml

bundler: Vite
language: TypeScript (strict)
3d: Three.js r158+
motion: GSAP 3.14+ (ScrollTrigger, SplitText, CustomEase)
scroll: Lenis (optional)
shaders: GLSL via glslify
type_in_3d: MSDF fonts

Alternative: React + React Three Fiber when team prioritizes maintainability.

✅ Quality Gates

Every deliverable passes through 4 blocking gates:

Creative Direction Gate — respects brand-dna.md, coherent motion language
Shader Gate — WebGL2 compiles, cold-compile < 400ms, mobile fallback
Performance Gate — LCP < 2.5s, 60fps mid-tier mobile, < 350KB gzip initial
Accessibility Gate — WCAG 2.2 AA, reduced-motion, keyboard nav

See config.yaml for full criteria.

📚 Key Documents

```
data/brand-dna.md
```
— the contract (aesthetic, tokens, patterns)
config.yaml — squad configuration, tiers, workflows
```
workflows/wf-create-site.yaml
```
— full pipeline
```
workflows/wf-deconstruct-reference.yaml
```
— DNA extraction
```
templates/
```
— scene, shader, motion, package boilerplates

🎨 Aesthetic North Star

"Maximalist Sci-Fi meets Editorial Brutalism"

Every project must feel:

Intentional (no default decisions)
Tactile (grain, noise, imperfection)
Confident (no safe fallbacks visible)
Alive (ambient motion when idle)
Fast (60fps is table stakes)

Generated from real DNA of lusion.co + oryzo.ai. Built by Squad Architect.

creative web