Browse components
Shape Waves
Rows of small circles, squares and triangles bobbing and turning in rolling waves; they swell near the cursor. WebGL.
Shape Waves
Installation
npx shadcn@latest add @glint-ui/shape-wavesFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/shape-waves.json
Usage
import { ShapeWaves } from "@/components/ui/shape-waves";
<div className="relative h-96">
<ShapeWaves shape="mixed" cellSize={32} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorA | string | "#f472b6" | Color on the left. |
| colorB | string | "#60a5fa" | Color on the right. |
| speed | number | 1 | Animation speed multiplier. |
| shape | "mixed" | "circle" | "square" | "triangle" | "mixed" | Shape to draw; mixed alternates by row. |
| cellSize | number | 32 | Grid spacing in px. |
| amplitude | number | 1 | How far shapes bob. |
| mouseStrength | number | 1 | How much shapes swell near the cursor. |
| className | string | — | Extra classes for the root element. |