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 124 of 160Show everything
Shot recipes
- assemble-then-type-flyinTextless component shells fly in from every direction onto an empty dark grid, then every character arrives from 3D space with its own…
- aurora-bloom-bg-flipA soft purple-orange aurora blob rises from the bottom of a light frame, then the whole background slams dark in under half a second while…
- autolayout-gap-dialA gap value dial pushes a row of blocks apart in real time while badge digits tick, then everything springs back into place.
- avatar-bracket-carouselA four-corner focus bracket stays locked mid-sentence while a vertical queue of avatars springs through it three times, each one sharpening…
- basic-3d-sceneImpress-style spatial slides: cards sit at scattered 3D poses and the camera flies to align with each one by inverting its transform…
- beat-cut-movesA three-flash freeze montage: white flashes hard-cut through different crops of the same subject and settle on the key number.
- beat-step-list-theme-cycleAn adjective list steps up one row per beat while a fixed center pill catches each word and the background recolors on the same beat.
- before-after-slider-scrubBefore and after views share one frame while a fast-then-slow slider reveals the processed result.
- bezier-source-converge-mergeFour source nodes each draw a thin bezier curve toward one convergence point, then slide along their own curve and shrink as if swallowed…
- blur-slideTitle words rise into place one after another as vertical offset, blur, and opacity converge on a single shared ease, with the subtitle…
- 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.
- brace-expandA tight pair of braces appears at center, then springs apart and scales up to title size, revealing the text through a clip width bound…
- brand-frame-snapA thick brand-color frame grows around the screen before content arrives, then hard-flips its color on the same frame the inner layout…
- brand-ink-openInk crosshairs draw in, the wordmark stamps letter by letter, a subtitle types on, then the lockup holds and lifts away.
- canvas-materialize-moves2 named moves on one card: panel-to-canvas (Checkboxes tick themselves, then table rows arc out of the panel and morph mid-flight into…
- 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…
- card-stackEight cards spring up from below the frame one after another and pile into a single stack, then the whole pile fans out into a 3D arc as…
- carousel-3dEight cards sit on a circular ring laid out with sin and cos, spinning through exactly one full revolution while each card billboards…
- chart-live-moves3 named moves on one card: oscilloscope-stream (A live curve writes itself in at the right edge with sudden spikes, then brakes to a true…
- chip-grid-single-select-blackoutFive option chips fade in, then a single gray press frame flashes before the chosen chip turns solid black with a tiny bounce while the…
- circle-match-irisAn iris expands from a circular UI element and lands on a matching circle in the next scene.
- cloner-depth-echoA card duplicates into a diagonal depth trail, holds briefly, then accelerates back into one springy original.
- collab-cursor-movesA five-cursor ensemble drifting and typing across a shared board as living collaboration ambience.
- countdown-arc-scatterNumbers arranged tangentially along a large arc sweep past and brake to a stop, the winning digit sliding out of the dial to become the…
- crane-rise-revealThe camera starts tight on one data row, rises and pulls back, then reveals a full dashboard filling the frame.
- crash-zoom-punchA six-frame push races from a wide view to a target close-up, ending with either an elastic overshoot or a heavy impact stop.
- cursor-flyoverAfter an overview fade-in the camera flies to each of four screen corners in turn while an SVG cursor arrives with it, pointing and leaving…
- dataviz-landscape-openStreams of light merge across a dark data landscape while labels hover and a shallow-depth camera glides forward.
- deck-deal-flyinA physical card stack opens the scene, then cards accelerate into a live grid as the camera follows the growing page.
- depth-layer-movesLayered parallax rails: three speed tiers slide past to build depth, and the hero floats up as the rail settles.
- doc-park-left-pill-dealThe source document slides left until only a sliver remains and keeps scrolling slowly, while three outlined pills are dealt one at a time…
- document-typewriter-revealA fully typeset document writes itself behind one accent-color caret, opens both side columns, and drops history entries into the rail.
- draw-svg-traceAn ink stroke traces an element outline, closes with a dark flash, and hands focus to the revealed content.
- element-body-movesA contact shadow that separates during lift, giving interface elements physical weight.
- flying-wordsKeywords spawn deep in a perspective tunnel and rush past the camera along the z axis, fading in and out on a lifecycle curve across two…
- fractureTwenty-five 3D tiles fly in from scattered space and lock into a poster in a center-out ripple, hold for a beat, then accelerate outward…
- fui-hud-movesA reticle that assembles itself around a target and locks on.
- gauge-readout-moves2 named moves on one card: needle-sweep-selftest (Ignition self-test: gauge needles slam to full arc, then swing back with overshoot to…
- glass-pill-dictation-typingA fixed-width glass pill pops in slightly oversized and settles, glowing with an accent gradient inside that fades out as a placeholder…
- glitch-cycleStatus phrases cycle through one monospace slot, each dissolving into noise at both ends with RGB split and jitter, while a progress bar…
- glow-flyline-moves3 named moves on one card: glow-orb-ambient (Three huge blurred glow orbs drift on twin sine paths, driving edge-light on nearby cards by…
- gradient-transitionThe background morphs smoothly through linear, radial, and conic CSS gradients — angle, color stops, center, and radius each interpolated…
- gradient-word-sweepA gradient light sweeps left to right across a keyword, charging each character with glow that decays behind the wavefront until the whole…
- grain-dissolveA clean line of text boils into displaced grain noise inside a hatched selection frame, then the particle cloud condenses into a larger…
- graze-face-tourThe camera skims low across the UI surface like terrain while page text hovers above the interface and settles down as the shot advances.
- hashtag-to-pill-materializeA typed "#word" hard-cuts into a wide pill tag, holds, shrinks into its slot on the page, then hard-cuts again to reveal the finished view.
- icon-field-colorizeA grid of grayscale icons staggers in to fill the screen, holds a beat, then brand-color bands ripple down and light the whole field at…
- icon-performance-movesAn escalating attention bounce that compresses on landing to call the eye to an icon.
- impact-feedback2 named moves on one card: hit-counter (Three cards slam in one after another; every hit freezes 2 frames, floats damage digits, and bumps…
- integration-hub-mapA page flips 180 degrees into an integration hub where five app icons pop in together and rainbow light tubes connect with pulses flowing…
- lead-word-zoom-assembleThe lead word fills the frame at 2.3x and keeps drifting toward the viewer, then a single curve recedes it to size while the line slides…
- letterspace-materializeEvery letter of a widely tracked wordmark draws itself in parallel, growing like handwriting and finishing together on the same frame.
- light-play-moves2 named moves on one card: spotlight-sweep (Two copies of the text: a dim one always on, a bright one revealed by a radial mask that sweeps…
- line-carry-transitionA progress line exits scene A, guides the camera sideways, then turns corners to become the frame of scene B.
- list-revealMenu rows scale into place one after another with a faint overshoot while the whole list drifts slowly upward, keeping the per-item…
- list-stack-pressList cards fly up from below, compress the growing stack on every landing, and advance a synchronized counter.
- logo-shrink-wordmark-lockupA neon slit ring shrinks fast into a solid white O with an overshoot brake, slides left to make room, letters stagger in one by one, and an…
- magician-card-flourishA blue starburst flashes on black for a third of a second, then a card shoots out of the flash, spinning along an arc toward camera before…
- marker-underline-titleAfter the headline settles, a marker stroke draws itself under the keyword — tapered, rough-edged, and slightly tilted to follow the italic.