Immersive Visuals Router
Master router dispatching to 6 domain routers for comprehensive visual experiences.
Routing Protocol
- Classify — Identify primary domains from user request
- Route to Domain — Select appropriate domain router(s)
- Combine Domains — Most projects need 3-4 domains together
- Load Skills — Domain routers will load specific skills
Domain Overview
| Domain | Router | Skills | Focus |
|--------|--------|--------|-------|
| 3D Rendering | r3f-router | 6 | React Three Fiber, scenes, materials, camera |
| Shaders | shaders-router | 5 | GLSL, custom materials, visual effects |
| Particles | particles-router | 4 | Particle systems, physics, GPU optimization |
| Post-Processing | postfx-router | 3 | Bloom, effects, EffectComposer |
| Animation | gsap-router | 4 | GSAP tweens, timelines, scroll, React |
| Audio | audio-router | 3 | Playback, analysis, audio-reactive |
Total: 6 routers, 25 specialized skills
Quick Route by Project Type
3D Scene (R3F Focus)
Primary: r3f-router → Scene setup, components, materials
Secondary: postfx-router → Bloom, cinematic effects
Optional: gsap-router → Camera animations
Audio Visualizer
Primary: audio-router → Playback, analysis, reactive
Secondary: r3f-router → 3D scene for visuals
Supporting: shaders-router → Custom visual effects
postfx-router → Bloom, glow
particles-router → Beat-reactive particles
Creative Coding / Generative Art
Primary: shaders-router → Custom fragment shaders
Secondary: r3f-router → Render pipeline
Supporting: postfx-router → Effects chain
Interactive Experience
Primary: r3f-router → 3D scene, interaction
Secondary: gsap-router → Smooth animations
Supporting: postfx-router → Visual polish
audio-router → Sound feedback
Countdown / Event Page
Primary: gsap-router → Sequenced animations
Secondary: r3f-router → 3D elements
Supporting: postfx-router → Dramatic effects
audio-router → Ambient, countdown audio
particles-router → Celebration effects
Particle-Heavy Effect
Primary: particles-router → Particle systems
Secondary: r3f-router → Scene setup
Supporting: postfx-router → Bloom for particles
shaders-router → Custom particle shaders
Signal-Based Routing
Domain Detection Signals
r3f-router (3D Rendering):
- "3D", "Three.js", "R3F", "React Three Fiber"
- "scene", "mesh", "geometry", "camera"
- "3D model", "GLTF", "environment"
- "orbit controls", "transform"
shaders-router (Custom Shaders):
- "shader", "GLSL", "fragment", "vertex"
- "custom material", "uniform"
- "procedural", "noise", "pattern"
- "ray marching", "SDF"
particles-router (Particle Systems):
- "particle", "emitter", "particle system"
- "dust", "sparks", "confetti", "stars"
- "instancing", "GPU particles"
postfx-router (Post-Processing):
- "bloom", "glow", "post-processing"
- "vignette", "chromatic aberration"
- "depth of field", "color grading"
- "EffectComposer"
gsap-router (Animation):
- "GSAP", "GreenSock", "animate"
- "timeline", "sequence", "tween"
- "scroll animation", "ScrollTrigger"
- "entrance animation"
audio-router (Audio):
- "audio", "music", "sound"
- "visualizer", "audio reactive"
- "beat", "frequency", "FFT"
- "Tone.js"
Domain Combinations
Cinematic 3D Scene
r3f-router → Scene, camera, lighting
shaders-router → Custom materials
postfx-router → Bloom, color grading, vignette
gsap-router → Camera movements
Music Visualizer
audio-router → Load music, analyze frequencies
r3f-router → 3D visualization geometry
shaders-router → Audio-reactive shaders
particles-router → Beat-triggered particles
postfx-router → Bloom, chromatic aberration
Landing Page Hero
r3f-router → Background 3D scene
gsap-router → Text animations, scroll effects
postfx-router → Subtle bloom, film grain
Interactive Installation
r3f-router → 3D environment
particles-router → Interaction feedback
gsap-router → Transition animations
audio-router → Sound feedback
postfx-router → Immersive effects
Product Showcase
r3f-router → 3D product model
gsap-router → Rotation, zoom animations
postfx-router → Lighting effects, environment
Temporal Collapse Stack
Complete domain routing for the New Year countdown:
┌─────────────────────────────────────────────────┐
│ TEMPORAL COLLAPSE PROJECT │
├─────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ r3f-router │ │gsap-router │ │
│ │ - Scene │ │ - Digit flip│ │
│ │ - Digits │ │ - Sequences │ │
│ │ - Camera │ │ - Countdown │ │
│ └──────┬──────┘ └──────┬──────┘ │
│ │ │ │
│ ┌──────┴────────────────┴──────┐ │
│ │ postfx-router │ │
│ │ - Bloom (cosmic glow) │ │
│ │ - Chromatic aberration │ │
│ │ - Vignette (void edge) │ │
│ └──────────────┬───────────────┘ │
│ │ │
│ ┌──────────────┴───────────────┐ │
│ │ particles-router │ │
│ │ - Time dilation particles │ │
│ │ - Star field │ │
│ │ - Celebration burst │ │
│ └──────────────┬───────────────┘ │
│ │ │
│ ┌──────────────┴───────────────┐ │
│ │ audio-router │ │
│ │ - Cosmic ambient loop │ │
│ │ - Countdown ticks │ │
│ │ - Beat-reactive visuals │ │
│ │ - Celebration music │ │
│ └──────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘
Domain Responsibilities
| Domain | Temporal Collapse Role | |--------|------------------------| | r3f | 3D countdown digits, camera orbit, environment | | shaders | Digit morphing effect, custom glow material | | particles | Time dilation particles, star field, celebration | | postfx | Bloom on digits, vignette, chromatic on beat | | gsap | Digit flip animation, intensity ramp, celebration | | audio | Ambient loop, ticks, beat detection, celebration |
Color Palette Reference
const TEMPORAL_PALETTE = {
void: '#050508', // Background
cyan: '#00F5FF', // Primary glow
magenta: '#FF00FF', // Accent
gold: '#FFD700', // Celebration highlight
white: '#FFFFFF' // Text, bright elements
};
Project Initialization Guide
Step 1: Identify Core Requirements
- What is the primary visual experience?
- Is there audio involvement?
- Does it need animation/interaction?
- What level of visual fidelity?
Step 2: Select Primary Domain
Choose the domain that represents the main technical challenge.
Step 3: Add Supporting Domains
Based on secondary requirements:
- Need glow effects? →
postfx-router - Need smooth animations? →
gsap-router - Need particles? →
particles-router - Need audio? →
audio-router - Need custom materials? →
shaders-router
Step 4: Load Domain Skills
Each domain router will direct to specific skills.
Performance Considerations
By Domain
| Domain | Performance Impact | Optimization | |--------|-------------------|--------------| | r3f | Medium-High | LOD, frustum culling | | shaders | Low-High* | Simplify math, reduce loops | | particles | High | GPU instancing, LOD | | postfx | Medium-High | Reduce passes, resolution | | gsap | Low | Kill unused tweens | | audio | Low | Appropriate FFT size |
*Depends on shader complexity
Recommended Limits
- Particles: 10,000-50,000 with instancing
- Post-processing passes: 3-5 max
- Shader uniforms: Keep minimal
- Audio FFT: 128-256 for reactive, 1024+ for visualization
Fallback Routing
- "3D" mentioned → Start with
r3f-router - "Visualizer" mentioned →
audio-router+r3f-router - "Animation" only →
gsap-router - "Effect" unclear →
postfx-router - No clear signals → Ask about project type
Skill Dependencies
r3f-router
├── Independent (can use alone)
└── Enhanced by: shaders, postfx, particles
shaders-router
├── Requires: r3f (for Three.js context)
└── Enhanced by: postfx
particles-router
├── Requires: r3f (for scene)
└── Enhanced by: postfx (bloom), shaders (custom)
postfx-router
├── Requires: r3f (for scene)
└── Enhanced by: shaders (custom effects)
gsap-router
├── Independent (can use alone)
└── Enhanced by: r3f (3D animation)
audio-router
├── Independent (can use alone)
└── Enhanced by: all domains for reactive visuals
Quick Reference Matrix
| Project Type | R3F | Shaders | Particles | PostFX | GSAP | Audio | |--------------|-----|---------|-----------|--------|------|-------| | 3D Scene | ● | ○ | ○ | ● | ○ | - | | Visualizer | ● | ● | ● | ● | - | ● | | Landing Page | ● | - | ○ | ● | ● | - | | Particle Effect | ● | ○ | ● | ● | - | - | | Countdown | ● | ○ | ● | ● | ● | ● | | Product 3D | ● | - | - | ● | ● | - | | Generative Art | ● | ● | ○ | ○ | - | - |
● Required ○ Optional - Not needed