# Shape Cut
URL: https://remocn.dev/docs/transitions/shape-cut

A circle, square or pill swells to cover the headline, then shrinks to a small mark beside the next line

- Install: `npx shadcn@latest add @remocn/shape-cut`
- Vibe: clean
- Natural length: 76f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shape-cut
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShapeCut } from "@/components/remocn/shape-cut";

const ShapeCutScene = () => (
  <ShapeCut
    from="Ideas move fast"
    to="Now live"
    shape="pill"
    accent="#3B5BFD"
  />
);

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

A shape slides in from the left edge and swells until it covers the `from` headline, then shrinks down to a small mark beside the `to` text, which settles into place. Choose `shape` as circle, square or pill (the pill ends as an underline bar), and pass `to="remocn"` to set the Remocn logo. It ships light and dark, and the cut finishes at frame 76.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `string` | `"Ideas move fast"` | Outgoing headline |
| `to` | `string` | `"remocn"` | Incoming headline; Remocn sets the logo |
| `shape` | `"circle" \| "square" \| "pill"` | `"circle"` | Shape that grows out of the text: circle, square or pill |
| `accent` | `string` | `"#3B5BFD"` | Accent color used by the scenes |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark stage |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |

## Use when
- Swapping a short statement for a logo or closing line with a single bold shape that ends as a punctuation-like mark.
- A launch beat where the shape type, a circle, square or pill, should match the brand.
- A fast, graphic cut that needs no imagery.

## Don't use when
- You want multiple rings expanding from a point — use `ring-cut`.
- The reveal should open from a band across the middle — use `band-open`.
- You need a soft change with no hard-edged shape — use `grain-dissolve`.