# Cloth Grid

> A woven grid hung from its top edge, swaying in a soft breeze and billowing away from the cursor, with real cloth physics.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-30 · Live demo: https://www.motionkitui.com/components/cloth-grid

## When to use it

Fashion, textile and creative brands, physics-flavoured tech heroes, and interactive backdrops that feel alive.

## How it works

Each crossing of the grid is a point simulated with verlet integration: its velocity is simply where it is minus where it was. Gravity pulls down, a breeze made of two slow sine waves pushes sideways, and the pointer pushes points away. Then a few passes of constraint solving nudge every pair of neighbours back to their thread length, which is what makes folds appear on their own. The top row is pinned, and the edges hang just out of view.

## Installation

Part of MotionKit Plus (https://www.motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/cloth-grid` after adding their registry token from https://www.motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors` | `[string, string]` | `["#5FAEB4", "#A56D5B"]` | Thread colours, top to bottom. |
| `spacing` | `number` | `28` | Gap between threads, in pixels. |
| `wind` | `number` | `1` | Strength of the breeze. 0 is still air. |
| `interactive` | `boolean` | `true` | Let the pointer push the cloth. |
| `children` | `ReactNode` |  | Your content, layered above. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** The canvas is hidden from assistive tech; only your content is read.
- **Reduced motion: Pass.** With reduced motion on, the cloth hangs still. It also stops simulating off screen.
- **Colour contrast: Pass.** Threads are faint and the middle is darkened, so ivory text measures 14:1.