Product Launch Trailer

Cinematic Product Hunt teaser with logo pulse, zoom-through, 3D bento fly-over, and a confetti version drop.

A drop-in launch video for Product Hunt, Twitter, or your homepage hero. The composition opens on a pulsing logo, punches through it with a zoom transition, assembles a faux app shell (glass code block on the left, bento grid on the right) inside a 3D camera fly-over, and lands on a "v1.0 is live" headline with a soft confetti burst.

Built around four pastel tokens — peach, lavender, mint, and the #141318 obsidian background — so it sits naturally next to the rest of the remocn registry. Every camera move uses the soft cubic-bezier(0.16, 1, 0.3, 1) easing for the "tactile" feel.

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

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.

Notes

Audio hooks are stubbed

The composition leaves a // TODO(audio) marker at frames 38 and 200 — those are the natural anchors for a TransitionWhoosh and a SuccessChime once the audio module ships. The visual track works on its own with no audio.

3D camera

The fly-over uses a perspective: 2000px parent and a transformStyle: preserve-3d child. If you nest this composition inside another transformed container, the 3D may flatten — render it at the top level for best results.