# Ripple Mark
URL: https://remocn.dev/docs/logo-stings/ripple-mark

Dots ripple outward across the frame and light up the R mark, then the name appears beside it.

- Install: `npx shadcn@latest add @remocn/ripple-mark`
- Vibe: tech
- Natural length: 82f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ripple-mark
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RippleMark } from "@/components/remocn/ripple-mark";

const RippleMarkScene = () => (
  <RippleMark
    name="remocn"
    accent="#3B5BFD"
    theme="dark"
  />
);

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

A field of dots ripples outward from the centre and the dots inside the R mark light up in the accent colour, then the camera pans and the name letters appear beside the mark. Pass `name` (Remocn is set as the real logo) or your own `logo` path. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `logo` | `string \| string[]` | — | SVG path or paths of the mark; defaults to the R. |
| `name` | `string` | `"remocn"` | Name set after the mark; Remocn is set as the real logo. |
| `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 logo reveal that starts from a dot field, suited to a data or infrastructure brand.
- A short sting with a ripple of light behind the mark.
- A reveal where a path-based logo can be passed in.

## Don't use when
- You want squares that subdivide into the mark — use `quadtree-mark`.
- The reveal should be wordless — use `squircle-wave`.
- A countdown should lead into the logo — use `glyph-matrix`.