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-trailer

Usage

// 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

PropTypeDefaultDescription
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
number1Playback speed multiplier
className
stringOptional className for the outer container