Browse components
Sliced Waves
A flowing wave gradient cut into horizontal strips that glide sideways independently. WebGL.
Sliced Waves
Installation
npx shadcn@latest add @glint-ui/sliced-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/sliced-waves.json
Usage
import { SlicedWaves } from "@/components/ui/sliced-waves";
<div className="relative h-96">
<SlicedWaves slices={14} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorA | string | "#0ea5e9" | First palette color. |
| colorB | string | "#8b5cf6" | Second palette color. |
| colorC | string | "#f43f5e" | Third palette color. |
| speed | number | 1 | Animation speed multiplier. |
| slices | number | 14 | Number of strips. |
| shift | number | 1 | How far strips slide. |
| scale | number | 1 | Wave zoom. |
| className | string | — | Extra classes for the root element. |