skills.rest
ms-moar
ms-moarCOMMUNITY
Explore all skills by this author →
GitHub

glb-animator

Animate GLB and GLTF models into scroll-driven timelines for React Three Fiber and Theatre.js.

Updated Feb 24, 2026
Search Tags:#scaffold#react-three-fiber#r3f#gltf#scroll-animation#glb#theatrejs
One-click install
npx skills add https://github.com/ms-moar/ccc-media --skill glb-animator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: glb-animator
Source: https://github.com/ms-moar/ccc-media/tree/main/ailabspro/files/extracted/v38-car-landing-page/car-landing-page/.agent/skills/glb-animator
Command: npx skills add https://github.com/ms-moar/ccc-media --skill glb-animator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

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.

Frequently Asked Questions about glb-animator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I bind a GLB 3D model animation to scroll position in React?▼

To bind GLB animations to scroll in React, map scroll.offset to a Theatre.js sheet.sequence.position within a React Three Fiber Canvas, creating scroll-bound timelines that trigger as the user scrolls the page.

What's the best way to set up a React Three Fiber and Theatre.js scene for a GLTF model?▼

Setting up a React Three Fiber and Theatre.js scene for GLTF models is easiest with a scaffold script that generates the Scene and Canvas components, mapping scroll offsets to the Theatre timeline automatically.

Can I animate specific meshes inside a GLB file with Theatre.js?▼

You can animate specific meshes inside a GLB file by inspecting the model with gltfjsx and wrapping the target nodes with editable Theatre.js components for precise, prompt-directed scene animation.

Do I need to install three and @react-three/drei to use scroll-bound GLB animations?▼

Yes, you need to install three, @react-three/fiber, @react-three/drei, @theatre/core, and @theatre/r3f to support scroll-bound GLB animations in React and Next.js applications.

How do I polish lighting and camera movements for a 3D scroll landing page?▼

Polish lighting, camera, DOF, and shadow tuning for a 3D scroll landing page by following a production checklist, applying easing choices and performance recommendations to reach final-quality scene animation.

Related Skills

Explore More Software Engineering Skills→
EnzeDEnzeD
108

r3f-interaction

Standardize pointer events, selection, and camera controls in React Three Fiber scenes.

Community
Advanced
DSalischikerDSalischiker

r3f-lighting

Configure lighting in React Three Fiber scenes with light types, shadows, and environment helpers.

Community
Advanced
yogaprasetya22yogaprasetya22

react-three-fiber

Convert json-render 3D scene specifications into React Three Fiber components.

Community
Intermediate
RaheesAhmedRaheesAhmed
66

3d-web-experience

Coordinates WebGL tools to build interactive 3D scenes for web projects.

Community
Advanced