A tiled pattern of stripes, checks or diamonds warped by travelling sine waves. Cells near the pointer lean toward it and pick up the accent color.
Woven in motion
Twelve new textiles, cut to order
npx shadcn@latest add https://hyperblur.dev/r/bg-wave-pattern.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-wave-pattern.tsx.
import { BgWavePattern } from "@/components/hyperblur/bg-wave-pattern"
<div className="relative h-96"><BgWavePattern pattern="checks"><h1>Hello</h1></BgWavePattern></div>| Prop | Type | Default | Description |
|---|---|---|---|
| pattern | "stripes" | "checks" | "diamonds" | "stripes" | Shape of the tiled pattern. |
| cellSize | number | 22 | Size of one pattern tile in pixels. |
| color | string | "rgba(255,255,255,0.07)" | Fill color of the pattern. |
| accent | string | "#2f7bff" | Color the tiles take on near the pointer. |
| amplitude | number | 14 | Height of the waves in pixels. |
| wavelength | number | 260 | Length of one wave in pixels. |
| bend | number | 0.35 | How strongly tiles are pulled toward the pointer, from 0 to 1. |
| radius | number | 160 | Reach of the pointer pull in pixels. |
| speed | number | 1 | Speed of the waves and the idle drift. |
| children | ReactNode | Content rendered on top of the pattern. |