Slot Text
NewPro
Each word spins vertically like a slot machine reel, then the reels stop one after another and land with a small overshoot.
Customize
1.1s
0.42s
Reel window
#ff784f
When to use it
- Result lines on a daily spin, reward or giveaway screen
- Headlines for casino, party and arcade game pages
- Randomizers that land on a class, map or team name
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 246
Installation
Slot Text is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy slot-text.tsx into components/ui and run npm install motion.
Usage
import { SlotText } from "@/components/ui/slot-text";
<h2 className="text-6xl font-black uppercase">
<SlotText text="Your next run" decoys={["boss", "loot", "quest", "arena"]} spinKey={round} />
</h2>Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text. Each word gets its own reel. |
| decoys | string[] | — | Words that spin past on the reels. Defaults to the words of the text. |
| duration | number | 1.1 | Seconds the first reel spins. |
| stagger | number | 0.42 | Seconds between one reel stopping and the next. |
| framed | boolean | true | Put each word in a machine window. Turn off to spin bare words inside a sentence. |
| accentColor | string | "#ff784f" | Color of the flash when a reel lands. |
| spinKey | string | number | 0 | Change this value to spin again. |
| once | boolean | true | Play only the first time the text enters the viewport. |
| className | string | — | Extra classes for the text. |
Dependencies: motion