threejs-procedural-animation

Name: threejs-procedural-animation
Author: scottstts

377stars47forks

How to install threejs-procedural-animation?

scottstts/threejs-awesome-graphics-agent-skills/threejs-procedural-animation

$npx -y skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-animation

Installs into the current project.

Summary

Build advanced procedural animation in Three.js. Use for launch kinematics, gravity turns, staging, spin docking, target-frame decomposition, spring-follow motion, rotating-frame alignment, peeling debris, analytic transform timelines, frame-rate-independent response, and quatern

Files · 1

View on GitHub

SKILL.md

1	# Procedural Animation
2
3	Animate semantic state, not unrelated transform curves. Define phases,
4	coordinate frames, velocities, and ownership before writing per-frame updates.
5
6	## Build order
7
8	1. Define the timeline phases and event boundaries.
9	2. Choose the frame for each motion: world, subject local, orbital radial,
10	docking axis, or camera shot.
11	3. Derive target position/orientation from that frame.
12	4. Use analytic kinematics for authored travel and springs for responsive
13	convergence.
14	5. Preserve world transforms when detaching children from a hierarchy.
15	6. Separate translation, alignment, spin, and secondary debris state.
16	7. Clamp integration delta and reset every state variable on replay/disposal.
17
18	Read [references/procedural-motion-and-docking-systems.md](references/procedural-motion-and-docking-systems.md)
19	for the launch, staging, docking, debris, spring, quaternion, and
20	frame-rate-independent response implementations.
21
22	## Non-negotiable rules
23
24	- Use elapsed seconds and `deltaSeconds`; do not make motion frame-count based.
25	- Derive orientation from direction/frame, then apply roll or spin as a
26	separate quaternion.
27	- Decompose docking error into axial and radial components.
28	- Switch from spring convergence to an exact terminal pose at the end of a
29	sequence.
30	- When reparenting an animated object, capture world position, quaternion, and
31	scale before removal.
32	- Use seeded randomness when motion must be reproducible.
33	- Keep visual shake in a bounded envelope and separate it from trajectory.
34
35	## Routing boundary
36
37	Use `$threejs-camera-direction` for shot composition and camera handoffs.
38	Use `$threejs-procedural-vfx` when the deliverable is primarily plasma, sparks,
39	or effect pooling rather than object transform motion.

People who liked this also viewed

6 picks

Type

threejs-procedural-animation

377stars47forks

View on GitHub

How to install threejs-procedural-animation?

scottstts/threejs-awesome-graphics-agent-skills/threejs-procedural-animation

$npx -y skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-animation

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Procedural Animation
2
3	Animate semantic state, not unrelated transform curves. Define phases,
4	coordinate frames, velocities, and ownership before writing per-frame updates.
5
6	## Build order
7
8	1. Define the timeline phases and event boundaries.
9	2. Choose the frame for each motion: world, subject local, orbital radial,
10	docking axis, or camera shot.
11	3. Derive target position/orientation from that frame.
12	4. Use analytic kinematics for authored travel and springs for responsive
13	convergence.
14	5. Preserve world transforms when detaching children from a hierarchy.
15	6. Separate translation, alignment, spin, and secondary debris state.
16	7. Clamp integration delta and reset every state variable on replay/disposal.
17
18	Read [references/procedural-motion-and-docking-systems.md](references/procedural-motion-and-docking-systems.md)
19	for the launch, staging, docking, debris, spring, quaternion, and
20	frame-rate-independent response implementations.
21
22	## Non-negotiable rules
23
24	- Use elapsed seconds and `deltaSeconds`; do not make motion frame-count based.
25	- Derive orientation from direction/frame, then apply roll or spin as a
26	separate quaternion.
27	- Decompose docking error into axial and radial components.
28	- Switch from spring convergence to an exact terminal pose at the end of a
29	sequence.
30	- When reparenting an animated object, capture world position, quaternion, and
31	scale before removal.
32	- Use seeded randomness when motion must be reproducible.
33	- Keep visual shake in a bounded envelope and separate it from trajectory.
34
35	## Routing boundary
36
37	Use `$threejs-camera-direction` for shot composition and camera handoffs.
38	Use `$threejs-procedural-vfx` when the deliverable is primarily plasma, sparks,
39	or effect pooling rather than object transform motion.

People who liked this also viewed

6 picks

Type