A slider whose thumb drags a stretching wake of liquid behind it and sends out ripples where it comes to rest. Arrow keys, Home, End and Page keys all work.
Night Drive
Aria Vale / Neon Static
npx shadcn@latest add https://hyperblur.dev/r/micro-wake-slider.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-wake-slider.tsx.
import { MicroWakeSlider } from "@/components/hyperblur/micro-wake-slider"
<MicroWakeSlider label="Volume" unit="%" defaultValue={64} onChange={(v) => setVolume(v)} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled value. Pair with onChange. | |
| defaultValue | number | 40 | Initial value when uncontrolled. |
| min | number | 0 | Lowest value. |
| max | number | 100 | Highest value. |
| step | number | 1 | Value increment. Page keys move ten steps. |
| label | string | Text shown before the track. Also the accessible name of the slider. | |
| showValue | boolean | true | Show the numeric readout after the track. |
| unit | string | "" | Text appended to the readout, such as % or px. |
| accent | string | "#2f7bff" | Fill, wake and ripple color. |
| disabled | boolean | false | Block interaction and dim the slider. |
| idle | boolean | true | Sweep the thumb back and forth until the pointer or focus arrives. |
| onChange | (value: number) => void | Called with the new value whenever it changes. |