A lock-screen slider with shimmering text and a padlock whose shackle lifts as you drag. Short drags spring back; past the end it unlocks, opens the shackle and floods the track.
9:41
Saturday, November 8
npx shadcn@latest add https://hyperblur.dev/r/micro-slide-unlock.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-slide-unlock.tsx.
import { MicroSlideUnlock } from "@/components/hyperblur/micro-slide-unlock"
<MicroSlideUnlock onUnlock={() => openVault()} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "slide to unlock" | Shimmering hint text and the slider's accessible name. |
| unlockedLabel | string | "Unlocked" | Text shown once unlocked. |
| accent | string | "#2f7bff" | Track fill, unlocked color and focus ring. |
| resetAfter | number | 1800 | Milliseconds before it locks again. 0 keeps it unlocked. |
| idle | boolean | true | Nudge the handle now and then until the first touch. |
| disabled | boolean | false | Block interaction and dim the track. |
| onUnlock | () => void | Called when the handle reaches the end, or on Enter or End from the keyboard. | |
| className / style / ...rest | HTMLAttributes<HTMLDivElement> | Forwarded to the track. |