feature-clip

# Feature clip The landing page and the docs are carried by short looping clips: a product screenshot, a camera that moves across it, a ring around the region being named, and a caption band. This skill owns **how this repo makes them**. The composition contract itself — GSAP timelines, the HyperFrames runtime, keyframes, the CLI — belongs to the upstream `hyperframes-*` skills. Defer to those for anything about the engine, and use this for anything about the pipeline. ## The chain ``` capture → compose → storyboard → render → web encode → sync → check ``` Every stage has a command. None of them takes an argument you have to remember. ```bash npm run clips:new -- <id> "Human name" # scaffold from _template npm run clips:capture -- --clips <id> # shoot the source PNGs from Storybook (cd content/media/feature-clips/<id> && npm run render) # composition -> canonical MP4 npm run clips:render -- <id> # -> content/media/web: webm, mp4, poster, 16:9 card npm run clips:stills # hero and accordion crops -> content/media/web npm run clips:gifs -- <id> # -> docs/screenshots/generated/<id>.gif npm run clips:sync # -> apps/website/public/media npm run clips:check # storyboard drift + manifest npm run clips:outline -- <id> # pacing: t, hold and label per beat npm run clips:scenes -- <id> # scene and step list, for review ``` `clips:capture` with no ...