A woven grid hung from its top edge, swaying in a soft breeze and billowing away from the cursor, with real cloth physics.
Woven in motion
Customize
Usage
import { ClothGrid } from "@/components/motionkit/cloth-grid";
<ClothGrid
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</ClothGrid>Motion
The exact curves this component runs, plotted with Motion's own maths.
Cloth
Breeze and pointer
Fashion, textile and creative brands, physics-flavoured tech heroes, and interactive backdrops that feel alive.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/cloth-grid. It saves the file to components/motionkit and installs its dependencies.
Cloth Grid is part of MotionKit Plus (£12 / $15 / €14 a month or £96 / $120 / €112 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the cloth hangs still. It also stops simulating off screen.
Infinite Perspective Grid
A true 3D floor of glowing lines that recedes forever to a lit horizon, with an optional ceiling for a tunnel.
Hex Grid
A honeycomb of faint hexagons that light up under the cursor and fade behind it, with the odd idle pulse.
Water Ripple
A dark pool you can touch: the cursor drags ripples across the surface, they spread and cross, and a stray raindrop lands now and then.
Woven in motion
Customize
Usage
import { ClothGrid } from "@/components/motionkit/cloth-grid";
<ClothGrid
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</ClothGrid>Motion
The exact curves this component runs, plotted with Motion's own maths.
Cloth
Breeze and pointer
The live preview is free to explore. Plus unlocks the source for Cloth Grid and every other premium component.