Slot Machine
Split-flap display effect with characters flipping into place.
Main Features of Slot Machine
How to Use Slot Machine in Next.js
Installation Guide for Slot Machine
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | JACKPOT | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
textColor | string | text-amber-300 | Color of the text |
textSize | string | text-8xl md:text-9xl | Size of the text |
delayMultiplier | number | 0.1 | Delay multiplier per character |
duration | number | 0.8 | Animation duration in seconds |
ease | number[] | [0.16, 1, 0.3, 1] | Easing function values |
oldCharColor | string | text-zinc-700 | Color of the old character |
className | string | Additional CSS classes |
Related Components
When to Use
Perfect for financial dashboards, high-stakes landing pages, and cinematic brand intros. Use this React component to reveal text with a split-flap 'slot machine' effect, perfect for revealing scores, prices, or key announcements.
Best Practices
Maintain consistent spacing within your design system by ensures the text doesn't move during the flip. Follow React best practices by using the `delayMultiplier` to stagger the character reveals for a realistic mechanical feel. Optimize for performance by using simple 3D rotations for the flaps.
Why This Component Matters in Modern UI Development
Split-flap and slot machine animations carry a sense of mechanical precision and excitement. This production-ready component provides a robust framework for complex character cycling, adding a layer of polish and semantic authority to your real-world application architecture.
Frequently Asked Questions
QCan I change the character set for the flip?
The current implementation uses a realistic 'old character' transition, but the logic can be adapted to cycle through a custom sequence of letters.
QIs the flip sound included?
This is a visual component, but it's designed to be easily paired with an `onAnimationStart` trigger for custom mechanical sound effects.
QHow fast is the flip?
The `duration` prop lets you control the flip speed, from a rapid 'jackpot' shuffle to a slow, deliberate split-flap update.