Logo Reveal
Logo mark draw-on with wordmark and tagline beats.
ScenePaths & shapesAdvanced
logo-reveal30fps · 960×540
Install
$ npx remotion-ui@latest add logo-revealFour beats: a bloom settles, the mark draws on with path-draw, the wordmark
springs up, and the tagline follows. Pass an array to pathD for a multi-stroke
mark — the strokes draw in order.
The mark sizes itself from the frame's short edge and grows when no copy is supplied, so the scene fills both a 16:9 outro and a 9:16 clip without tuning.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/logo-reveal- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: pathD, viewBox, size, wordmark, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { LogoReveal } from "@/remotion/scenes/logo-reveal";
<LogoReveal pathD="M 100 20 L 180 180 L 20 180 Z" wordmark="Acme" tagline="Ship faster" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| pathD* | string | string[] | - | Logo path, or paths drawn in sequence. |
| viewBox | string | - | Omit to frame the mark automatically. |
| size | number | - | Mark size in px. Defaults to a share of the short edge. |
| wordmark | string | - | Brand name rising after the mark completes. |
| tagline | string | - | Supporting line, entering last. |
| stroke | string | "#e8b86d" | Mark stroke color. |
| strokeWidth | number | - | Defaults to a share of the mark size. |
| fill | string | - | Fill flooded into the mark after the draw. |
| backgroundColor | string | "#080810" | Scene background. |