skills: adopt GSAP Layer 3 + Layer 2 animation-runtime routing
Mirror the official GSAP AI skills (greensock/gsap-skills, MIT) into .agents/skills/ and add the Layer 2 wiring that makes them discoverable from a fresh context. GSAP covers animation needs that Remotion primitives strain at: per-character text reveals (SplitText), SVG shape morphs (MorphSVG), curved camera paths (MotionPath), stroke-reveal line drawing (DrawSVG), layout-to-layout flight (Flip), and custom bezier easings (CustomEase). Also becomes mandatory day-1 knowledge if we wire in HyperFrames later (HF uses GSAP timelines as its native animation runtime). Layer 3 adds (.agents/skills/): - gsap-core, gsap-timeline, gsap-plugins, gsap-utils - gsap-react, gsap-performance - gsap-scrolltrigger, gsap-frameworks (situational) - gsap/README.md — OpenMontage-specific framing and Remotion-safe usage Layer 2 wiring (the discovery triggers): - skills/meta/animation-runtime-selector.md — NEW routing meta-skill. Decision matrix covering Remotion primitives, GSAP plugins, framer- motion, Lottie, Manim, D3, TerminalScene. Enforces the "keep it simple" bias: reach for GSAP only when the plugin genuinely earns its bundle weight. - skills/pipelines/explainer/asset-director.md — references GSAP for kinetic typography, multi-step choreography, SVG line draws. - skills/pipelines/animation/asset-director.md — references GSAP for logo morphs, motion paths, FLIP transitions, custom easings. - skills/pipelines/cinematic/asset-director.md — references GSAP for cinematic camera moves, per-char title reveals, prestige easings. - AGENT_GUIDE.md — adds a categorized Layer 3 skills table so a fresh- context agent can find the right skill by what they're trying to do, plus a pointer to animation-runtime-selector.md for routing. Determinism: every GSAP use inside Remotion must drive timeline progress from useCurrentFrame(), never requestAnimationFrame. Three Remotion-safe patterns are documented in both the gsap/README and the selector skill. Attribution: https://github.com/greensock/gsap-skills (MIT).
This commit is contained in:
@@ -4,6 +4,27 @@
|
||||
|
||||
This stage prepares the actual animated ingredients: narration, diagrams, math renders, motion backgrounds, code visuals, and reusable type or layout systems.
|
||||
|
||||
## Animation authoring — which runtime
|
||||
|
||||
Before authoring motion-graphics components, read **`skills/meta/animation-runtime-selector.md`** for runtime routing. Animation is the pipeline most likely to justify GSAP plugins — logo morphs, curved camera paths, kinetic type, FLIP transitions.
|
||||
|
||||
Quick routing for common animation-pipeline needs:
|
||||
|
||||
| Motion type | Recommended approach |
|
||||
|---|---|
|
||||
| SVG logo morph between two shapes | GSAP MorphSVG — read `.agents/skills/gsap-plugins/SKILL.md` |
|
||||
| Line drawing / stroke reveal on SVG | GSAP DrawSVG — read `.agents/skills/gsap-plugins/SKILL.md` |
|
||||
| Object following a curved path | GSAP MotionPath — read `.agents/skills/gsap-plugins/SKILL.md` |
|
||||
| Per-character / per-word title reveals | GSAP SplitText — read `.agents/skills/gsap-plugins/SKILL.md` |
|
||||
| Custom bezier or elastic easing | GSAP CustomEase — read `.agents/skills/gsap-plugins/SKILL.md` |
|
||||
| Layout-to-layout element flight (FLIP) | GSAP Flip — read `.agents/skills/gsap-plugins/SKILL.md` |
|
||||
| Multi-step sequence across many elements | GSAP timeline — read `.agents/skills/gsap-timeline/SKILL.md` |
|
||||
| Particle overlay / background motion | Remotion `ParticleOverlay` component (already exists) |
|
||||
| Mathematical animation (graphs, equations) | Manim — read `.agents/skills/manim-composer`, `.agents/skills/manimce-best-practices` |
|
||||
| Ghibli / anime-style still-driven scene | Remotion `AnimeScene` component + FLUX image gen |
|
||||
|
||||
**Remotion determinism rule:** every GSAP use inside a Remotion component must drive timeline progress from `useCurrentFrame()` — never `requestAnimationFrame`. Pattern examples in `.agents/skills/gsap-react/SKILL.md`.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
| Layer | Resource | Purpose |
|
||||
|
||||
Reference in New Issue
Block a user