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).
Make synthetic screen recording a first-class, discoverable capability
alongside real OS capture. For CLI / terminal / install-flow demos where
commands and output are predictable, author a `terminal_scene` cut instead
of driving a real screen recorder — deterministic, privacy-safe, pixel-
perfect, and frame-accurate to narration cues.
Components:
- TerminalScene.tsx: window chrome, char-by-char typing, blinking cursor,
scrolling output, non-blocking floating pills, spring-based reveals
- ProviderChip.tsx: rotating badge overlay that cycles through provider
names (used in AI-generated-motion scenes)
- BackgroundVideoLayer + source_in_seconds + backgroundVideo props on
every scene type — supports video-behind-component composition
Discovery chain (six layers, so the next agent finds this without reading
source code):
1. pipeline_defs/screen-demo.yaml — bump to 2.1, declare production_modes
(real_capture, synthetic_terminal) with required_tools, scene_type, and
agent_skills pointers
2. skills/pipelines/screen-demo/idea-director.md — mode-selection table
at brief time; brief.metadata.production_mode contract
3. skills/pipelines/screen-demo/asset-director.md — reads production_mode
and branches asset production (capture+overlays vs steps+narration+
pacing check)
4. .agents/skills/synthetic-screen-recording/SKILL.md — Layer 3 skill with
step kinds (cmd/out/pause/pill), pacing rule, and the frozen-terminal
failure mode captured from the showcase v3 retune
5. AGENT_GUIDE.md — TerminalScene added to Remotion routing; links
SCENE_TYPES.md as the authoritative cut-type registry
6. remotion-composer/SCENE_TYPES.md — new cheat sheet of every cut.type
and overlay.type with required fields, plus a "how to add a new scene
type" section (candidates: ChatTranscript, EditorScene, PrReview,
SlackThread, TicketBoard)
Guardrail:
- lib/verify_scene_pacing.py — reusable trace() and assert_alignment()
helpers that mimic the TerminalScene frame math exactly. Fail loudly
before render if steps burn through too fast or leave the scene frozen.
calesthio