immersive-visuals-router
Master router for immersive visual experiences combining React Three Fiber, shaders, particles, post-processing, GSAP animation, and audio. Use when building 3D web experiences, visualizers, creative coding projects, interactive installations, or any project requiring multiple visual technologies. Dispatches to 6 specialized domain routers covering 29 total skills.
- Installs
- 76
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill immersive-visuals-router- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads immersive-visuals-router automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
FAQ
What does the immersive-visuals-router skill do?
Master router for immersive visual experiences combining React Three Fiber, shaders, particles, post-processing, GSAP animation, and audio. Use when building 3D web experiences, visualizers, creative coding projects, interactive installations, or any project requiring multiple visual technologies. Dispatches to 6 specialized domain routers covering 29 total skills.
How do I install immersive-visuals-router?
Run npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill immersive-visuals-router in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/immersive-visuals-router/ (personal) or .claude/skills/immersive-visuals-router/ (project).
Which AI agents can use immersive-visuals-router?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is immersive-visuals-router safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains immersive-visuals-router?
It is published by bbeierle12 in bbeierle12/skill-mcp-claude. It has 76 recorded installs.
More from bbeierle12/skill-mcp-claude
gsap-react
bbeierle12/skill-mcp-claude
GSAP integration with React including useGSAP hook, ref handling, cleanup patterns, and context management. Use when implementing GSAP animations in React components, handling component lifecycle, or building reusable animation hooks.
gsap-scrolltrigger
bbeierle12/skill-mcp-claude
Scroll-based animations using GSAP ScrollTrigger plugin including pinning, scrubbing, snap points, and parallax effects. Use when creating scroll-driven animations, sticky sections, progress indicators, or parallax scrolling experiences.
gsap-fundamentals
bbeierle12/skill-mcp-claude
Open the skill to read its SKILL.md instructions.
shader-effects
bbeierle12/skill-mcp-claude
Visual shader effects—glow/bloom, chromatic aberration, distortion, vignette, film grain, scanlines, glitch, dissolve, outline, and fresnel. Use when adding visual polish, post-processing effects, or stylized rendering to shaders.
d3js-visualization
bbeierle12/skill-mcp-claude
Open the skill to read its SKILL.md instructions.
shader-fundamentals
bbeierle12/skill-mcp-claude
Open the skill to read its SKILL.md instructions.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image