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…
- 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.
- mosaic-reframeTwelve tiles morph continuously between a regular grid, a feature mosaic with one hero slot, and a rotated diagonal cascade, each tile…
- neon-frame-forerunA neon frame races ahead to outline the scene in steep perspective while components drop from above and the page brightens as they land.
- neon-frame-orbit-dropAfter a neon frame draws itself, the camera arcs left to right while every page component drops from the air and lands on the same frame.
- neon-triple-marqueeThree rows of outlined neon giants scroll in opposite directions across the full screen, lighting up in turn on a one-third phase offset.
- orbit-ring-title-openEight 16:9 content cards orbit an ellipse at a constant rate with their contents frozen on the first frame, then all start playing together…
- outline-word-fillAn outlined word snaps down from triple size while a dashed circle and horizontal guides close in, then the stroke flips to solid white in…
- outro-group-photo-launchElements from the film assemble around the wordmark as a crane settle, stage light, and gold dust create a launch-event finale.
- overhead-camera-moves2 named moves on one card: tilt-reveal (The whole page lies flat at -80 degrees and tilts upright in one 43-frame ease-out with a slight…
- page-turn-transitionsA full-page transition where the old page splits open like double doors to reveal the new one.
- page-waterfall-wallReal page captures flow at different speeds across a tilted 3D wall, creating an endless field of content.
- panel-grid-movesAn angled comic-panel split that cuts one moment into three framings before resolving to a poster.
- paper-title-cardA sentence stamps onto paper word by word, highlights one amber italic term, and closes with a short rule.
- picker-carousel-feature-cycleA vertical mobile-style picker holds its focus pill still while the list passes through it, each item decelerating hard into place and…
- pill-chip-slot-cycle-handledA dark chip inside the sentence rolls through feature words, its width easing to each word so the surrounding text is pushed apart while…
- pill-slot-cycleA fixed sentence keeps its trailing pill slot spinning like a slot machine through feature words until the final word locks the sentence.
- print-texture-transitionsA print-based reveal: ink bleeding outward from a drop point to consume the old scene.
- product-card-progressive-assembleA product card builds itself field by field as image, title and pills pop in, the old price gets struck through while an accent new price…
- quad-split-parallel-scenesThe frame hard-cuts into a 2×2 grid where four micro-scenes run in parallel — typing, a whip zoom, word pops, and a cursor interaction…
- radial-ripple-phone-chipsFour concentric gray circles breathe out of phase like water ripples while a centered phone mockup auto-scrolls its feed and two white…
- radial-waveA 17x9 dot grid lights up in rings that spread outward from the center, each dot overshooting its scale before settling into a steady glow…
- research-card-stack-scrollDark paper cards drop into the center every twelve frames and pile along a downward-right axis, squashing on landing while only the topmost…
- rhythm-interrupt-movesStepped punch-in jump cuts that break cadence on the same frame.
- riso-print-hitsA risograph impact: a single misregistered color split that snaps into alignment.
- row-embedContent rows descend with perspective, flatten into the page, and flash a thin amber seam at the moment of insertion.
- sakuga-timing-shiftMovement begins in stepped, held drawings and suddenly switches to frame-by-frame acceleration at the climax.
- scan-bracket-sweepA skeleton document pops to center, black L-shaped framing brackets drop into its corners, and a thin line with a gradient trail sweeps up…
- scanline-annotate-focusA bright scanline travels down the page and, as it clears each block, camera framing brackets snap inward onto that region and a monospace…
- scanline-assemble-flyinThe page starts as an empty dark grid; a scanline descends and each component flies in from off-screen to snap into place behind it, with…
- scroll-brake-moves2 named moves on one card: changelog-scroll-brake (A 2400px scroll decelerates exponentially over 50 frames, motion blur driven by…
- segmented-thumb-heroAn oversized segmented control gets a close-up: a cursor slides in, presses, and the white thumb snaps to the other segment as icons swap…
- 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)…
- slam-entrance-moves3 named moves on one card: kanada-perspective-snap (Kanada-style snap: perspective 300 to 1500, rotate3d 58 degrees to flat, scale 1.7 to 1…
- space-camera-moves2 named moves on one card: exploded-view (The page tilts into 3D and its parts blast apart along Z, hover a beat, then reassemble in…
- speed-ramp-freezeA freeze used for on-screen annotation before motion resumes.
- spotlight-hero-cardA spotlight selects one card, the camera pushes diagonally, the card lifts for two outline passes, then returns to the page.
- spotlight-sweep-moves3 named moves on one card: glow-wake-sleep-panel (Wake-and-sleep sweep: a reveal mask follows the light head left to right — lit where it…
- steep-tilt-glideA page stands at a steep 60-degree perspective and glides across a fixed camera with speed ghosting while text settles onto the surface…
- stroke-segment-buildDisconnected title strokes illuminate in a scrambled order and become readable only when the final segments snap into place.
- tear-streak-transitionsA high-energy tear: horizontal glitch strips whose displacement hides the hard cut.
- tension-camera-moves2 named moves on one card: bullet-time-freeze-orbit (A growing chart freezes mid-animation while the camera orbits the hovering UI plane 55…
- terminal-3dThree terminal windows float at different poses in 3D space; the camera flies between them with a sine pull-back, and at each stop a…
- text-as-maskProduct footage moves inside oversized title letters before the type expands until the footage takes over the frame.
- text-column-convergeTwo words pinned at opposite screen edges hard-swap through options, then slide together exactly once to lock into the final phrase.
- theme-switch-moves2 named moves on one card: theme-sweep-toggle (The dark theme sweeps across as a slanted clip-path edge with a glowing 4px line, recoloring…
- timeline-travelThe camera accelerates along a horizontal version timeline, raises cards at each stop, then brakes sharply on the final milestone.
- title-demote-to-labelA centered headline stands for a beat, then shrinks and slides to the top-left corner to become a section label as content grows beneath it.
- trailer-grammar-movesA trailer bumper hook: three 9-frame rapid cuts, a beat of black silence, then the opening title card.
- 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.
- type-and-filterA real interface types a search, collapses the grid to one result, then clicks through into the detail view.
- type-assembly-moves3 named moves on one card: split-text-stagger (Each character rises inside its own overflow box from 115% with a 10% overshoot, two frames…
- type-entrance-movesLetters falling under gravity and bouncing into alignment as a title entrance.
- type-rhythm-sync2 named moves on one card: font-weight-pump (On each hit the strokes jump bold and spring back thin over 10 frames; accent beats also widen…
- typewriter-movesA three-act typing narrative: a plain word, a hesitation and deletion, then a faster retype of the selling point.
- ui-strip-away-outroAfter Publish is clicked the editor UI evaporates layer by layer from the edges inward, leaving one button to slide center, grow, and hand…
- ui-to-brand-morph2 named moves on one card: icon-flip-bloom (The icon rocks twice, flips flat to a sliver with double ghosting, swaps identity at the…
- value-stagger-gradientSixteen bars rise in a staggered sweep where height, hue, travel distance and blur are each spread as a gradient across the row, then a…
- vertical-word-roll-blur-cycleThe closing word of a tagline rolls vertically through a three-line reel, neighboring rows blurring into gray depth while the settled word…
- voice-waveform-liveA recording capsule shows 64 live bars that surge with speech, shrink to a dotted line in pauses, and collapse on submit.
- wall-reveal-moves2 named moves on one card: bento-light-up (A dark 3x2 bento wall waits dimmed; amber light traces each cell border and the content…
- 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.
- word-relay-filmstripA filmstrip of page cards steps vertically while a serif word relay swaps only its verb, each swap aligned to the center of the current…
- word-relay-geometryThree benefit words hand off in turn, each with its own geometry — a spinning dashed circle, three interlocking circles that trim into…
three.js and WebGL
- FlatPanelA flat textured panel with a contact shadow for real 3D page shots.
Starters
- Ink Press templateA whole runnable Remotion project: a 36.2-second, 1920x1080, 30 fps product promo in a paper-and-ink look (10 shots, 1,085 frames, sound…
Agent skills
- 11 template sound effectsLink onlyThe Ink Press film's fixed sound effects. The repo says they are not covered by its Apache-2.0 license; six are recorded as Mixkit SFX…
- 5 background music tracksLink onlyFive MP3 tracks (tech house, two house, two hip hop; about 86 to 129 BPM measured by the author) offered as music choices. From Mixkit…
- aesthetic-rules (review rules)29 rules written as past rulings, in five groups: rhythm (R1-R4), look, camera and composition (Q1-Q11), sound (S1-S5), copy (C1-C3)…
- demo page screenshots (_textures)Link only25 files: full-page and per-card screenshots of the author's demo product (a research tracker, partly in Chinese) with a layout json. 13…
- final-review (independent last check)The brief for a fresh reviewer who checks the finished film against the plan, the chosen cards, the demo source and the aesthetic rules…
- music-beat-sync (cutting to the beat)Method for fitting a beat grid to a chosen track (librosa, kick/snare/hi-hat detection), writing the timeline in beat numbers with a…
- promo-energy-arc (film skeleton)A fill-in-the-blanks shape for a 30-60 second multi-feature promo: quiet brand open, one hero moment, feature sections separated by…
- sound-design (SFX timing and mix)How to choose, place and mix sound effects for a product film: frame-pinned SFX table, foley before decoration, riser-impact-sparkle…
- video-shotcraft (the skill)Agent instructions (written in Chinese, with an English description line) for making a product promo in Remotion from real page captures…
- video-shotcraft logo filesLink onlyThe project's own mark, lock-ups and brand board, with usage rules in BRAND.md. Theirs, not for reuse.
Tools
- capture-template.mjs (page capture)A puppeteer script you edit (base URL, routes, selectors) to capture a running web app as full-page 2x screenshots, per-element cut-outs…
- Gallery (static preview site)A static site that lists the 124 cards and 150 moves with search, filters and copyable names. The data is gallery/api/library.json. 54…
- jianying-export (export to the JianYing editor)Python modules that turn a finished Remotion film into an editable draft for JianYing, the mainland-China edition of CapCut: one clip per…
- Motion WorkbenchA browser editor (Vite, React, Remotion Player) that opens a finished film as tracks: shots, transitions, captions, sound. You can change…
- sfx-source.py (Freesound search and download)Searches Freesound for sound effects, filters to CC0 (or CC BY when allowed), downloads MP3 previews into a film project, and writes a…
- shot-polish (the redesign review rig)The author's tooling and notes from the October 2026 pass that re-made all 216 demos and kept 150: per-shot notes, a keep/cut decisions…
- smoke-render-demos.py (first-frame test of every demo)Registers every demo that exports a duration into a generated root file and renders its first frame, to catch demos that compile but crash.
- upload_post.py (social publishing)Posts a finished MP4 to TikTok, Instagram, YouTube, LinkedIn, X and others through the Upload-Post hosted service. Standard library only…