video-shotcraft
Vincentwei1021/video-shotcraft · Apache-2.0 · 160 entries
A shot library for product promos in Remotion: 124 recipe cards holding 150 named moves. Each is a written recipe plus a tuned component. A film template and sound tools come with it.
- Get it
npx skills add Vincentwei1021/video-shotcraftTo use one recipe without the skill, copy its demo .tsx and the two or three files it imports from demos/_fixtures/.
- Needs
Remotion 4 and React 19, and FFmpeg for its checks. No Tailwind, no CSS files, no web fonts.
- Sends off your machine
Nothing by itself. A few of its tools go online when you run them: sound search on freesound.org, social upload, page capture.
- We watched it run
Four recipes rendered on a newer Remotion than the repo pins. The first two needed no code changes at all.
Lifting one recipe out took a three-line edit. In a tall frame it rendered, but the type stayed the same size, so a tall cut needs its sizes retuned by hand.
A recipe has no props. You change it by editing the file.
- Not tried here
The other 120 cards, the film template and the sound tools were read, not run.
- License
Apache-2.0
That covers code and docs. Not covered: the bundled sound files and music tracks. The author says 38 cards were worked out by studying other people's films and rebuilt from scratch.
Everything in it
Showing 15 of 160Show everything
Shot recipes
- bottom-push-stack-wipeEach new scene pushes up from the bottom edge with its own saturated background color, physically shoving the old scene out of frame.
- card-flip-revealFeature cards rotate 180 degrees around the Y axis, flash at the edge, and reveal a large result on the back.
- card-flock-tumbleThree UI cards tumble in 3D from edge-on to a stepped formation, keep slowly rotating, then collapse inward and burst into a smoke ring…
- circle-match-irisAn iris expands from a circular UI element and lands on a matching circle in the next scene.
- gradient-transitionThe background morphs smoothly through linear, radial, and conic CSS gradients — angle, color stops, center, and radius each interpolated…
- line-carry-transitionA progress line exits scene A, guides the camera sideways, then turns corners to become the frame of scene B.
- mosaic-reframeTwelve tiles morph continuously between a regular grid, a feature mosaic with one hero slot, and a rotated diagonal cascade, each tile…
- page-turn-transitionsA full-page transition where the old page splits open like double doors to reveal the new one.
- print-texture-transitionsA print-based reveal: ink bleeding outward from a drop point to consume the old scene.
- shot-transitions3 named moves on one card: flash-cut (The camera pushes in and a white flash straddles the cut, hiding the page swap inside the flare)…
- tear-streak-transitionsA high-energy tear: horizontal glitch strips whose displacement hides the hard cut.
- transition-hidden-cut3 named moves on one card: invisible-cut (An oversized card sweeps past the lens with heavy motion blur, and the background swaps scenes…
- transition-travelA passage transition that pushes through the counter of a giant letterform into the next scene.
- white-flash-logo-simplify-cutA liquid six-color gradient wordmark shimmers in place, the frame flash-burns to white with a blur-and-brightness pulse, and a flat…
- wipe-transitionsA geometric wipe: twelve staggered vertical blinds flipping in a wave.