Build a Premium Remotion Advertising Video Toolkit
Create a configurable, brand-neutral Remotion toolkit for deterministic premium advertising videos, with reusable components, vertical and square scene templates, a rendered demo, and project rules.
By Threads — Published on
Example results
Prompt template
Build a reusable toolkit for premium advertising videos in Remotion (React → MP4). The videos must not be tied to a specific brand. Create a configurable design system so I can supply my own colors, fonts, and logo.
## Stack
Use:
- `remotion`, `@remotion/cli`, `react`, `react-dom`, and `typescript`
- `@remotion/transitions`, `@remotion/paths`, `@remotion/shapes`, `@remotion/noise`, `@remotion/motion-blur`, `@remotion/layout-utils`, `@remotion/animation-utils`, `@remotion/google-fonts`, and `@remotion/fonts`
- `lucide-react`, `react-icons`, and `@phosphor-icons/react` for icons
- `motion` (motion.dev) only for easing mathematics, not DOM animation
Pin every `@remotion/*` package to the version of the Remotion core package.
## Deterministic rendering requirements
All animation must be driven by `useCurrentFrame()` and `interpolate()` or `spring()`. Do not use CSS transitions or `@keyframes`, `requestAnimationFrame`, `<motion.div animate>`, `Math.random()`, or `Date.now()`; these can freeze or flicker in headless rendering. For randomness, use seeded random values or `noise2D`.
Implement only custom premium dissolves in `src/transitions/premium.tsx`:
- `blurFade` (defocus)
- `scaleThrough` (entering from depth)
- `maskReveal` (a circular clip-path reveal from a point)
- `glowDissolve`
Do not use slide, wipe, clock-wipe, page-turn, flip, or cube transitions.
## Visual direction
Use a premium flat style with large elements, plenty of icons, and depth from glass and backdrop blur, soft accent-colored shadows, glow, grain, and vignette. Stagger entrances and add continuous secondary motion, such as subtle float or parallax, so nothing feels completely still. Keep one hero accent per frame. Use a stylish dark grid background with subtle highlights, not a blurred background.
## Design system
Create `src/theme.ts` as the single source of design tokens: brand color and gradient, dark surfaces, radii, spacing, and a font configured through `@remotion/google-fonts`. I will fill in the brand values. Do not hardcode colors in scenes; read them from the theme.
## Components (`src/components`)
Create:
- `GridBackground`: grid, highlights, grain, and vignette, all frame-driven
- `Headline`: per-word masked reveal and a moving shimmer across a gradient
- `Kicker` and `Subhead`
- `LiquidReveal`: SVG `feTurbulence` and `feDisplacementMap` with a fixed seed; animate only the scale
- `Counter` with animated numbers
- `GlassCard`, `Button`, `Logo`, and `Particles`
## Scene templates
Create Hook → Feature → Metrics → CTA scene templates at 1080×1920 vertical, plus a 1080×1080 variant. Join scenes using `TransitionSeries` and the premium transitions above. Type scene props with Zod so they can be edited in Remotion Studio.
## Optional backgrounds
Backgrounds may be generated with an image API or provided as PNGs in `public/assets`; reference local files with `staticFile()`.
## Final checks and deliverables
Render a demo MP4 with `npx remotion render`, capture 3–4 still frames, and inspect them visually. Write a `RULES.md` containing all the requirements above so future creatives remain consistent.
Comments — 0