Max Q

Speed and altitude figures race upward beside a drawn trajectory, a banner flashes at the peak, then a status settles.

Installation

$ pnpm dlx shadcn@latest add @remocn/max-q

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { MaxQ } from "@/components/remocn/max-q";
 
const MaxQScene = () => (
  <MaxQ velocity={1880} speedUnit="km/h" altitude={14.2} altitudeUnit="km" event="Max Q" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="MaxQ"
    component={MaxQScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Labels and two figures rise in and race up together while a trajectory curve draws between them. At the peak a banner wipes across, a marker drops on the curve, and a status settles under the numbers. Pass velocity, altitude, their labels and units, event and status; it ships light and dark through theme.

Props12

Prop	Type	Default
velocity	number1880 Left number at the end of the climb.
altitude	number14.2 Right number at the end of the climb, shown with one decimal.
speedLabel	string"Speed" Label above the left number.
speedUnit	string"km/h" Unit shown after the left number.
altitudeLabel	string"Altitude" Label above the right number.
altitudeUnit	string"km" Unit shown after the right number.
event	string"Max Q" Banner text that flashes across at the peak.
eventDetail	string"Maximum dynamic pressure" Small line inside the banner. Pass an empty string to hide it.
status	string"Nominal" Status word that settles under the numbers at the end.
accent	string"#3B5BFD" Vehicle dot on the trajectory and small marks.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".
speed	number1 Playback speed multiplier for the whole timeline.

velocitynumber
Left number at the end of the climb.
Default1880
altitudenumber
Right number at the end of the climb, shown with one decimal.
Default14.2
speedLabelstring
Label above the left number.
Default"Speed"
speedUnitstring
Unit shown after the left number.
Default"km/h"
altitudeLabelstring
Label above the right number.
Default"Altitude"
altitudeUnitstring
Unit shown after the right number.
Default"km"
eventstring
Banner text that flashes across at the peak.
Default"Max Q"
eventDetailstring
Small line inside the banner. Pass an empty string to hide it.
Default"Maximum dynamic pressure"
statusstring
Status word that settles under the numbers at the end.
Default"Nominal"
accentstring
Vehicle dot on the trajectory and small marks.
Default"#3B5BFD"
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1