**video-shotcraft** is an AI agent skill that turns Claude Code or Codex into a
motion-design studio: point it at your product and it storyboards, animates, and
sound-designs a cinematic promo, marketing, launch, or demo video with
[Remotion](https://www.remotion.dev/) β real page captures, 2.5D camera moves,
beat-synced cuts, and film-grade SFX included.
## π¬ Showcase
The 38-second Gallery intro below was itself produced with this skill β
storyboard, shot implementation, and sound design were all done by an agent
following the toolkit's methodology:
https://github.com/user-attachments/assets/cba2df8a-4b2e-4247-bace-d0b1dea9c2bd
βΆοΈ [Watch in HD on YouTube](https://youtu.be/gcVvRM_P3SM)
> Browse every shot card and motion preview online: **[Gallery](https://vincentwei1021.github.io/video-shotcraft/)**
> β search, filter, switch between variants, and copy selected shot-card names.
## π Quick start
**The most direct way: hand the repo link to your agent.**
In Claude Code / Codex or a similar agent, just say:
```text
Install this skill for me: https://github.com/Vincentwei1021/video-shotcraft
```
The agent will clone the repo and link it into your skills directory. Or install
with the [skills](https://skills.sh/) CLI / manually:
```bash
npx skills add Vincentwei1021/video-shotcraft
```
```bash
git clone https://github.com/Vincentwei1021/video-shotcraft.git
cd video-shotcraft
ln -s "$(pwd)" ~/.claude/skills/video-shotcraft # Claude Code
# or
ln -s "$(pwd)" ~/.codex/skills/video-shotcraft # Codex
```
Then make requests like:
```text
Use video-shotcraft to create a promo for my desktop product.
Use the deck-deal-flyin and row-embed shot cards to present this feature.
Design a product close-up inspired by spotlight-hero-card.
```
If no shot card is specified, the skill introduces the built-in video template
first and asks whether to use it; you can also pick shots in the
[Gallery](https://vincentwei1021.github.io/video-shotcraft/) before starting.
## πΌ Video template: Ink Press
The skill ships with **Ink Press** β a validated, complete promo template:
36.2 seconds, 1920Γ1080, 30fps, 10 shots in a paper-ink-amber style, with 2.5D
real-page camera moves, title cards, transitions, and a fully pinned cinematic
SFX pass:
https://github.com/user-attachments/assets/4cf5af51-98f3-4af2-8ab2-7267f470513d
βΆοΈ [Watch in HD on YouTube](https://youtu.be/iShab28B_ak)
To use it, just tell your agent:
```text
Use video-shotcraft to make a promo for my product with the Ink Press template.
```
The agent swaps in your product's screenshots, copy, and branding to reproduce
the same quality β the fastest, most reliable path to a finished film.
> More templates are on the way.
## π¦ What's included
| Content | Description |
| --- | --- |
| 106 shot recipe cards | Purpose, energy, suggested duration, parameters, implementation notes, and known pitfalls |
| 161 motion previews | Covering 162 styles; searchable and filterable in the online Gallery |
| Remotion implementations | Tuned TSX demos containing the actual easing and timing parameters for each card |
| Complete video template | A validated 36.2-second, 1920Γ1080, 30fps product promo with 10 shots |
| Components and assets | 2.5D page camera, captions, flash cuts, digit rolls, SFX, and capture scripts |
| Production methodology | Capture, visual direction, storyboarding, sound design, beat sync, and final QA |
The toolkit primarily targets web and desktop product promos, while individual
shot cards can also be used in feature demos, brand films, launch videos, and
other motion projects.
## π Repository structure
```text
video-shotcraft/
βββ SKILL.md # Agent entry point and core production rules
βββ references/
β βββ pipeline.md # End-to-end production workflow
β βββ shots/ # 106 shot recipe cards
β βββ sequences/ # Reusable full-video structures and sequence patterns
β βββ aesthetic-rules.md # Visual QA criteria
β βββ music-beat-sync.md # BGM analysis and beat-sync methodology
β βββ sound-design.md # Sound-design guidance and examples
βββ demos/ # Remotion reference implementations for shot cards
βββ gallery/ # Static motion-preview Gallery
βββ template/ # Runnable complete video template
βββ assets/
βββ lib/ # Reusable Remotion components
βββ scripts/ # Page-asset capture scripts
βββ audio/ # SFX and attribution details
```
For the complete workflow and implementation requirements, see [SKILL.md](SKILL.md),
the [production pipeline](references/pipeline.md), and the
[visual QA criteria](references/aesthetic-rules.md).
## π Audio and asset notes
Audio files under `assets/audio/` may be used according to their respective license terms.
See [ATTRIBUTION.md](assets/audio/ATTRIBUTION.md) for sources and license details.
Product screenshots bundled with the template are demonstration assets. Replace them with
screenshots from the target product before publishing, and verify whether any product,
customer, or personal data needs to be anonymized.
## π Acknowledgements
Many shot recipes in this library were distilled by studying the motion language
of outstanding official product films β including promos from **ClickUp,
Perplexity, Slack, Notion, Figma, Framer, Bear, Raycast, Pitch, Miro, Superhuman,
and Loom**. The cards document motion techniques (timing, easing, choreography)
re-implemented from scratch; no footage, artwork, or brand assets from these
films are included in this repository. All trademarks belong to their respective
owners, and none of these companies are affiliated with or endorse this project.
Special thanks to:
- **[Remotion](https://www.remotion.dev/)** β the React-based video framework
that powers every demo and template here. Note that Remotion has its own
[license](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md)
(free for individuals and small teams; companies may need a paid license).
- **[Mixkit](https://mixkit.co/)** β source of the SFX and music assets bundled
under their free commercial license.
- The game-feel and animation communities whose published principles (e.g.
Vlambeer's screenshake talks, classic animation timing) inform several cards.
- **Claude Code** β this library itself was built, iterated, and QA'd with an
AI coding agent, using the same workflow the skill teaches.
## β Star history