threejs-procedural-animation

Installation
SKILL.md

Procedural Animation

Animate semantic state, not unrelated transform curves. Define phases, coordinate frames, velocities, and ownership before writing per-frame updates.

Build order

  1. Define the timeline phases and event boundaries.
  2. Choose the frame for each motion: world, subject local, orbital radial, docking axis, or camera shot.
  3. Derive target position/orientation from that frame.
  4. Use analytic kinematics for authored travel and springs for responsive convergence.
  5. Preserve world transforms when detaching children from a hierarchy.
  6. Separate translation, alignment, spin, and secondary debris state.
  7. Clamp integration delta and reset every state variable on replay/disposal.
Installs
47
GitHub Stars
789
First Seen
Jun 22, 2026
threejs-procedural-animation — scottstts/threejs-awesome-graphics-agent-skills