Why this can feel different from animated slides
A typical code-generated promo starts with a list of features, turns every feature into a card, applies the same fade-and-rise motion, and joins the cards with generic crossfades. The result may be clean, but every shot has the same grammar. Nothing changes the viewer's position, no object carries momentum across a cut, and sound does not explain weight or contact.
video-shotcraft changes the unit of work. Instead of asking an agent to “make the animation cinematic,” it gives the agent named shot recipes, tuned Remotion examples, a complete template route, production references, capture helpers, sound assets, and a final-review contract. The source-reviewed Gallery reports 157 cards and 214 styles. Each chosen card is supposed to be read together with its exact demo implementation; the name alone is not the recipe.
| Slide-like default | Directed product-film decision | Practical test |
|---|---|---|
| Every element fades upward | One motion idea owns each shot | Can you name the single visual event the audience should remember? |
| Cards replace one another | Camera position, depth, and handoff objects create continuity | Does the viewer understand why the next shot follows? |
| Mock UI is redrawn from memory | Actual product captures preserve identity and evidence | Can the screen be traced to an approved product state? |
| Effects are added after timing | Motion, pauses, cuts, impacts, and risers share one timeline | Do the sound peaks coincide with visible causes? |
| A successful render is the finish line | The encoded video is sampled and reviewed by frame and shot | Are there readable holds, clean seams, and no private data? |
What we checked before writing this guide
We reviewed source commit 5f047c7cfe10d6616fe59160a750fcfaea510b2e, not an undated summary. The checked tree includes the Skill entrypoint, three complete-film modes, 157-card Gallery index, pipeline, aesthetic and sound references, Remotion examples, Ink Press template, workbench, JianYing export module, audio attributions, and Apache-2.0 license.
The upstream SKILL.md passed the bundled OpenAI Skill Creator structural validator, and all 23 locked helper tests passed. We then replaced every visible product texture, fixture, title, caption, wordmark, and palette token in Ink Press with a fictional Relayboard incident-handoff product. The complete RelayboardPromo composition rendered all 1,085 frames with Remotion 4.0.484 at concurrency 4. The end card explicitly says “Fictional product demo · synthetic data,” and five inherited sounds without traceable source URLs were replaced with comparable Mixkit Sound Effects Free License files that have exact URL records.
Download the 36.2-second Relayboard behavior-test video (MP4, about 15 MB).
Choose the production mode before collecting assets
The Skill separates three complete-promo modes. Keep them distinct, because each one has a different decision boundary. A fourth use case applies a single recipe to one shot without designing a whole film.
| Mode | Choose it when | What happens next |
|---|---|---|
| Ink Press template | You want the shortest path to a polished horizontal promo and the existing ten-shot structure fits | Replace screenshots, copy, and brand tokens while retaining the proven sequence and timing skeleton |
| Autonomous creation | The product needs a new visual direction and you are comfortable letting the agent make creative decisions | The agent records its reasoning and continues from product inspection through final review without approval at every planning stage |
| Guided creation | Positioning, visual taste, or feature priority needs human choices | You approve the brief, direction, shot mapping, and storyboard before implementation begins |
| Single shot | You already know the exact motion moment needed | The agent resolves the Gallery name, reads that card and its linked TSX demo, then adapts the motion to the target asset |
Do not choose Ink Press only because it is available. Its paper-and-amber editorial pacing may suit a research tool, writing product, knowledge system, or restrained B2B interface. A playful game, dense mobile app, bold consumer brand, or voice-led vertical piece may need a separate direction.
Step 1: inspect the Skill before installation
The repository contains instructions, scripts, a runnable template, a browser workbench, audio, and many code examples. Review the source and the current commit before enabling it in a sensitive project. The simplest documented installation path is:
npx skills add Vincentwei1021/video-shotcraftAfter installation, confirm that the loaded Skill points to the source you reviewed. Keep the business application and the video project separate when possible. The video agent may read the product to understand routes and design tokens, but it should not change production code merely to make a capture easier.
Step 2: freeze product truth and screen safety
Before storyboarding, write a compact product brief that another reviewer can challenge. Separate verified product facts from campaign choices. The brief should identify the audience, one central promise, three to five demonstrable capabilities, exact routes or states, approved copy, forbidden claims, brand files, target duration and ratio, and the desired call to action.
For every screen, record whether its data is public demo data, synthetic data, or sensitive data that must not be captured. Replace names, emails, tokens, customer records, internal metrics, unreleased features, and live operational states before the browser opens. “It is blurred in the final edit” is weaker than never capturing it.
| Brief field | Good entry | Weak entry |
|---|---|---|
| Main promise | Turn scattered incident handoffs into one owner-visible timeline | Revolutionize teamwork |
| Proof screen | /demo/incidents/atlas-17 with synthetic owners and frozen timestamps | Show the dashboard |
| Allowed statement | Evidence rows keep source links beside each decision | Never miss anything again |
| Forbidden content | Real customer names, API keys, private postmortems, live counts | Anything sensitive |
Step 3: derive the film's visual system from the product
Capture design facts before choosing effects: font families and weights, primary type scale, spacing rhythm, grid, alignment, corner radius, surface colors, text colors, status colors, gradients, shadows, and material cues. Put those values in a small design specification.
A recipe contributes movement, not a replacement brand. If the product uses square corners, dense tables, cool gray surfaces, and a single green status color, the film should not suddenly become a neon glassmorphism reel because the demo looked impressive. Adapt the recipe's acceleration, camera path, reveal order, and hold; reskin its typography and materials from the target product.
Step 4: map each feature to one motion argument
Start with what the audience must understand, then select a card whose physical behavior expresses that idea. Do not begin by collecting favorite transitions. The Gallery is most useful as a vocabulary: spotlight one hero, let rows assemble, stream evidence into a completed state, step through several product roles, or strip interface complexity away at the end.
Worked planning example: Relayboard
Relayboard is a fictional incident-handoff dashboard created for the behavior test. Its approved promise is: one shared timeline shows the incident, its owner, and the evidence behind each decision. Because we selected Ink Press, the production retained its exact 36.2-second structure instead of forcing the initial 25–30 second estimate.
| Beat | Audience meaning | Candidate recipe | Required proof |
|---|---|---|---|
| 1. Queue to hero incident | Focus replaces a noisy handoff | Ink Press opening spotlight and push-in | The synthetic ATLAS-17 card, owner, service, event count, and source count |
| 2. Incident deck to search | Teams can find the shared record | Template deal, camera travel, filter, and click sequence | Ten synthetic incident cards and an exact ATLAS-17 search |
| 3. Evidence rows embed | The decision remains traceable | Template detail-page row embedding | Five timestamped synthetic evidence rows with source labels |
| 4. Evidence becomes a brief | Approved signals flow into the weekly handoff | Template list stack and write-on sequence | Evidence Radar plus the 2026-W36 Weekly Brief |
| 5. Product elements assemble | One record remains the final message | Template group-photo outro | Relayboard wordmark and the approved accountable-timeline line |
This is a shot map, not a storyboard. The storyboard still needs order, frame counts, visible states, on-screen copy, crop, camera position, transitions, sound cues, and the hold that lets each result be read.
Step 5: capture the real interface as production material
Start a controlled local or staging build, load the frozen demo state, and capture at high resolution. For a camera move across a page, collect the full-page texture plus important elements as separate layers when the recipe needs parallax or focus control. Record coordinates and viewport assumptions rather than guessing where pieces belong.
Use mock UI only for abstract interstitials, a clearly fictional concept, or a component that is not presented as the product itself. If a viewer is supposed to believe they are seeing the shipping interface, use an approved capture.
Step 6: implement from the exact recipe, then adapt
Resolve the card and style in the Gallery index. Read the complete card, follow its reference to the precise demo source, and inspect the timing and easing there. Preserve the card's known failure constraints. Then replace fixtures with the approved captures and product tokens.
Keep frame output deterministic. Avoid current-time calls and unseeded random values. A motion that changes every render is difficult to review, compare, or repair. Render representative stills early: the opening event, the maximum-motion moment, the settled proof state, every transition seam, and the final frame.
Step 7: write sound as cause and response
Sound should explain what moved. A rise can prepare a camera push; an impact can mark contact; a light accent can confirm a resolved state. Do not attach a generic whoosh to every entrance. Choose the material family first, listen to the individual file, confirm its terms, and pin the selected asset locally.
If the edit is driven by strong music, establish the beat grid before locking cuts. A cut landing on a musical accent is a timing decision, not permission to shake the whole frame on every beat. Leave quiet space and visual holds after dense passages.
Step 8: review the film as evidence and experience
Run technical checks, but also watch the exact encoded output. Sample frames at every shot's entry, peak, settled state, and exit. Confirm that text is readable after motion finishes, crops do not amputate the product, camera depth does not distort the interface, transitions do not leave residue, audio peaks match visible events, and the final card remains complete through the last frame.
A separate reviewer should receive the brief, storyboard, selected card names, exact demo references, approved captures, design spec, media ledger, and final file. Ask for evidence with timecodes or frame numbers. “Feels premium” is not actionable; “the status label becomes readable only four frames before the cut” is.
The fast template route
Ink Press is the shortest route when its ten-shot editorial structure fits. The source describes a 36.2-second, 1920 by 1080, 30 fps SFX-led template. Replace the demonstration screens before publishing and rebuild its copy and design tokens around the actual product.
cd relayboard-video-shotcraft
npm ci
npx remotion render src/index.ts RelayboardPromo out/relayboard-promo.mp4 \
--codec=h264 --audio-codec=aac --concurrency=1
Headless rendering has an operational cost
The upstream README documents three recurring headless constraints: low-core hosts may require --concurrency=1; modern full Chrome may not provide the headless mode Remotion expects; and a blocked browser-download host can prevent automatic setup. The source recommends a local Chrome Headless Shell through --browser-executable when automatic retrieval is unavailable.
These are environment fixes, not creative fixes. Record the browser, Node, Remotion, fonts, codecs, operating system, and render command when exact reproduction matters.
Rights, licensing, and claims still belong to you
The video-shotcraft repository is Apache-2.0, but that does not place every dependency and every input under one license. Remotion has separate eligibility-based terms. The bundled audio files have their own attribution record. Your product screens, brand marks, fonts, music, customer data, and destination-platform requirements remain separate review items.
The Skill cannot establish that a slogan is true, that a customer screenshot may be published, that a track is licensed for a particular campaign, or that a company qualifies for a free Remotion tier. Resolve those questions before the final render is approved.
Use the matching Prompt and Skill record
The video-shotcraft product launch prompt turns a brief, project location, target format, and approval mode into a paste-ready production request. The video-shotcraft Skill record explains the upstream package, installation boundary, source review, dependencies, and what our local checks did and did not prove.
