# Cursor Frame
URL: https://remocn.dev/docs/typography/cursor-frame

A selection frame with handles and a size badge is dragged and resized around a headline, rewrapping it.

- Install: `npx shadcn@latest add @remocn/cursor-frame`
- Vibe: clean
- Natural length: 184f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/cursor-frame
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CursorFrame } from "@/components/remocn/cursor-frame";

const CursorFrameScene = () => (
  <CursorFrame title="Launch videos, in code." theme="light" accent="#3B5BFD" />
);

export const RemotionRoot = () => (
  <Composition
    id="CursorFrame"
    component={CursorFrameScene}
    durationInFrames={230}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Words fade in, a cursor presses and drags a selection frame over them, then resizes it so the headline rewraps onto two lines before the frame clears. Pass `title` for the headline; it ships light and dark through `theme` and defaults to light.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Launch videos, in code."` | Headline that gets selected and rewrapped |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"light"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A design-tool style beat where the headline is selected, moved and resized live.
- A product video about layout or editing that should show the text responding to a frame.

## Don't use when
- You want the headline to just appear - use `staggered-fade-up`.
- You want a typing effect rather than a drag interaction - use `typewriter`.
- You want a highlighter pass over a phrase - use `marker-highlight`.