# Swirl
URL: https://remocn.dev/docs/shaders/components/shader-swirl

Concentric bands swirling around a center point

- Install: `npx shadcn@latest add @remocn/shader-swirl`
- Vibe: premium
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shader-swirl
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShaderSwirl } from "@/components/remocn/shader-swirl";

const ShaderSwirlScene = () => (
  <ShaderSwirl speed={1} bandCount={4} twist={0.1} />
);

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

## Presets

Ready-made looks, each a standalone registry item that pulls in `shader-swirl` as a dependency. Install one and drop it in like the base shader. Props you pass override the preset, and `speed` scales the preset's own pace instead of replacing it.

- [`shader-swirl-candy`](https://remocn.dev/docs/shaders/components/shader-swirl/candy) — Pastel pink, lilac and sky-blue spiral, soft and sweet. Install: `npx shadcn@latest add @remocn/shader-swirl-candy`
- [`shader-swirl-sunburst`](https://remocn.dev/docs/shaders/components/shader-swirl/sunburst) — Retro cream and orange bands sweeping in from above. Install: `npx shadcn@latest add @remocn/shader-swirl-sunburst`
- [`shader-swirl-hypno`](https://remocn.dev/docs/shaders/components/shader-swirl/hypno) — High-contrast black and white hypnotic spiral. Install: `npx shadcn@latest add @remocn/shader-swirl-hypno`
- [`shader-swirl-neon`](https://remocn.dev/docs/shaders/components/shader-swirl/neon) — Neon teal, purple and pink vortex around a dark core. Install: `npx shadcn@latest add @remocn/shader-swirl-neon`
- [`shader-swirl-tide`](https://remocn.dev/docs/shaders/components/shader-swirl/tide) — Silky blue bands twisting into a deep navy whirlpool. Install: `npx shadcn@latest add @remocn/shader-swirl-tide`
- [`shader-swirl-citrus`](https://remocn.dev/docs/shaders/components/shader-swirl/citrus) — Juicy yellow, pink and green bands spiralling on cream. Install: `npx shadcn@latest add @remocn/shader-swirl-citrus`
- [`shader-swirl-ember`](https://remocn.dev/docs/shaders/components/shader-swirl/ember) — Gold and orange fire bands spinning around a dark core. Install: `npx shadcn@latest add @remocn/shader-swirl-ember`
- [`shader-swirl-lilac`](https://remocn.dev/docs/shaders/components/shader-swirl/lilac) — Dreamy lilac and baby-blue swirl around a dark eye. Install: `npx shadcn@latest add @remocn/shader-swirl-lilac`
- [`shader-swirl-retro`](https://remocn.dev/docs/shaders/components/shader-swirl/retro) — Seventies spiral in orange, sand and teal. Install: `npx shadcn@latest add @remocn/shader-swirl-retro`

```tsx
import { ShaderSwirlCandy } from "@/components/remocn/shader-swirl-candy";

export const Background = () => <ShaderSwirlCandy />;
```

## Credits

Shader by [paper-design/shaders](https://github.com/paper-design/shaders).

## Use when
- You want a hypnotic, radial background with clear banded structure around a center.
- A scene benefits from rotational motion that reads as "spinning up" or focus.
- You want the band count tunable — raise `bandCount` for tighter rings.

## Don't use when
- You want free-flowing liquid folds rather than concentric bands — use `shader-warp`.
- The center would sit behind critical text — the convergence point draws the eye.
- You want spiral arms instead of closed rings — use `shader-spiral`.