Audit-first skill for elevating an existing website or web app with 3D and cinematic motion — Three.js / React Three Fiber for the scene, GSAP ScrollTrigger for scroll-driven choreography, and Motion / React Spring for UI and physics. Works with any web stack (Next.js, Vite, Astro, Remix, vanilla) and any styling system. Use when the user asks to "add 3D", "add a WebGL hero", "make it cinematic", "scroll-driven 3D", "three.js scene", "React Three Fiber", "GSAP scroll animation", "product configurator", "make the landing page feel immersive", "add a 3D model viewer", "parallax / pinned scroll storytelling", or wants to add a "wow factor" / hero effect to a real, existing repo. Scans the codebase, picks the right library combination, and ships the effect with performance budgets, mobile + no-WebGL fallbacks, reduced-motion support, and SSR/hydration safety baked in — no rewrites, no broken builds, no janky scroll.
Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI
Supported by the Atlas install prompt. Skill-specific requirements vary.
Skill stats
Skills1CategoryScience & researchStars0
About this skill
Audit-first skill for elevating an existing website or web app with 3D and cinematic motion — Three.js / React Three Fiber for the scene, GSAP ScrollTrigger for scroll-driven choreography, and Motion / React Spring for UI and physics. Works with any web stack (Next.js, Vite, Astro, Remix, vanilla) and any styling system. Use when the user asks to "add 3D", "add a WebGL hero", "make it cinematic", "scroll-driven 3D", "three.js scene", "React Three Fiber", "GSAP scroll animation", "product configurator", "make the landing page feel immersive", "add a 3D model viewer", "parallax / pinned scroll storytelling", or wants to add a "wow factor" / hero effect to a real, existing repo. Scans the codebase, picks the right library combination, and ships the effect with performance budgets, mobile + no-WebGL fallbacks, reduced-motion support, and SSR/hydration safety baked in — no rewrites, no broken builds, no janky scroll.
Quick start
Copy the install prompt. Use the green button above this README.
Send it to your agent. Paste it into your coding agent’s chat and send.
Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
Audit-first skill for elevating an existing website or web app with 3D and cinematic motion — Three.js / React Three Fiber for the scene, GSAP ScrollTrigger for scroll-driven choreography, and Motion / React Spring for UI and physics. Works with any web stack (Next.js, Vite, Astro, Remix, vanilla) and any styling system. Use when the user asks to "add 3D", "add a WebGL hero", "make it cinematic", "scroll-driven 3D", "three.js scene", "React Three Fiber", "GSAP scroll animation", "product configurator", "make the landing page feel immersive", "add a 3D model viewer", "parallax / pinned scroll storytelling", or wants to add a "wow factor" / hero effect to a real, existing repo. Scans the codebase, picks the right library combination, and ships the effect with performance budgets, mobile + no-WebGL fallbacks, reduced-motion support, and SSR/hydration safety baked in — no rewrites, no broken builds, no janky scroll.
About this listing
Category
Science & research
Reported license
MIT
Listing language (estimated)
English
Review status
Not individually reviewed
Agent compatibility
Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLI