Cinemorph

A Claude Code plugin that turns a brief into a cinematic launch video, an investor pitch deck, or a feature walkthrough — with live FLIP morph transitions, audio bus, scene SFX, and a dev scrubber wired the first time.

_{↑ 30-second product film generated by /cinemorph new --from-example launch-cinematic-30s. Click to play the full MP4.}

Quick start · Commands · How it works · Examples · GitHub Pages site

---

What is this

Cinemorph is a Claude Code plugin (/cinemorph) that composes a Vite + React deck where persistent elements morph cleanly between stages via Framer Motion's shared-layout (LayoutGroup + layoutId) FLIP transitions. The deck is the artifact: run it live in Chrome, click through with arrow keys, or export to one of three production targets.

Output	What it produces	When to use
Live React deck	Vite dev server, hot reload, ?dev=1 timeline scrubber	The projector. Pitches, demos, all-hands.
MP4 (Playwright + ffmpeg)	30-second to 5-minute cinematic film with audio bus, voiceover, SFX, smear cuts	Launch trailers, social, embeddable on a landing page.
PPTX with native Morph	Editable PowerPoint with Microsoft Morph transitions between slides	Stakeholder handoff to teams that don't ship from a browser.

Everything you see in the hero film above is one stages.ts + one data.ts plus a primitive registry. The composer wrote both files, the scaffold rendered them, Playwright recorded the result, and ffmpeg muxed the audio bed + voiceover + SFX cues.

---

Quick start

# 1. Install the plugin into Claude Code
git clone https://github.com/LucasDuys/cinemorph.git
cp -r cinemorph/plugin ~/.claude/plugins/cinemorph

# 2. Restart Claude Code, then in a chat:
/cinemorph new --from-example launch-cinematic-30s --out my-launch-video

# 3. Run it
cd my-launch-video
bun install && bun run dev   # → http://localhost:5173
#                              ?dev=1 for the timeline scrubber

Three more things you can do in one command:

# Investor pitch from a brief
/cinemorph new --theme stacklink-dark --prompt "Series A pitch: problem, solution, traction, team, ask"

# Feature walkthrough from a starter
/cinemorph new --from-example feature-demo --out ./changelog-q2

# Export the active deck to MP4 + PPTX + speaker notes
/cinemorph export --all

Auth. Cinemorph spawns the claude CLI binary on your PATH and uses your Claude Code subscription. No ANTHROPIC_API_KEY needed.

---

What it produces

A 30-second cinematic launch film

One master RAF clock drives every animation. Phases are non-overlapping windows with 350 ms cross-fade smear cuts at boundaries. The audio bus mixes a music bed, a voiceover, and a curated SFX library. Whooshes ride only real scene transitions; tiles bounce in with aeBounce easing.

00:01 Logo pop	00:08 Hyper-zoom + sources	00:13 "every tool. one brain."

00:18 Onboarding card lands	00:22 Agent constellation	00:28 Outro + URL chime

▶ Watch the full 30s MP4 (14 MB, 4K source · 3840×2160 @ 30fps)

A 5-slide investor pitch deck

The stacklink-roundone-pitch example renders five click-through stages with shared-layout morphs. Same engine, different example. Bundle is identical: stages.ts + data.ts + tokens.ts.

1. Hook	2. Problem	3. Solution

4. Differentiation	5. Team & Ask

---

Commands

Command	What it does
/cinemorph new "<brief>" [flags]	Generate a fresh deck. Asks clarifying questions when inputs are insufficient.
/cinemorph iterate "<change>"	Modify the active deck (last-touched in cwd or --deck <path>).
/cinemorph render	Open the live deck via bun run dev.
/cinemorph pptx	Export to dist/<name>.pptx with native PowerPoint Morph transitions.
/cinemorph video	Export to dist/<name>.mp4 via headless Playwright recording + ffmpeg mux.
/cinemorph export --all	Run pptx + video + notes.md in one shot.
/cinemorph reference add <path> --name <name>	Register an existing deck as a style reference.

/morph-deck continues to work as a v1.0 alias.

Flags for /cinemorph new

--from-example <name>      Start from a bundled deck (see Examples)
--theme <name>             stacklink-dark | bunq-mint-light | linear-light | minimal-mono | playful-poster
--tokens <path>            Load tokens.json or DESIGN.md
--reference <image>        Extract a 5-color palette from a screenshot
--prompt "<text>"          Free-form brief or style description
--out <path>               Where to write the new deck (default: ./<slug>)

Inputs apply in priority order — --theme < --tokens < --reference < --prompt. Later layers win on fields they provide. Missing fields trigger a clarifying question (the composer asks instead of guessing).

---

How it works

brief + flags
     │
     ▼
 ┌───────────────┐
 │ token merger  │  --theme  --tokens  --reference  --prompt   (priority order)
 └──────┬────────┘
        │ tokens.ts
        ▼
 ┌───────────────────────┐
 │ composer (Claude CLI) │  emits stages.ts + data.ts as JSON
 └──────┬────────────────┘
        │
        ▼
 ┌───────────────────────────────────────────┐
 │ scaffold renderer                         │
 │   Vite + React 18 + Tailwind + motion/react│
 └──────┬────────────────────────────────────┘
        │
        ▼
 ┌──────────────────────────────────────────────────────────────┐
 │ live deck   →   PPTX with Morph   →   MP4 (Playwright+ffmpeg) │
 └──────────────────────────────────────────────────────────────┘

The morph engine, in 60 seconds

A <LayoutGroup> from motion/react wraps every persistent element on the canvas. Each primitive (wordmark, search bar, kpi tile, connector chip, agent card, …) carries a stable layoutId across stages. Framer Motion's shared-layout (FLIP) algorithm computes the layout-to-layout delta automatically — no keyframes, no per-property animate props, no easing math.

// stages.ts (excerpt — written by the composer)
export const STAGES: Stage[] = [
  {
    id: 'hook',
    elements: {
      wordmark: { pos: { left: '50%', top: '50%', width: '20%' }, shape: 'wordmark' },
      slack:    { pos: { left: '12%', top: '24%' }, shape: 'connectorChip' },
      drive:    { pos: { left: '88%', top: '24%' }, shape: 'connectorChip' },
    },
  },
  {
    id: 'reveal',
    elements: {
      wordmark: { pos: { left: '50%', top: '14%', width: '12%' }, shape: 'wordmark' },
      slack:    { pos: { left: '20%', top: '60%' }, shape: 'connectorChip' },
      drive:    { pos: { left: '80%', top: '60%' }, shape: 'connectorChip' },
      cylinder: { pos: { left: '50%', top: '50%' }, shape: 'cylinder' },
    },
  },
];

When the deck advances from hook → reveal, the wordmark shrinks and slides to the top. The Slack and Drive chips drift outward and down. The cylinder fades in. All in one synchronized 700 ms transition. No code per element.

Cinematic-launch-video lessons baked in

For 30-second-style films, the composer enforces the principles in plugin/docs/cinematic-launch-video-lessons.md. Every rule there was earned by shipping the hero film above and getting each detail wrong before getting it right:

• One master RAF clock writes a single elapsedMs. Phases are non-overlapping windows; 350 ms cross-fade smear cuts at boundaries.
• aeBounce easing for any element that lands with weight (Dan Ebberts' AE bounce ported to TypeScript).
• Whooshes go on real scene transitions only — never internal animation events. They lead the visual by 300–500 ms so the sweep + the new scene's snap reads as one cinematic cut.
• Audio-bus race-condition fix is mandatory. A stoppedSfxRef: Set<number> ensures each cue's stopAtMs runs exactly once. Without it, when multiple cues share an audio file via the pool, the first cue's stop check re-fires every frame and pauses every later cue. This was the single most painful bug in the build.
• Browser autoplay gate — minimal transparent click area + 64 px play icon. Pre-warm the SFX pool on first interaction.
• ffmpeg -ss seek-mode trap — input-seek (-ss before -i) when trimming with afade; output-seek can produce silent files that pass duration checks.
• Volume hierarchy — music 0.20–0.25 baseline, ducks to 0.05–0.08 under VO; whooshes 0.30–0.40; POPs 0.70–0.80; BLIPs 0.30–0.45 tapered; VO 0.85–0.95.
• Dev scrubber on ?dev=1 so a reviewer can give you precise timestamp feedback during iteration.

---

Bundled examples

Generate any of these with /cinemorph new --from-example <name>:

Example	Description
launch-cinematic-30s	The canonical 30-second film shown above. RAF-clock driven, audio bus wired, dev scrubber, autoplay gate.
stacklink-roundone-pitch	The 5-slide investor pitch shown above.
pitch-5slide	Generic investor deck (Problem, Solution, Traction, Team, Ask).
feature-demo	4–6-slide feature walkthrough.
kpi-dashboard-tour	Live-data dashboard tour with morphing kpi tiles.
case-study	Customer success story format.
manifesto	Vision / principles statement deck.
team-intro	Team introduction with morphing pillar cards.
release-notes	Engineering release-notes deck.
roadmap	Quarterly roadmap with morphing milestone tiles.
retro-storyboard	Retrospective / post-mortem storyboard.
custom-element	Reference for adding your own primitive.

Each example ships its own README.md, brief.md, stages.ts, data.ts, and tokens.ts — read them as documentation by example.

---

Customizing the look

Five built-in themes cover most needs:

Theme	Mood
stacklink-dark	Near-black canvas, monochromatic, EU-enterprise restraint
bunq-mint-light	Mint green + white, fintech, modern
linear-light	Slate + blue, minimal, technical
minimal-mono	Black + white + grays, typographic, editorial
playful-poster	Vibrant multi-color, creative, event-driven

Override with your own tokens:

/cinemorph new --tokens ./my-tokens.json --prompt "Q1 product all-hands"

// my-tokens.json
{
  "background": "#09090F",
  "foreground": "#FAFAFA",
  "mutedForeground": "#A1A1AA",
  "border": "#27272A",
  "fontDisplay": "Space Grotesk, Inter, sans-serif",
  "fontBody": "Inter, sans-serif",
  "fontMono": "JetBrains Mono, monospace"
}

Or extract a palette from a brand screenshot:

/cinemorph new --reference ./brand-screenshot.png --prompt "Series B pitch"

---

Sixteen built-in primitives

Wordmark · KPI · Pillar · Quote · ConnectorChip (Slack, GitHub, Notion, Linear, Confluence, Jira, OneDrive, Teams, Salesforce, Drive) · Card · Logo · Image · Diagram · Icon · Chart · MorphChart · OrbitGroup · PipelineGroup · FooterStrip · StatGroup

Adding your own

Drop a .tsx into src/deck/elements/custom/:

// src/deck/elements/custom/MyChart.tsx — file name auto-derives the id `myChart`
export default function MyChart({ data }: { data: number[] }) { /* ... */ }

Use it in stages.ts:

elements: {
  myChart: { pos: { left: '10%', top: '10%', width: '60%', height: '40%' }, shape: 'chart' }
}

See plugin/examples/custom-element/ for the full pattern.

---

Repository layout

cinemorph/
├── plugin/                            # The installed Claude plugin
│   ├── plugin.json                    # Manifest (name, version, entry command)
│   ├── README.md                      # Plugin-internal docs
│   ├── skills/cinemorph/SKILL.md      # Skill definition
│   ├── commands/                      # /cinemorph slash command surfaces
│   ├── agents/morph-composer.md       # Composer system prompt
│   ├── docs/
│   │   ├── cinematic-launch-video-lessons.md   # Canonical reference for video output
│   │   └── composer-live.md
│   ├── examples/                      # 12 starter decks (--from-example sources)
│   ├── scripts/                       # Router, composer harness, exporters, verifier
│   ├── primitives/                    # 16 built-in shape components
│   └── themes/                        # 5 bundled theme JSON files
├── scaffold-template/                 # What `new` clones into your output directory
├── assets/demos/                      # README hero (video, gif, storyboard)
└── site/                              # GitHub Pages source (built into docs/)

---

Testing

bun test               # all plugin + scaffold tests
bun test plugin        # plugin only

Acceptance test against the bundled stacklink reference: plugin/scripts/__tests__/acceptance-stacklink.test.cjs.

---

Inspirations

• The dnyxstudios product-film aesthetic (single-canvas continuous morph, smear cuts, AE inertial overshoot).
• Linear / Arc browser launch films (restrained sans-serif, clicky percussion, 90–110 BPM beds).
• Apple keynote intros (silent open, breath before voice).
• The Y Combinator "company brain" framing (Tom Blomfield, 2026) — the use case that drove the hero film.

---

License

MIT. See LICENSE.