# Color Panels
URL: https://remocn.dev/docs/shaders/components/shader-color-panels

Overlapping translucent color panels sliding past each other

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

## Installation

```bash
npx shadcn@latest add @remocn/shader-color-panels
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShaderColorPanels } from "@/components/remocn/shader-color-panels";

const ShaderColorPanelsScene = () => (
  <ShaderColorPanels speed={1} density={3} length={1.1} />
);

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

## Credits

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

## Use when
- You want an architectural, glassy backdrop of translucent panes sliding past each other.
- A scene benefits from layered depth without organic blob motion.
- You want the panel count tunable via `density`.

## Don't use when
- You want organic, flowing motion — use `shader-warp` or `shader-metaballs`.
- The overlap patterns would clutter dense foreground content — lower `density`.
- You need a single smooth gradient — use `shader-mesh-gradient`.