Docs · v1.1.1

ReelStack — usage

Premium 9:16 Reel OS for Remotion. Five cinematic style families. Twenty-two production-tested presets. Audio-locked motion. IG-safe by default. Buy once, install in 60 seconds, scaffold a reel with one slash command, iterate in Claude Code, render to MP4.

npx @devinilabs/reelstack init # one-time setup, license check # in Claude Code: /reelstack-glass --preset=graphify --name=MyReel cd MyReel && npm run dev # opens Remotion Studio

14 chapters. Start with the prompt template — it's the artifact you paste into Claude Code to ship a reel on the first try. Then mental model · 22-preset catalog · 13 slash commands · 14 lint rules · audio-locking pipeline · 6 recipes · cheat sheet. Use the chapter rail (left) or scroll.

02 · Prompt template

Paste this. Ship a reel.

Two paths. The simplest is to type a family slash command and let Claude walk you through every choice. The most precise is the structured brief below — drop your script, fill five fields, and paste. Both work — pick by mood.

Easiest path

Just type the slash command — Claude asks the rest

No brief required. Use this when you're exploring or don't have a script ready yet.

Type any family slash command (e.g. /reelstack-glass) and Claude walks you through:

  1. Picks a preset. Claude prints a menu of every preset in the family with one-line use-cases (e.g. "Long-form skill drop with technical breakdown") and the recommended default. You reply with a number or preset key. Forbidden auto-defaults silently — only one preset there today.
  2. Asks for a reel name. Short, no spaces (e.g. ClaudeWatch).
  3. Asks for the voiceover path. Point at a .wav in public/audio/, or skip if you'll record later.
  4. Scaffolds the reel and surfaces the family palette + signature primitives + reference reel — so iteration starts the moment Studio opens.

The structured briefs below are for buyers who want to encode their full intent in one paste — useful when you already have an audio file, a brand identity, and a hook ready.

The five anchors every brief must answer
  1. 01
    Script

    Drop the full voiceover narration. Claude extracts the hook, CTA, and product name from it — no need to repeat them as separate fields.

  2. 02
    Family + preset

    Type the slash command to set the family (e.g. /reelstack-glass). Claude presents the preset menu — reply with a number or key, or let it recommend the default.

  3. 03
    Voiceover path

    Without it, motion drifts 6+ seconds on a 90-second voiceover. Always pass an absolute path to a .wav file inside public/audio/.

  4. 04
    Workflow list

    Spell out the slash commands in order. Prevents Claude from skipping /reelstack-beats — the most-skipped step.

  5. 05
    Acceptance criteria

    Define “done” upfront: lint clean, critique threshold, render targets. Without it Claude will ship early.

The brief

Standard brief

Recommended default. Most reels start here.

# ReelStack brief
# Replace every <Name> below with your reel name (PascalCase, no spaces — e.g. ClaudeWatch, LaunchVideo).

Script:
<paste full voiceover script here>

Reel: <Name>
Voiceover: public/audio/<Name>.wav
Platforms: ig
Logo: /reelstack-icons logos:github-icon  (or skip)
Screenshots: /reelstack-capture https://justdrop.dev --scroll  (or skip)

Clips: (optional — drop MP4s into public/reel-asset/)
- demo.mp4   at BEATS.demo   ← "you just type slash claude watch"
- result.mp4 at BEATS.result ← "30-minute video, in under two minutes"

Workflow (run in order):
1. /reelstack-glass --name=<Name> --vo=public/audio/<Name>.wav
2. Pick a preset — if the family has multiple, Claude prints the menu; reply with a number or key
3. /reelstack-beats public/audio/<Name>.wav   ← paste BEATS at top of src/<Name>.tsx
4. /reelstack-capture <urls if any>
5. /reelstack-icons <brands if any>
6. /reelstack-lint src/<Name>.tsx              ← fix every error (warnings flow through)
7. /reelstack-critique src/<Name>.tsx          ← apply every "Quick" fix

Acceptance:
- /reelstack-lint passes with zero errors (warnings reviewed)
- /reelstack-critique scores ≥ 8 across all 5 dimensions
- BEATS const sourced from /reelstack-beats output, not eyeballed
Worked example

ClaudeWatchReel — filled-in

The brief populated with concrete values for a real Devini Labs production reel.

The script below is the canonical ClaudeWatchReel narration. The BEAT keys BEATS.demo and BEATS.result are real keys in the claudewatch preset's BEATS const, so Claude can wrap each clip in the correct <Sequence> without guessing.

# ReelStack brief — ClaudeWatch

Script:
This custom Claude skill literally watches video frame by frame.
Not just the transcript — the actual visuals.
You just type slash claude watch, paste the URL, hit enter.
A 30-minute video, broken down and rewritten, in under two minutes.
Comment AI to get this custom created Claude skill.

Reel: ClaudeWatch
Voiceover: public/audio/claudewatch.wav
Platforms: ig
Logo: /reelstack-icons logos:anthropic-icon logos:youtube-icon logos:obsidian

Clips: (drop MP4s into public/reel-asset/)
- claude-watch.mp4         at BEATS.demo    ← "you just type slash claude watch, paste the URL, hit enter"
- claude-watch-result.mp4  at BEATS.result  ← "30-minute video, broken down and rewritten, in under two minutes"

Workflow (run in order):
1. /reelstack-glass --name=ClaudeWatch --vo=public/audio/claudewatch.wav
2. Pick a preset — Claude prints the menu; reply with a number or key (e.g. claudewatch)
3. /reelstack-beats public/audio/claudewatch.wav   ← paste BEATS at top of src/ClaudeWatch.tsx
4. /reelstack-icons logos:anthropic-icon logos:youtube-icon logos:obsidian
5. /reelstack-lint src/ClaudeWatch.tsx
6. /reelstack-critique src/ClaudeWatch.tsx

Acceptance:
- /reelstack-lint passes with zero errors (warnings reviewed)
- /reelstack-critique scores ≥ 8 across all 5 dimensions
- BEATS const sourced from /reelstack-beats output (not eyeballed)
- claude-watch.mp4 plays from BEATS.demo and ends at BEATS.result with no overlap
Anti-patterns — these waste an iteration
Don't writeReason
“Make it look viral”Vague. Lint and critique enforce quality, not vibes.
“Start the reel with a slow fade-in”HOOK_LATENCY blocks render. The earliest Sequence must start at frame 30 or earlier — viewers thumb past dead openings.
“Animate `top` / `left` / `width` with interpolate()”NON_HW_ACCEL_PROP blocks render. Layout-thrashing animation tanks smoothness. Use `transform: translateY/X` or `scale` on `opacity` instead.
“Match graphify exactly”License forbids verbatim re-publish. Reference reels are pattern study only.
“Make it 10 minutes long”Wrong product. ReelStack is 9:16 short-form (typically 30–120 s).
“My voiceover” (no path)Claude has to ask. Wastes a turn — pass the absolute path.
“Skip the lint, just ship”Defeats the entire product. The lint rules are why ReelStack reels look earned, not guessed. Errors block render; warnings inform.
“Show a demo clip in the middle”Vague — no path, no BEAT key. Write: “demo.mp4 at BEATS.demo” so Claude can wrap it in a Sequence. The duration is already defined by your audio.

Drop one of these into Claude Code right after running npx @devinilabs/reelstack init, or just type the family slash command and let the menu walk you through. Either way, the skill triggers on family / preset names automatically — no wrapping prompt about ReelStack itself.

v1.3.1: motion-designer priming is built in. No need to prepend “act as a senior motion designer” or similar persona prompts — SKILL.md's Craft posture section tells Claude to treat the ≥4-layer motion floor as a floor (not a ceiling), use perpetual primitives in every anchor scene, and apply GSAP-flavored easings throughout. The bundled gsap-core and gsap-timeline companion skills reinforce the GSAP vocabulary.

03 · The five families

Five cinematic style DNAs.

Every reel descends from one. The family decides palette, allowed accents, signature primitives, variant overlay, and motion vocabulary. The preset decides frame budget, BEAT structure, and the scene composition.

Glass Iridescent

/reelstack-glass
Soft + General·7 reference reels·7 presets

Premium product reveal — underwater light caustics, glass surfaces, iridescent text shimmer. Default family for multimodal product reveals and SaaS announcements.

Palette
bg · #EFEAF2ink · #0E0E12iriCyan · #7FE8D4iriViolet · #8B7FE8iriRose · #E89BC4iriGold · #F2D88FvioletPill · #9D8BF2tealPill · #85DDC9
Allowed accents

#7FE8D4 · #8B7FE8 · #E89BC4 · #F2D88F · #9D8BF2 · #85DDC9 · #0E0E12

Signature primitives
CausticBlobsHairlineGridGlassCardEyebrowPillStaggeredWordsCounterSonarRingsParticleBurstLightBeamFloatingGlyphsFilmStripIridescentRingIridescentTextBreakdownCard
Presets
graphifypaperclipgstacklilagentsjcodeclaudewatchclaudewatchcta

Default. Multimodal product reveal. Premium SaaS announcement. AI/ML demo.

Cream Paper

/reelstack-paper
Minimalist + Soft·4 reference reels·4 presets

Editorial print — warm document texture, dark-green cardstack hierarchy, Claude terracotta accent. Thesis/essay narratives.

Palette
bg · #f0ede8heading · #1a1a1abody · #2d2d2dmuted · #6b6b6bcardForest · #1e3a27cardForestLift · #2d4433accent · #D4663Adanger · #c0392bsuccess · #1e7a45terminalGreen · #5be8a0
Allowed accents

#1a1a1a · #2d2d2d · #6b6b6b · #1e3a27 · #2d4433 · #c9d1c5 · #D4663A · #c0392b · #1e7a45 · #5be8a0

Signature primitives
PaperGridScaleBlurTextGreenCardCardSpringGreenAccentCardPaperShadow
Presets
justdropopusdesignreeldevini3d

Skill or SaaS launch with editorial mood. Thesis-driven long-form. Magazine aesthetic.

Dark Cinematic

/reelstack-dark
Brutalist Tactical + General·8 reference reels·8 presets

Late-night ad-film — zinc void, drifting spotlights, multi-brand accents permitted. The only family without an accent allowlist (multi-brand by design).

Palette
bg · #0a0a0bfg · #f5f5f7fgSoft · #d1d1d6fgMuted · #8e8e93claude · #D4663Astitch · #ff4d9bgemini · #4285f4notebookBlue · #4F7DF3safe · #4fc46adanger · #e25822amber · #fcbb00
Allowed accents

Multi-brand exception — no accent allowlist enforced

Signature primitives
DriftingSpotlightsRadialVignetteSegmentOpacityCrossfadeForestCardGridBackground
Presets
stitchstitch2codedropclaudedispatchnotebooklmgpt55resourcesctaskills

Partnership reveals. Integration showcases. Insider/secret drops. Dev-tool launches with multi-brand cohabitation.

Warm Signature

/reelstack-warm
Minimalist + Soft·2 reference reels·2 presets

Confident product launch — strict single-accent rule. Amber primary, emerald payoff, red wall. Bento grids for feature matrices.

Palette
bg · #09090bsurfaceWarm · #1a1610fg · #fafafaamber · #f99c00amberSoft · #fcbb00amberDeep · #9a5e00emerald · #00d294red · #ef4444claudeWarm · #d4663a
Allowed accents

#f99c00 · #fcbb00 · #9a5e00 · #00d294 · #5ee9b5 · #00875a · #ef4444 · #fca5a5 · #7f1d1d · #d4663a

Signature primitives
AccentGlowFilmGrainBentoCellBentoGridWarmSurfaceScaleBlurCounter
Presets
huashumempalace

Confident brand launch. Single-accent typographic discipline. Feature matrix showcase via bento grid. Memory/learning narrative.

Forbidden

/reelstack-forbidden
Brutalist Swiss Industrial·1 reference reel·1 preset

Declassified document — cream-rose paper, ember/crimson/ultraviolet/plasma. Desaturated, mysterious, slightly off-kilter. Tinted shadows (rose-purple, never pure black).

Palette
bg · #F2EBE5ink · #0E0B12ember · #D97757crimson · #C4506Bultraviolet · #6B5BD9plasma · #A87FE8
Allowed accents

#0E0B12 · #D97757 · #C4506B · #6B5BD9 · #A87FE8

Signature primitives
ForbiddenCausticBlobsTintedShadowHairlineGridGlassCardEyebrowPillStaggeredWordsSonarRingsParticleBurstFloatingGlyphs
Presets
heretic

Mysterious reveal. Open-source rebellion. Censorship-strip narrative. Unconventional tool drops.

04 · The 22-preset catalog

Every preset, every frame count, every BEAT.

Every preset is modeled on a real Devini Labs reel that was already in production. Frame counts, hook copy, BEAT structures, and primitive composition are copied verbatim from the source reel — what changes between your scaffolded copy and the reference is the audio + on-screen content, not the timing or motion.

PresetSource reelFramesSecHookBest forSignature
graphify
glassref
GraphifyReel1,95665.2Multimodal Claude understands the whole web. Graph everything.Default Glass scaffold. Multimodal product reveal.Layered SonarRings + ParticleBurst at reveal beat
paperclip
glassref
PaperclipReel1,65055.0It's called Paperclip. It's not OpenAI, it's not Google. MIT licensed, open source.Open-source MIT product launch.Dash-offset PaperclipGlyph reveal
gstack
glass
GstackReel2,82094.0The president of YC just open-sourced his entire Claude Code setup. It's called gstack.Long-form open-source toolkit launch.Heavy GlassCard variant for feature callouts
lilagents
glass
LilAgentsReel2,16072.0Tiny Claude agents walk on your dock. Bruce and Jazz. Local, no signup.Character-driven mascot reveal. Local privacy-first tool.ThoughtBubble sine-path floats over DockSurface
jcode
glass
JcodeReel2,16472.163 times faster than Codex. Jcode rebuilt in Rust. Parallel swarms.Performance-claim narrative. Rust rebuild reveal.ScrambleText benchmark counter + persistent FilmGrain
claudewatch
glassref
ClaudeWatchReel3,156105.2This custom Claude skill literally watches video.Long-form skill drop with technical breakdown.FrameStrip flipbook + IridescentRing reveal
claudewatchcta
glass
ClaudeWatchCTAReel2408.0Claude Watches Video.8-second outro / standalone teaser.Compressed concurrent motion in 8s
justdrop
paperref
JustDropReel1,76058.7Using Claude Code and missing the point.Skill ecosystem launch. 'Missing the point' reframe narrative.GreenAccentCard with spring damping 20
opus
paperref
OpusReel3,330111.0Opus 4.7 just dropped.Long-form thesis-driven essay reel. Model launch.ScreenshotFade five-stack with 12/18 fade rhythm
designreel
paperref
DesignReel30010.0Describe it. Get it.10-second tagline-driven design tool teaser.Compressed 4s/3s/3s rhythm
devini3d
paper
Devini3DReel1,17039.0Built a 3D website in an hour.Clip-driven case study. Pipeline reveal.OffthreadVideoLetterbox + 15-frame crossfade to motion-graphics close
stitch
darkref
StitchReel2,29776.6Stitch connects your entire Claude workflow.Multi-brand workflow showcase. Agent unlock narrative.PaletteChips legend in demo scene
stitch2
dark
Stitch2Reel60020.0Stitch.20-second clip-led teaser.Title lift over letterboxed hero video
codedrop
dark
CodeDropReel1,11037.0Claude Code just dropped.Screen-rec overlay format. 30–40s tutorial reel.Minimal overlayWindow opening for screen rec
claudedispatch
darkref
ClaudeDispatchReel2,22074.099% of Claude users don't know this exists.Insider/secret reveal. Dispatch workflow showcase.ForestCard frames around screenshots
notebooklm
darkref
NotebookLMReel1,68056.0Gave Claude infinite memory for zero tokens.Integration reveal. Memory/RAG narrative.GlowingUnderline + NotebookLM blue accent
gpt55
dark
GPT55Reel2,90096.7GPT 5.5 just dropped. It's a half-step.Long-form competitive thesis. Half-step narrative.BenchmarkScreenshot with multi-brand accent compartmentalization
resourcescta
dark
ResourcesCTAReel2107.0Comment AI for resources.7-second outro / footer CTA.Concurrent 3-layer motion in 7s
skills
dark
SkillsReel1,26042.0AI superpowers live in the skills, not the model.Bento-grid feature/category showcase.BentoGrid with 4-frame stagger
huashu
warmref
HuashuReel2,98499.5Never hit Claude Design limits again.Confident product/skill drop. Single-accent discipline.AccentGlow + amber/emerald/red discipline
mempalace
warmref
MemPalaceReel2,52084.0Gone. Mem0 decides for you.Memory/learning narrative with parchment-gold variant.ParchmentTexture + PalaceRoom
heretic
forbiddenref
HereticReel1,63954.6Strip the censorship right out of any open source AI.Mysterious/forbidden product reveal. Censorship-strip narrative.ForbiddenCausticBlobs + TintedShadow

Click any row to expand its BEAT keys, primitives, and notes. For full per-preset metadata + family palette, see docs/family-galleries/<family>.md.

05 · The 13 slash commands

Thin wrappers. Fast loops.

Each slash command composes context (palette, primitives, reference reel) and shells out to a CLI subcommand. The CLI is the work-horse; the slash commands are the conversation.

/reelstack-init

First-time setup. Verifies the license, checks Node 20+ / ffmpeg / whisper-cpp dependencies, scaffolds ~/.reelstack/, installs the skill, and creates a Demo.tsx so the buyer sees a working reel within 5 minutes.

Internally
npx @devinilabs/reelstack init
Example
/reelstack-init
Common follow-ups
/reelstack-direction/reelstack-glass/reelstack-paper
/reelstack-direction

Design Direction Advisor. When your brief is vague, this returns 3 differentiated family picks with mood, best-for examples, and presets — useful when you don't know which family fits the reel you want to build.

Required
"<brief>" (one-sentence description of the reel)
Internally
npx reelstack direction "<brief>"
Example
/reelstack-direction "Launching a privacy-first local AI tool for indie devs"
Common follow-ups
/reelstack-glass/reelstack-dark/reelstack-warm
/reelstack-glass

Scaffold a Glass Iridescent 9:16 reel. Light lavender + iridescent caustics, sonar rings, glass cards, floating glyphs. Default family for premium product reveals.

Optional flags
--preset=<key>graphify (default) | paperclip | gstack | lilagents | jcode | claudewatch | claudewatchcta
--name=<MyReel>Composition name written to src/<Name>.tsx
--vo=<path.wav>Voiceover wav for audio-locking
--reference=<preset>Override which reference reel Claude studies during iteration
Internally
npx reelstack scaffold --family=glass --preset=<preset> --name=<Name> [--vo=<path>]
Example
/reelstack-glass --preset=graphify --name=ProductLaunchReel --vo=public/audio/launch-vo.wav
Common follow-ups
/reelstack-beats/reelstack-capture/reelstack-lint
/reelstack-paper

Scaffold a Cream Paper 9:16 reel. Warm cream paper, dark-green cards, Claude terracotta accent, editorial print mood.

Optional flags
--preset=<key>justdrop (default) | opus | designreel | devini3d
--name=<MyReel>Composition name
--vo=<path.wav>Voiceover wav
Internally
npx reelstack scaffold --family=paper --preset=<preset> --name=<Name> [--vo=<path>]
Example
/reelstack-paper --preset=opus --name=OpusThesisReel --vo=public/audio/opus.wav
Common follow-ups
/reelstack-capture/reelstack-beats/reelstack-lint
/reelstack-dark

Scaffold a Dark Cinematic 9:16 reel. Zinc void + drifting spotlights + Claude terracotta + multi-brand accents. Premium ad-film mood.

Optional flags
--preset=<key>claudedispatch (default) | stitch | stitch2 | codedrop | notebooklm | gpt55 | resourcescta | skills
--name=<MyReel>Composition name
--vo=<path.wav>Voiceover wav
Internally
npx reelstack scaffold --family=dark --preset=<preset> --name=<Name> [--vo=<path>]
Example
/reelstack-dark --preset=notebooklm --name=NotebookIntegrationReel --vo=public/audio/notebook.wav
Common follow-ups
/reelstack-capture/reelstack-icons/reelstack-render
/reelstack-warm

Scaffold a Warm Signature 9:16 reel. Warm zinc + amber signature + emerald payoff + bento grids. Strict single-accent rule (one primary, one payoff, one negative).

Optional flags
--preset=<key>huashu (default) | mempalace
--name=<MyReel>Composition name
--vo=<path.wav>Voiceover wav
Internally
npx reelstack scaffold --family=warm --preset=<preset> --name=<Name> [--vo=<path>]
Example
/reelstack-warm --preset=huashu --name=HuashuLaunchReel --vo=public/audio/huashu.wav
Common follow-ups
/reelstack-icons/reelstack-lint/reelstack-critique
/reelstack-forbidden

Scaffold a Forbidden 9:16 reel. Cream-rose paper + ember + crimson + ultraviolet + plasma. Desaturated, mysterious, slightly off-kilter.

Optional flags
--preset=hereticOnly preset currently available
--name=<MyReel>Composition name
--vo=<path.wav>Voiceover wav
Internally
npx reelstack scaffold --family=forbidden --preset=heretic --name=<Name> [--vo=<path>]
Example
/reelstack-forbidden --preset=heretic --name=HereticReel --vo=public/audio/heretic.wav
Common follow-ups
/reelstack-beats/reelstack-lint/reelstack-render
/reelstack-beats

Convert a voiceover .wav into frame-accurate BEAT constants. Resamples to 16 kHz mono via ffmpeg, runs whisper-cli, parses the SRT output, emits a TypeScript const block keyed by phrase → frame number.

Required
<voiceover.wav>
Optional flags
--name=<varName>Override the const variable name (default: BEATS)
Internally
npx reelstack beats <path/to/vo.wav>
Example
/reelstack-beats public/audio/launch-vo.wav
Common follow-ups
/reelstack-lint/reelstack-critique/reelstack-render
/reelstack-capture

Capture product screenshots or scroll-recordings from a URL into public/captures/<slug>/. Validates the URL, drives chrome-devtools MCP via the user's reel-capture skill, saves assets with conventional names (hero.png for stills, frame_0001.png for scroll).

Required
<url>
Optional flags
--scrollRecord a scroll-through frame sequence instead of a still
--name=<slug>Override the public/captures/<slug>/ dir name
Internally
npx reelstack capture <url> [--scroll] [--name=<slug>]
Example
/reelstack-capture https://anthropic.com/news/claude-4-7 --name=claude47launch
Common follow-ups
/reelstack-icons/reelstack-lint/reelstack-render
/reelstack-icons

Pull real brand SVGs from Iconify into public/icons/. Wraps better-icons CLI. Common brand IDs: logos:react, logos:next-js, logos:google, logos:openai, logos:anthropic-icon, logos:github-icon, logos:remotion, logos:typescript-icon.

Required
<brand> [<brand2> …] (repeatable)
Internally
npx reelstack icons <brand> [<brand2> …]
Example
/reelstack-icons react next-js google openai
Common follow-ups
/reelstack-lint/reelstack-critique/reelstack-render
/reelstack-lint

Validate a reel against ReelStack house rules — motion floors, IG safe zones, hero-text fit, audio lock, brand discipline. Surfaces violation list with line numbers.

Required
<src/MyReel.tsx>
Internally
npx reelstack lint <file>
Example
/reelstack-lint src/ProductLaunchReel.tsx
Common follow-ups
/reelstack-critique/reelstack-render/reelstack-beats
/reelstack-critique

Run a 5-dimension expert critique — palette · motion · timing · hierarchy · brand fit. Outputs a radar score (0–10 each) plus a Keep/Fix/Quick punch list. Use after /reelstack-lint passes when you want a deeper qualitative review.

Required
<src/MyReel.tsx>
Internally
npx reelstack lint <file> --critique
Example
/reelstack-critique src/ProductLaunchReel.tsx
Common follow-ups
/reelstack-render/reelstack-beats/reelstack-capture
/reelstack-render

Render a reel composition with platform-optimal flags (1080×1920 H.264, 8 Mbps for IG/TikTok, 9 Mbps for Shorts). Lints first; aborts on safe-zone or motion-floor violations unless --force is passed.

Required
<comp-id>
Optional flags
--platform=<name>ig (default) | tiktok | shorts
--out=<path>Override output path
--forceSkip pre-render lint failures and smoke check
--format=<list>mp4 (default) | gif — comma-separated for both
--bgm=<path.mp3>Background music file (mixed at -14 LUFS-ish)
--interpolate=<fps>Override composition fps
--palette-optimizeQuantize GIF to 64 colors (default 256)
Internally
npx reelstack render <comp-id> [--platform=<name>] [--out=<path>]
Example
/reelstack-render ProductLaunchReel --platform=ig
Common follow-ups
/reelstack-render/reelstack-render/reelstack-render
06 · End-to-end workflow

From license to MP4 in five steps.

The graphify preset is the default scaffold; the same loop applies to any family/preset combo. Audio file goes in public/audio/; captures in public/captures/; icons in public/icons/; rendered MP4s in ./out/.

Step 01Buy + install

We email your license key (UUID) right after Razorpay confirms the payment. v1.2+ init runs a 4-tier readiness gate: (1) Node 20+ hard check, (2) ffmpeg + whisper-cpp — auto-install on macOS+Homebrew, print platform-specific commands on Linux (apt/dnf/pacman) or Windows (choco/scoop), (3) Remotion project bootstrap via npx create-video if missing, (4) smoke test that scaffolds a Demo and proves Remotion + ffmpeg actually load. The success banner is provable — every /reelstack-* command works after exit 0, or init exits non-zero with a clear remediation.

npx @devinilabs/reelstack init

Step 02Scaffold a reel

One slash command. Pick a family + preset + name + voiceover. The skill copies the preset template into ./src/<Name>.tsx and registers it in src/Root.tsx.

/reelstack-glass --preset=graphify --name=MyReel --vo=public/audio/launch.wav

Step 03Lock motion to voiceover

ffmpeg resamples to 16 kHz mono → whisper-cli transcribes → CLI emits a TypeScript const block keyed by phrase → frame number. Paste it at the top of your reel and replace every Sequence's from prop with BEATS.<key>.

/reelstack-beats public/audio/launch.wav

Step 04Iterate in Remotion Studio

Live preview at http://localhost:3000. Edit src/<Name>.tsx — the studio hot-reloads. The audio file in public/audio/ plays in sync; beats stay locked.

npm run dev

Step 05Lint + render

/reelstack-lint surfaces every house-rule violation with line numbers. Fix until clean, then render the platform variant. The CLI infers the source file from the comp ID, lints first (aborts on safety violations unless --force), runs a 3-frame smoke check, then ships an MP4 ready to post.

/reelstack-lint src/MyReel.tsx
/reelstack-render MyReel --platform=ig
07 · Reference reels (v1.4+ — one per preset)

Twelve production reels, asset-stripped.

Asset-stripped Devini Labs production reels at ~/.reelstack/reference/<family>/<preset>.tsx. Their job is to give Claude — your Claude, not Anthropic's — studyable, complete examples of how each preset's primitives compose at production quality. Originals are not redistributed; the .tsx files ship intact but their imported assets (videos, captures, audio) are stripped.

FamilyReference reelsCount
Glass Iridescent
graphifypaperclipgstacklilagentsjcodeclaudewatchclaudewatchcta
7
Cream Paper
justdropopusdesignreeldevini3d
4
Dark Cinematic
stitchstitch2codedropclaudedispatchnotebooklmgpt55resourcesctaskills
8
Warm Signature
huashumempalace
2
Forbidden
heretic
1
Total22
Coverage gap

0 of the 22 presets currently ship without a reference reel — they fall back to inline scaffolding only:

    v1.x updates may add more — your purchase covers all of them.

    How Claude uses them

    When you scaffold a preset that has a reference, the slash command also reads reference/<family>/<preset>.tsx — so it can cite specific scenes during iteration ("the SonarRings stack at frame 240 in graphify"), not just file names.

    Override with --reference

    Want Claude to model a different preset's motion language? Pass --reference=<preset> when scaffolding. Useful when the scaffolded preset's reference is missing or doesn't capture the energy you want.

    License terms (excerpt)
    • Study + adapt patterns — OK.
    • Copy short excerpts (single scene, motion combination, transition recipe) into your own reel — OK.
    • Verbatim re-publication of a reference reel as your own — NOT OK.
    • Removing REFERENCE-STRIP markers and reselling as a paid template — NOT OK.
    08 · Audio-locking pipeline

    Eyeballs drift. Frames don't.

    Eyeballed beats drift 6+ seconds on a 90-second voiceover. The motion gets ahead of the audio (or behind), and every cut feels off. The /reelstack-beats command exists to make eyeballing impossible.

    01

    Input WAV

    Place your voiceover in public/audio/. The CLI accepts mono or stereo at any sample rate — ffmpeg normalizes it next.

    02

    ffmpeg resample

    16 kHz mono PCM. Whisper's required input shape.

    ffmpeg -i your-vo.wav -ar 16000 -ac 1 -c:a pcm_s16le tmp/vo-16k.wav
    03

    whisper-cli → SRT

    base.en model transcribes with frame-level timestamps. SRT segments map cleanly to BEAT keys.

    whisper-cli -m models/ggml-base.en.bin -f tmp/vo-16k.wav --output-srt -of tmp/vo
    04

    BEATS const

    The CLI parses the SRT, picks the most natural cut points, emits a TypeScript const block. Paste it at the top of your reel.

    Live waveform · whisper-cpp transcribing
    Example output · graphify BEATS
    const BEATS = {
      intro: 0,
      hookEnd: 180,
      problem: 540,
      revealName: 720,
      mechanism: 1020,
      clip: 1320,
      numbers: 1500,
      multimodal: 1680,
      compat: 1830,
      cta: 1860,
    };
    Wiring beats into a Sequence
    <Sequence
      from={BEATS.problem}
      durationInFrames={BEATS.revealName - BEATS.problem}
    >
      <ProblemScene />
    </Sequence>
    Three things to know
    • Whisper base.en mishears tech terms ("Claude" → "Cloud", "Remotion" → "Re-motion"). Use timings frame-for-frame; copy on-screen text from your script, not from the SRT.
    • Re-run /reelstack-beats after re-recording — beats from the old voiceover won't match a new take.
    • The audio file goes in ./public/audio/, never ./src/.
    09 · Design discipline

    Where the family DNAs live.

    Eleven master rules apply to every reel in every family. Each family adds a variant overlay on top — the per-family typographic and motion-vocabulary tax.

    7 master rules
    • Max one accent per family at <80% saturation (Dark exception)
    • Hardware-accel animation (transform + opacity only; lint-enforced as NON_HW_ACCEL_PROP)
    • Spring-physics defaults via utils/easing.ts
    • Complete-output discipline (no truncation in scaffolds)
    • Anti-generic placeholder copy
    • prefers-reduced-motion parity on every motion component
    • 4-px grid alignment on padding/margin/gap
    Per-family variant overlays
    FamilyVariant overlayConcrete additions
    Glass IridescentSoft + General<GlassCardBezel /> · soft cubic-bezier easings (softInOut / softElastic / softSnappy) · diffused multi-layer shadow stack via bezel prop
    Cream PaperMinimalist + Soft<EditorialSerifText /> (Lyon Text → Newsreader → Playfair Display fallback) · generous py-24+ padding · ultra-flat Minimalist card variant
    Dark CinematicBrutalist Tactical + General<Scanlines /> CRT overlay · monospace-dominant micro-typography · hazard-red #E61919 option
    Warm SignatureMinimalist + SoftEditorial-serif optional Warm hero variant · diffused warm shadow stack
    ForbiddenBrutalist Swiss Industrial<NewsprintTexture /> halftone grain · no-border-radius GlassCard variant (radius={0}) · asymmetric negative-space layout
    Variant components
    <GlassCardBezel />
    Glass

    Inner-1px glass border for premium product reveals.

    <Scanlines />
    Dark

    Perpetual-scroll CRT scanline overlay for late-night ad-film mood.

    <NewsprintTexture />
    Forbidden

    Halftone grain on cream-rose paper for declassified-document mood.

    <EditorialSerifText />
    Paper / Warm

    Serif-stack hero text for thesis/essay mood.

    10 · Common recipes

    Real workflows. Real commands.

    Six concrete workflows. Each is a numbered sequence of slash commands and shell snippets — copy-pasteable, no placeholders. Click a title to expand.

    1. Buy your license and run the one-time installer.
      npx @devinilabs/reelstack init
    2. Drop your voiceover into public/audio/ (or use a placeholder for now).
      cp ~/Downloads/launch-vo.wav public/audio/launch.wav
    3. Scaffold the reel from the graphify preset.
      /reelstack-glass --preset=graphify --name=Launch --vo=public/audio/launch.wav
    4. Lock motion to the voiceover. Paste the resulting BEATS const at the top of src/Launch.tsx.
      /reelstack-beats public/audio/launch.wav
    5. Iterate scenes in Remotion Studio at http://localhost:3000.
      npm run dev
    6. Lint until clean. Run /reelstack-critique for a deeper review.
      /reelstack-lint src/Launch.tsx
    7. Render the IG variant (1080×1920, 8 Mbps).
      /reelstack-render Launch --platform=ig
    8. Output: out/Launch-ig.mp4 — ready to post.
    11 · Accessibility

    Low-motion variants render too.

    Every animated component accepts reduceMotion?: boolean (default false). The MISSING_REDUCE_MOTION lint rule enforces this on user-authored components that import useCurrentFrame. Templates read the flag from Remotion's getInputProps() at module load.

    Render a low-motion variant
    npx remotion render MyReel out/MyReel-low-motion.mp4 \
      --props='{"reduceMotion":true}' \
      --width 1080 --height 1920 --codec h264 --crf 18
    Why raw remotion render

    /reelstack-render doesn't currently take --reduce-motion directly; use raw npx remotion render for the low-motion variant. Reels are rendered MP4s, so the runtime can't read prefers-reduced-motion — render both variants and serve the right one based on the consumer's preference (Instagram's app, the user's browser, etc.).

    12 · Mental model

    Two pieces pretending to be one.

    ReelStack is a Claude Code skill ( ~/.claude/skills/reelstack/) that delegates to a Node CLI ( ~/.reelstack/). The skill owns the conversation; the CLI does the work. You interact with the skill; the CLI is invisible until you open out/<Name>-ig.mp4.

    The skill

    Lives at ~/.claude/skills/reelstack/. Owns the conversation. Each /reelstack-* slash command reads the family-gallery doc and the reference reel, then shells out to the CLI.

    The CLI

    Lives at ~/.reelstack/ (and via npx). Owns the work. Scaffolds reels, extracts beats, captures screenshots, fetches icons, lints, critiques, renders.

    The data model

    5 families × 22 presets × 13 slash commands × 14 lint rules × 22 reference reels (one per preset). Pinned to v1.4.0. Every v1.x update auto-flows to existing licenses.

    Data flow · slash command → MP4
       Claude Code chat
    
            │  /reelstack-glass --preset=graphify --name=MyReel
    
       ~/.claude/skills/reelstack/commands/reelstack-glass.md
            │  reads docs/family-galleries/glass.md
            │  reads reference/glass/graphify.tsx (asset-stripped)
            │  shells out:
    
       npx reelstack scaffold --family=glass --preset=graphify --name=MyReel
            │  copies templates/glass/graphify.tsx → ./src/MyReel.tsx
            │  registers in src/Root.tsx
    
       ./MyReel/src/MyReel.tsx                    (your reel — edit freely)
            │  npm run dev
    
       Remotion Studio at http://localhost:3000   (live preview)
            │  /reelstack-render MyReel --platform=ig
    
       ./out/MyReel-ig.mp4                        (1080×1920, 8 Mbps, H.264)
    
    13 · Troubleshooting

    When it doesn't work, here's why.

    Twelve known failure modes plus their fixes. If yours isn't here, email [email protected] with your reel file and the lint output — we'll add it.

    14 · Cheat sheet

    Print this. Keep it next to your monitor.

    Single-screen quick-reference. Cmd+P prints a clean black-on-white layout (animations, sidebar, and chrome are hidden in print).

    All 13 slash commands
    /reelstack-initFirst-time setup: license + dep verify + Demo.tsx scaffold
    /reelstack-direction "<brief>"3 differentiated family picks for a vague brief
    /reelstack-glass [--preset]Scaffold Glass Iridescent reel (7 presets, default graphify)
    /reelstack-paper [--preset]Scaffold Cream Paper reel (4 presets, default justdrop)
    /reelstack-dark [--preset]Scaffold Dark Cinematic reel (8 presets, default claudedispatch)
    /reelstack-warm [--preset]Scaffold Warm Signature reel (2 presets, default huashu)
    /reelstack-forbiddenScaffold Forbidden reel (1 preset: heretic)
    /reelstack-beats <vo.wav>Convert voiceover → BEAT constants via whisper-cli
    /reelstack-capture <url>Capture screenshots / scroll-recordings to public/captures/
    /reelstack-icons <brand>Pull real brand SVG from Iconify to public/icons/
    /reelstack-lint <file>Validate motion floors / safe zones / audio lock / brand discipline
    /reelstack-critique <file>5-dim expert critique (palette · motion · timing · hierarchy · brand fit)
    /reelstack-render <id> [--platform]Render with platform-optimal flags (ig=8M / tiktok=8M / shorts=9M)
    The 5 families
    /reelstack-glass
    Glass Iridescent
    Default. Premium product/SaaS reveal. Multimodal demos.
    /reelstack-paper
    Cream Paper
    Editorial print mood. Thesis/essay narratives. Skill drops.
    /reelstack-dark
    Dark Cinematic
    Late-night ad-film. Multi-brand partnerships. Integration reveals.
    /reelstack-warm
    Warm Signature
    Confident product launch. Single-accent (amber). Bento grids.
    /reelstack-forbidden
    Forbidden
    Mysterious / declassified reveals. Off-kilter open-source.
    18 · End of doc

    That's everything. The rest is muscle memory.

    Five families. Twenty-two presets. Thirteen slash commands. Sixteen lint rules. Twelve reference reels. One slash command to your next reel.

    Back to landing

    v1.1.1-rc.1 · Premium 9:16 Reel OS for Remotion