immersive-visuals-router_skill

Overview

This skill is a master router for building immersive visual experiences that combine React Three Fiber, shaders, particles, post-processing, GSAP animation, and audio. It analyzes a project request, classifies core domains, and dispatches to one or more specialized domain routers. The router is optimized to combine 3–4 domains by default to deliver rich, interactive 3D web experiences. Use it to coordinate complementary technologies and load targeted skills for each domain.

How this skill works

The router first classifies the user request using signal keywords to determine primary and secondary domains. It then routes the request to the appropriate domain routers (r3f, shaders, particles, postfx, gsap, audio) and suggests domain combinations commonly used together. Each domain router loads specific skills and returns focused guidance or snippets, while the master router ensures dependencies and performance considerations are respected. For unclear input it prompts for core project requirements before routing.

When to use it

• Building a 3D web scene, product showcase, or interactive hero with React Three Fiber
• Creating audio-reactive visualizers or music-driven installations
• Designing generative art or shader-driven visuals requiring GLSL
• Implementing particle-heavy effects with GPU instancing or physics
• Adding cinematic post-processing (bloom, DOF, chromatic aberration)
• Coordinating sequenced animations and interactions with GSAP

Best practices

• Pick one primary domain that represents the main technical challenge, then add 1–3 supporting domains
• Limit post-processing passes and shader complexity to control GPU cost
• Use GPU instancing and LOD for particle-heavy scenes (10k–50k suggested with instancing)
• Keep audio FFT sizes moderate (128–256) for responsive reactive visuals
• Profile and cull unused objects in R3F (frustum culling, LOD) and kill unused GSAP tweens

Example use cases

• Music visualizer: audio analysis → r3f scene → audio-reactive shaders → beat-triggered particles → postfx bloom
• Landing page hero: R3F background scene → subtle post-processing → GSAP text and scroll animations
• Generative art piece: shader-first pipeline with R3F render and postfx chain for polish
• Interactive installation: R3F environment with particle feedback, GSAP transitions, and spatial audio
• Countdown event: GSAP sequenced digits, R3F digits and camera, postfx glow, particles and audio cues