# Shape Morph O
URL: https://remocn.dev/docs/logo-stings/shape-morph-o

A shape morphs through several forms, then lands as the O of the wordmark beside the R mark.

- Install: `npx shadcn@latest add @remocn/shape-morph-o`
- Vibe: premium
- Natural length: 123f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shape-morph-o
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShapeMorphO } from "@/components/remocn/shape-morph-o";

const ShapeMorphOScene = () => (
  <ShapeMorphO
    word="remocn"
    mark
    accent="#3B5BFD"
  />
);

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

A single shape appears centred and morphs through circle, cookie, clover, burst, pill and square, then flies into the first o of the word as the other letters reveal and the counter opens. Pass `word` and `mark`, which sets a leading r as the R mark. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"remocn"` | Word the shape lands in; its first o becomes the shape. |
| `mark` | `boolean` | `true` | Set a leading r as the R mark; ignored otherwise. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour for the mark and highlights; any CSS colour. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |

## Use when
- A playful logo reveal where one letter of the brand starts as a shape.
- A design-tool launch that wants a geometric morph moment.
- A word with an o in it that should become the hero of the sting.

## Don't use when
- The letter should switch between styles rather than shapes — use `dynamic-letter`.
- You want a quick reveal under three seconds — use `snap-click`.
- A calm light reveal fits better — use `first-light`.