# Paper Plane
URL: https://remocn.dev/docs/logo-stings/paper-plane

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

- Install: `npx shadcn@latest add @remocn/paper-plane`
- Vibe: paper
- Natural length: 212f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |
| `theme` | `"light" \| "dark"` | `"light"` | Light paper (default) or dark. |

## Use when
- A write, render, launch workflow beat that ends on the brand.
- A friendly, craft-feeling reveal for a product about sending or shipping.
- A long reveal with a URL that appears once the plane lands.

## Don't use when
- A map of converging lines is wanted — use `transit-lines`.
- A short sting under five seconds is needed — use `snap-click`.
- You want a physical drop into a grid — use `gravity-grid`.