Imported from anandacdr/Claude-CODE (
3d-animated-website/SKILL.md). Install upstream withnpx skills add anandacdr/Claude-CODE --skill 3d-animated-website. Copyright stays with the author.
3D Animated Website Skill
Expert guidance for building immersive, performant 3D and animated websites.
Module Index
Load the relevant module based on the user's task:
| Task | Module |
|---|---|
| 3D scene, models, lighting, camera | three-r3f.md |
| Scroll animations, timelines, triggers | gsap-scroll.md |
| GLSL vertex/fragment shaders | shaders.md |
| CSS 3D, tilt, flip, perspective | css-3d.md |
| Performance, compression, asset pipeline | performance.md |
Stack at a Glance
3D Rendering
| Library | Use When |
|---|---|
| Three.js | General 3D scenes, models, particles, shaders |
| React Three Fiber (R3F) | Three.js in React with declarative syntax |
| Drei | R3F helpers (loaders, controls, effects) |
| Spline | No-code 3D design, embed via @splinetool/react-spline |
Animation
| Library | Use When |
|---|---|
| GSAP + ScrollTrigger | Timeline animations, scroll-driven, morphing |
| Framer Motion | React component transitions, layout animations |
| Lenis | Smooth scroll with custom easing |
Recommended npm packages
{
"three": "^0.169",
"@react-three/fiber": "^8",
"@react-three/drei": "^9",
"@react-three/postprocessing": "^2",
"gsap": "^3",
"@gsap/react": "^2",
"lenis": "^1",
"framer-motion": "^11"
}Project Scaffold
src/
components/
canvas/ # Three.js / R3F components
ui/ # HTML overlay (nav, text, buttons)
shaders/ # .vert / .frag files
hooks/ # useScrollProgress, useTilt, etc.
assets/
models/ # .glb files
textures/ # .ktx2, .webp