glb-animator

What problem does it solve?

Developers and designers need a reliable, production-minded way to turn GLB/GLTF 3D models into smooth, prompt-directed animations that are tightly bound to page scroll and integrated into React/Next.js apps. This Skill removes repetitive setup, wiring, and tuning work by providing scaffolding, recommended patterns, and a checklist to reach production polish.

Core Features & Use Cases

• Scaffold scene and canvas components: generates React Three Fiber + Theatre.js components and a page entry so teams can start animating immediately.
• Scroll-bound timelines: maps scroll.offset to Theatre sheet.sequence.position to create multi-page hero animations and interactive landing sections.
• GLB inspection and targeted animation: recommends using gltfjsx and wrapping nodes with editable theatre components to animate specific meshes or groups.
• Production polish checklist: lighting, camera, DOF, shadow tuning, easing choices, and performance recommendations for a final-quality result.
• Use Case: building a car-landing hero where camera moves, part highlights, and animation beats trigger as the user scrolls through three sections.

Quick Start

Scaffold a scroll-bound R3F and Theatre.js scene for the model at /models/car.glb into app/three and wire scroll to the Theatre timeline.