Paper Plane

A paper plane flies a dotted path past three stops and lands as the full stop of the wordmark.

Installation

$ pnpm dlx shadcn@latest add @remocn/paper-plane

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PaperPlane } from "@/components/remocn/paper-plane";
 
const PaperPlaneScene = () => (
  <PaperPlane
    steps={["Write", "Render", "Launch"]}
    url="remocn.dev"
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PaperPlane"
    component={PaperPlaneScene}
    durationInFrames={220}
    fps={30}
    width={1280}
    height={720}
  />
);

A paper plane loops along a dotted flight path past three labelled stops, heads for the wordmark and lands as its full stop, then url appears beneath. Pass steps (three labels), url and logo. The theme prop defaults to light paper and also ships dark.

Props6

Prop	Type	Default
steps	[string, string, string]["Write", "Render", "Launch"] The three stops the plane passes; the last labels the landing.
logo	React.ReactNode— Replaces the remocn.dev logo; the plane lands as a full stop after it.
url	string"remocn.dev" Shown under the lockup after the plane lands.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.
theme	"light" \| "dark""light" Light paper (default) or dark.

steps[string, string, string]
The three stops the plane passes; the last labels the landing.
Default["Write", "Render", "Launch"]
logoReact.ReactNode
Replaces the remocn.dev logo; the plane lands as a full stop after it.
urlstring
Shown under the lockup after the plane lands.
Default"remocn.dev"
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1
theme"light" | "dark"
Light paper (default) or dark.
Default"light"