Handle Reel
Kinetic tumbler reel that spins a vertical reel of names past a prefix, highlighting the centered handle as it decelerates and settles with momentum.
10 KB
•Updated on September 12, 2026
A slot-machine handle reel inspired by tactile momentum wheels. It spins past a fixed prefix (such as ryna.me/), highlights the landed name, and eases gracefully. Built with Motion.
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-handle-reelVariants
With custom reset button
Usage
Code
import { HandleReel } from '@/components/spaceui/handle-reel'
export default function HeroSection() {
return <HandleReel prefix="ryna.me/" finalName="ryna" loop highlightColor="#6366f1" />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
prefix | ReactNode | ryna.me/ | Static prefix displayed before the rolling handles. |
suffix | ReactNode | - | Optional suffix displayed after the rolling handles. |
names | string[] | Default names | Array of candidate names or handles to cycle through. |
finalName | string | ryna | The final handle the reel lands on. |
rows | number | 7 | Number of visible rows in the viewport. |
cycles | number | 3 | Number of scroll cycles before settling. |
spinDuration | number | 4 | Duration of the spin animation in seconds. |
highlightColor | string | var(--primary, #6366f1) | Accent color pulsed when landed. |
loop | boolean | false | Replay the reel automatically. |
loopDelay | number | 2200 | Pause duration before replaying when loop is true. |
trigger | number | 0 | Increment to restart the roll programmatically. |
onLand | function | - | Callback fired when the reel settles on the final handle. |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
Powered by