# Squircle Wave
URL: https://remocn.dev/docs/logo-stings/squircle-wave

A wave of squircle cells sweeps across a dot grid and leaves the R mark behind.

- Install: `npx shadcn@latest add @remocn/squircle-wave`
- Vibe: premium
- Natural length: 72f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/squircle-wave
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SquircleWave } from "@/components/remocn/squircle-wave";

const SquircleWaveScene = () => (
  <SquircleWave
    accent="#3B5BFD"
    theme="dark"
    speed={1}
  />
);

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

A dot grid fades up, then a diagonal wave of squircle cells sweeps across it and the cells inside the R mark lock in solid as the crest passes, leaving only the mark. There is no text prop and the mark is the baked-in Remocn R. Pass `accent` for the wake colour. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `accent` | `string` | `"#3B5BFD"` | Colour of the wave's leading edge behind the crest. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |

## Use when
- A text-free logo reveal where a wave of motion ends on the mark alone.
- An opener for a design-system or UI-kit product, where the grid is on brand.
- A short wordless sting that fits under a voice-over.

## Don't use when
- You want the name shown beside the mark — use `ripple-mark`.
- The mark should refine from large pixel squares — use `quadtree-mark`.
- A tagline must accompany the reveal — use `first-light`.