# Warp
URL: https://remocn.dev/docs/shaders/components/shader-warp

Domain-warped color field that folds and stretches like liquid

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

## Installation

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

## Usage

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

const ShaderWarpScene = () => (
  <ShaderWarp speed={1} distortion={0.2} swirl={0.4} />
);

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

## Presets

Ready-made looks, each a standalone registry item that pulls in `shader-warp` 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-warp-silk`](https://remocn.dev/docs/shaders/components/shader-warp/silk) — Violet and pink liquid silk folding in slow waves. Install: `npx shadcn@latest add @remocn/shader-warp-silk`
- [`shader-warp-sunset`](https://remocn.dev/docs/shaders/components/shader-warp/sunset) — Marbled coral, peach and wine flowing like warm liquid. Install: `npx shadcn@latest add @remocn/shader-warp-sunset`
- [`shader-warp-ocean`](https://remocn.dev/docs/shaders/components/shader-warp/ocean) — Glossy aqua currents traced with dark ink edges. Install: `npx shadcn@latest add @remocn/shader-warp-ocean`
- [`shader-warp-marble`](https://remocn.dev/docs/shaders/components/shader-warp/marble) — Cream and charcoal marble veins swirling together. Install: `npx shadcn@latest add @remocn/shader-warp-marble`
- [`shader-warp-acid`](https://remocn.dev/docs/shaders/components/shader-warp/acid) — Loud lime and cyan fluid swirling over black. Install: `npx shadcn@latest add @remocn/shader-warp-acid`
- [`shader-warp-cream`](https://remocn.dev/docs/shaders/components/shader-warp/cream) — Soft peach-to-coral cream gradient with a gentle drift. Install: `npx shadcn@latest add @remocn/shader-warp-cream`
- [`shader-warp-deep-sea`](https://remocn.dev/docs/shaders/components/shader-warp/deep-sea) — Diagonal teal bands rippling through midnight blue. Install: `npx shadcn@latest add @remocn/shader-warp-deep-sea`
- [`shader-warp-rose-gold`](https://remocn.dev/docs/shaders/components/shader-warp/rose-gold) — Satin rose-gold folds with a soft sheen. Install: `npx shadcn@latest add @remocn/shader-warp-rose-gold`
- [`shader-warp-storm`](https://remocn.dev/docs/shaders/components/shader-warp/storm) — Deep violet and lavender storm of marbled fluid. Install: `npx shadcn@latest add @remocn/shader-warp-storm`

```tsx
import { ShaderWarpSilk } from "@/components/remocn/shader-warp-silk";

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

## Credits

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

## Use when
- A hero scene wants organic, liquid motion that feels alive but stays out of the way.
- You want a flowing alternative to a static gradient with more directional movement.
- The palette is dark and you want folds of a single accent to read as depth.

## Don't use when
- Text legibility over the whole frame is critical — raise `softness` and keep `distortion` low, or use a solid `backdrop`.
- You want tight, repeating structure — use `shader-swirl` (banded) or `shader-spiral`.
- You need a metallic sheen rather than color folds — use `shader-liquid-metal`.