Shuffle⁽⁰²⁵⁾

Slot-machine reel flip animation rolling through randomized glyph strips on scroll or hover.

HoverScroll

Requires:gsap@gsap/react

QLDGRSDGSSZHB4IVMUKJ0GEF!*UFMF8S%M%LU3DZIE S8!WXTLAK*0E3DLSGX$IL14T

Loading…

Installation

$npx kibo add shuffle

Usage

1import { Shuffle } from "@/components/kibo/shuffle/component";
2 
3export default function Example() {
4  return (
5    <Shuffle />
6  );
7}

Props Reference

Prop	Type	Default	Description
`text`	`string`	-	The text content to display and animate.
`className`	`string`	''	Additional CSS classes for styling and layout.
`style`	`React.CSSProperties`	{}	Controls the style for the component animation.
`shuffleDirection`	`'left' \| 'right' \| 'up' \| 'down'`	'up'	Controls the shuffle direction for the component animation.
`duration`	`number`	0.45	Duration of the animation in seconds or milliseconds.
`maxDelay`	`number`	0	Controls the max delay for the component animation.
`ease`	`string`	'power3.out'	GSAP or cubic-bezier easing curve for animation smoothing.
`threshold`	`number`	0.1	Controls the threshold for the component animation.
`rootMargin`	`string`	'-100px'	Controls the root margin for the component animation.
`tag`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p' \| 'span'`	'p'	Controls the tag for the component animation.
`textAlign`	`React.CSSProperties['textAlign']`	'center'	Controls the text align for the component animation.
`onShuffleComplete`	`() => void`	-	Controls the on shuffle complete for the component animation.
`shuffleTimes`	`number`	4	Controls the shuffle times for the component animation.
`animationMode`	`'random' \| 'evenodd'`	'evenodd'	Controls the animation mode for the component animation.
`loop`	`boolean`	false	Controls the loop for the component animation.
`loopDelay`	`number`	0	Controls the loop delay for the component animation.
`stagger`	`number`	0.03	Stagger delay in seconds between individual characters/elements.
`scrambleCharset`	`string`	'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*'	Controls the scramble charset for the component animation.
`colorFrom`	`string`	-	Controls the color from for the component animation.
`colorTo`	`string`	-	Controls the color to for the component animation.
`triggerOnce`	`boolean`	false	Controls the trigger once for the component animation.
`respectReducedMotion`	`boolean`	true	Controls the respect reduced motion for the component animation.
`triggerOnHover`	`boolean`	true	Controls the trigger on hover for the component animation.