# Ink Bloom
URL: https://remocn.dev/docs/logo-stings/ink-bloom

A drop of ink falls, blooms across the page and settles into the logo.

- Install: `npx shadcn@latest add @remocn/ink-bloom`
- Vibe: paper
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ink-bloom
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { InkBloom } from "@/components/remocn/ink-bloom";

const InkBloomScene = () => (
  <InkBloom
    name="remocn"
    seed={3}
    theme="light"
  />
);

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

A drop of ink falls onto the page, blooms outward in an organic shape, then thins and resolves into the lockup of logo and `name`. Pass `name`, or your own `logo`, and `seed` to change the bloom. The theme prop switches off-white paper with dark ink (default) to light ink on black.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `logo` | `React.ReactNode` | — | Replaces the Remocn logo in the final lockup. |
| `name` | `string` | `"remocn"` | Name set beside the logo. |
| `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 is off-white paper with dark ink (default); dark is the reverse. |
| `seed` | `number` | `3` | Number that changes the shape of the bloom. |

## Use when
- A craft, editorial or analogue-flavoured brand reveal.
- A paper-textured sting where the logo emerges from ink.
- A reveal for a writing, publishing or design tool.

## Don't use when
- You want technical construction lines instead — use `logo-construct`.
- A liquid fill inside an outlined mark is wanted — use `liquid-fill`.
- A fast, snappy sting is needed — use `snap-click`.