A code or PIN display where every character is a vertical reel that spins and settles on its value, with a short glow when each reel locks. Changing the value replays it.
Check your inbox
We sent a 6 digit code to ada@fernhill.example
npx shadcn@latest add https://hyperblur.dev/r/micro-code-slots.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-code-slots.tsx.
import { CodeSlots } from "@/components/hyperblur/micro-code-slots"
<CodeSlots value="482916" size={40} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | "482916" | Characters to display. Changing it respins every reel. Characters outside the charset are shown as static separators. |
| charset | string | "0123456789" | Glyphs the reels cycle through. Use letters and digits for alphanumeric codes. |
| duration | number | 1500 | Spin time of one reel in milliseconds. |
| stagger | number | 140 | Delay between the start of consecutive reels in milliseconds. |
| size | number | 44 | Font size in pixels. The reels scale with it. |
| accent | string | "#2f7bff" | Color of the lock glow. |