Product Launch Trailer
Cinematic Product Hunt teaser with logo pulse, zoom-through, 3D bento fly-over, and a confetti version drop
Installation
$ pnpm dlx shadcn@latest add @remocn/product-launch-trailerUsage
// src/Root.tsx
import { Composition } from "remotion";
import { ProductLaunchTrailer } from "@/components/remocn/product-launch-trailer";
const Trailer = () => (
<ProductLaunchTrailer
logoLabel="R"
productName="Remocn"
versionLabel="v1.0 is live"
/>
);
export const RemotionRoot = () => (
<Composition
id="ProductLaunchTrailer"
component={Trailer}
durationInFrames={240}
fps={30}
width={1280}
height={720}
/>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
logoLabel | string | "R" | Single-character mark shown inside the centered logo squircle |
productName | string | "Remocn" | Subtitle rendered below the logo while it pulses |
versionLabel | string | "v1.0 is live" | Headline that drops in during the outro |
accentPeach | string | "#FFB38E" | Peach accent for bento card shadows and confetti |
accentLavender | string | "#D4B3FF" | Lavender accent for the logo glow and code block border |
accentMint | string | "#A1EEBD" | Mint accent for traffic lights and confetti |
background | string | "#141318" | Stage background color |
speed | number | 1 | Playback speed multiplier |
className | string | — | Optional className for the outer container |