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
Remotion pieces
- _legacy (66 retired demos)66 demos removed from the library in October 2026, kept frozen only so old workbench projects still open. The repo says not to pick from…
- Brand.tsx (the repo's own logo and slogans)Link onlyThe video-shotcraft mark, wordmark, brand colors and pitch lines that the demos show on screen. It is the file to replace with your own…
- CaptionA small monospace caption line that fades in and out at the bottom of the frame for a given duration.
- ClipCardWraps a video file in a rounded card with an optional caption, and cross-fades a loop when the clip is shorter than the shot, so…
- ClipCardLooping (demo)The test scene for ClipCard: three cases of a looping clip inside a card. Needs a real mp4 in public/clips/, so the repo's smoke test skips…
- DigitRollOdometer-style rolling digits for monospace numerals.
- Fixtures.tsx (fake dashboard parts)Stand-in UI for demos: FakeDashboard, Card, TitleBlock and a gray palette. 647 lines; 23 demo files use it.
- FlashCutA warm-white bloom that flashes over a hard cut (10 frames by default). The flash-cut style of the shot-transitions card.
- helpers (rand, shake, camera, motion)Small pure functions with unit tests: seeded random (mulberry32), velocityAt, lagged follow, dampedSettle, handheld shake, and a three.js…
- Look.tsx (palettes and stage)Eight complete color looks (dark: midnight, aurora, ember, graphite, lime; light: paper, porcelain, sand), a type scale, and a lit Stage…
- Motion.tsx (480x270 design stage)A DesignStage that scales a 480x270 design grid to the frame, plus an ease table and seg/lerp/rand helpers. 14 older demo files use it.
- PageCamA 2.5D camera over a full-page screenshot: you give keyframes (frame, center x/y, zoom, tilt) and it flies the page. The base of every…
- PageCam2D.tsxA self-contained copy of the template's page camera for demos that fly over real screenshots (spotlight-hero-card, type-and-filter…
- Polish.tsx (eases and finish kit)The shared finish kit almost every demo imports: a CSS-equivalent bezier() ease maker, eight named eases (snappy, out, smooth, swift, exit…
- VerticalTickerLink onlyAn endless 3D wall of columns scrolling at different speeds (used by page-waterfall-wall). Its header says it was taken in from another…
HTML to video
- readme-workflow (README banner source)The editable source of the README's eight-second workflow loop (1440x540), a HyperFrames HTML composition, not Remotion.
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…