vibe coding your marketing
i shipped a product demo reel in 4 hours using just React and Claude.
no editor. no After Effects. no designer. just Remotion — a library that turns React components into MP4s.
below is the vibe: the mental model, the prompts i gave Claude, and why this approach kills traditional video editing.
what you need
how remotion works
every frame is a React component. you get useCurrentFrame() which tells you what frame you're on (0 to totalFrames).
you build animations like you build UI — state, props, CSS. then export to MP4 with one CLI command.
frame number in, pixels out.
no timelines. no keyframes. no GUI. just code.
the three primitives you'll use 95% of the time:
1. interpolate — map frame range to value range (fade-ins, scale, movement)
2. spring — physics-based motion (bouncy, natural feel, no easing math)
3. AbsoluteFill — full-frame wrapper (every scene starts here)
that's it. memorize those three and you can animate anything.
vibe coding the reel with claude
here's the actual workflow i used:
1 — set up constants (FPS, brand colors, scene durations)
2 — prompt Claude scene by scene
3 — wire scenes together with TransitionSeries
4 — npx remotion render → done
the key to getting Claude to write working Remotion components:
be specific about canvas size, brand colors, and that everything is code-drawn (no images).
here's the exact prompts i used:
prompt 01 — scene scaffoldI'm building a Remotion scene in TypeScript/React. Canvas: 1080x1920 (9:16 portrait), 30fps. Brand: bg #050505, primary #F97316, text #F5F5F5. Build a scene called [SceneName] that shows [description]. Use useCurrentFrame(), spring(), and interpolate(). All content code-drawn — no images. Export as: export const [SceneName]: React.FC = () => {}
The [element] appears too early/late. It should [desired behaviour] starting at frame [X]. Only change animation timing — leave everything else.
Build a Remotion scene for a [product type] reel. Goal: communicate [core message] in [X] seconds. Style: dark bg (#050505), orange accent (#F97316). Include: [element 1], [element 2], [element 3]. Animate sequentially with spring physics. No images. Pure React/CSS.
Convert this scene from 1920x1080 landscape to 1080x1920 portrait. Stack side-by-side layouts vertically. Scale widths to fit 1080px. Keep all animation logic — only change layout.
paste these, adjust the [placeholders], and Claude builds the scene.
why this kills traditional editing
if you're vibe coding your product, you should vibe code your marketing too.
Remotion has a 30-minute learning curve. once it clicks, you can ship demo reels in an afternoon.
the comparison:
Old way: £2K, 2-week turnaround, 3 revision rounds
New way: £0, 4 hours, unlimited revisions (just change code)
no timeline scrubbing. no keyframe panels. no invoices. just code, preview, ship.
and here's the overlay trick nobody talks about:
render a scene with a transparent background, import the MP4 into CapCut, layer it over face-cam footage. instant graphics overlays without touching After Effects.
how to render
that's it. no 50-step tutorial. no massive code blocks. just the vibe.
the formula:
define scenes → prompt Claude → wire transitions → render
you're shipping product demos the same afternoon you decide you need one.