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,23 @@
|
||||
|
||||
This stage prepares the usable media for the final cinematic edit: source selects, title-card assets, optional support inserts, music, ambience, and subtitle assets when needed.
|
||||
|
||||
## Animation authoring for cinematic titles and overlays
|
||||
|
||||
Before authoring title cards, name plates, or SVG overlays, read **`skills/meta/animation-runtime-selector.md`** for runtime routing. Cinematic pieces lean on a handful of high-craft motion patterns:
|
||||
|
||||
| Cinematic need | Recommended approach |
|
||||
|---|---|
|
||||
| Hero title with subtle reveal | Remotion `HeroTitle` component (existing) |
|
||||
| Logo build / cinematic sting on SVG | GSAP DrawSVG + MotionPath — read `.agents/skills/gsap-plugins/SKILL.md` |
|
||||
| Curved camera move across a wide still or overlay | GSAP MotionPath — read `.agents/skills/gsap-plugins/SKILL.md` |
|
||||
| Per-character title reveal (prestige / trailer style) | GSAP SplitText — read `.agents/skills/gsap-plugins/SKILL.md` |
|
||||
| Cinematic easings (Unreal-style, stuttering, weighted) | GSAP CustomEase / EasePack — read `.agents/skills/gsap-plugins/SKILL.md` |
|
||||
| Name plate lower-third with elastic settle | Remotion `spring()` is usually enough; GSAP CustomEase if you need stutter |
|
||||
| Film grain / particle overlay | Remotion `ParticleOverlay` (existing) |
|
||||
| Color grade / LUT | `tools/enhancement/color_grade.py` (not an animation concern) |
|
||||
|
||||
**Cinematic is where GSAP earns its weight most often** — the genre rewards crafted easings and precise curved motion that primitive `interpolate()` struggles to express cleanly. Don't over-use it either: for a fade-in title, Remotion `spring()` still beats a whole GSAP dependency.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
| Layer | Resource | Purpose |
|
||||
|
||||
Reference in New Issue
Block a user