Video edit library

Named edits for footage you already have. Every take in references/ gives the look, when to reach for it, the mistake people make with it, timings, and a recipe per engine: FFmpeg for flat files, HyperFrames (HTML + GSAP) or Remotion (React) when the edit is a composition, and the CapCut path when a person will finish the edit in the app. The cards with previews live at https://skills.varg.ai/browse/edit-video/.

Most takes are built on open components from other people's libraries: HyperFrames by HeyGen, remocn, GL Transitions, Magic UI, Aceternity UI, Fancy, Codrops and others. Each take names its component, author and license; keep that credit when you use it.

How to use it

1. Name the take before you build it. Read the person's ask ("make the logo pop at the end", "zoom into the button when I click") and find the take in the index below. Open only that reference file.
2. Pick the engine the project already uses. A plain MP4 and a shell: FFmpeg. A HyperFrames or Remotion project: that framework's recipe, and the listed registry component when one exists (npx hyperframes add <name>, npx shadcn@latest add @remocn/<name>). Do not switch frameworks for one effect.
3. Keep the timing from the card. Durations and easing are the part people get wrong. A transition longer than 12 frames at 30 fps starts to read as a scene of its own; text needs at least the time to read it aloud.
4. Check the cut. Grab a still at each edit point (ffmpeg -ss <t> -i out.mp4 -frames:v 1 edit-<t>.jpg) and look at it before you hand the video back.

Rules that hold for every take