# Weave
URL: https://remocn.dev/docs/shaders/components/shader-weave

A woven substrate of warp and weft threads crossing on a domain-warped grid

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

## Installation

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

## Usage

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

const ShaderWeaveScene = () => (
  <ShaderWeave speed={1} scale={22} warp={0.03} />
);

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

A custom WebGL shader written for the Remocn registry — frame-driven and
deterministic, with no wall-clock time. Warp and weft threads cross on a
domain-warped grid, interlacing over and under like real cloth, with a slow
sheen of light travelling across the fabric. Raise `scale` for a finer weave
and `warp` for a more irregular hand-woven grid.

## Use when
- Tactile, crafted, "made-of" textures — fabric, mesh, or substrate metaphors.
- A scene wants a slow sheen of light traveling across a textured surface.
- The brand voice is handcrafted or material rather than digital and smooth.

## Don't use when
- You want a smooth gradient field — use `shader-mesh-gradient`.
- You want organic noise instead of a woven structure — use `shader-neuro-noise`.