Beta Thanks

"Remocn is out" with a green "out", thanking the beta testers below

Installation

$ pnpm dlx shadcn@latest add @remocn/beta-thanks

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BetaThanks } from "@/components/remocn/beta-thanks";
 
const BetaThanksScene = () => <BetaThanks tag="beta" status="is out." before="Thank you," after="testers." />;
 
export const RemotionRoot = () => (
  <Composition
    id="BetaThanks"
    component={BetaThanksScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

The logo and a small tag appear, the tag lifts out and slides into place beside the logo as the status word lands, then a thank-you line fades in below. Pass tag, status, before and after, or a logo node of your own; it speeds up to fit shorter compositions.

Props9

Prop	Type	Default
logo	React.ReactNode— Custom logo node; defaults to the Remocn logo.
tag	string"beta" Small tag that lifts out and slides next to the logo.
status	string"is out." Status line that lands beside the logo.
before	string"Thank you," First half of the thank-you line.
after	string"testers." Second half of the thank-you line.
accent	string— Color of the tag and status; defaults to the theme accent.
background	string— Stage fill color; pass "transparent" to overlay your own footage.
speed	number1 Playback multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme; ships dark and light.

logoReact.ReactNode
Custom logo node; defaults to the Remocn logo.
tagstring
Small tag that lifts out and slides next to the logo.
Default"beta"
statusstring
Status line that lands beside the logo.
Default"is out."
beforestring
First half of the thank-you line.
Default"Thank you,"
afterstring
Second half of the thank-you line.
Default"testers."
accentstring
Color of the tag and status; defaults to the theme accent.
backgroundstring
Stage fill color; pass "transparent" to overlay your own footage.
speednumber
Playback multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme; ships dark and light.
Default"dark"