Landing Confirmed
An altitude readout counts down to a hard stop, then a slammed confirmation gives way to a gradient title.
$ pnpm dlx shadcn@latest add @remocn/landing-confirmedUsage
// src/Root.tsx
import { Composition } from "remotion";
import { LandingConfirmed } from "@/components/remocn/landing-confirmed";
const LandingConfirmedScene = () => (
<LandingConfirmed
from={800}
confirm="Release confirmed"
title="Live."
subtitle="Version 2.0 is out."
/>
);
export const RemotionRoot = () => (
<Composition
id="LandingConfirmed"
component={LandingConfirmedScene}
durationInFrames={160}
fps={30}
width={1280}
height={720}
/>
);A giant altitude number counts down from from metres beside a gauge and a velocity readout, hard-stops at zero, flashes, and slams confirm across the frame. That line shrinks into a small label as title slams in as a gradient headline, with subtitle in serif italic and a logo beneath. The default logo is the Remocn wordmark, so pass your own through logo. It ships light and dark.
Props8
| Prop | Type | Default |
|---|---|---|
| from | number1200 Altitude the descent starts from, in metres. | |
| confirm | string"Touchdown confirmed" The slam at touchdown. Two words read best (one per line). | |
| title | string"Shipped." The first resolve line, set big in caps. | |
| subtitle | string"Nailed the landing." The second resolve line, set in a serif italic. | |
| logo | React.ReactNode— Replaces the Remocn logo under the resolve. | |
| accent | string"#3B5BFD" Gauge marker and small marks. | |
| theme | "dark" | "light""dark" Light or dark palette. | |
| speed | number1 Playback speed multiplier for the whole timeline. | |
- fromnumber
Altitude the descent starts from, in metres.
Default
1200 - confirmstring
The slam at touchdown. Two words read best (one per line).
Default
"Touchdown confirmed" - titlestring
The first resolve line, set big in caps.
Default
"Shipped." - subtitlestring
The second resolve line, set in a serif italic.
Default
"Nailed the landing." - logoReact.ReactNode
Replaces the Remocn logo under the resolve.
- accentstring
Gauge marker and small marks.
Default
"#3B5BFD" - theme"dark" | "light"
Light or dark palette.
Default
"dark" - speednumber
Playback speed multiplier for the whole timeline.
Default
1