Rolling Text Animation

A component that applies a rolling animation to text, perfect for emphasizing important information.

Pumki UI

Installation

1import { RollingText } from '@/components/pumki-ui/text/text-roller';

1<RollingText text="Pumki UI" />

Prop	Type	Default	Description
`text`	`string`	`-`	Text to animate
`inViewOnce?`	`boolean`	`true`	Animate only once when in view
`inViewMargin?`	`string`	`0px`	Margin for in-view detection
`inView?`	`boolean`	`false`	Force animation in view
`transition?`	`Transition`	`{ duration: 0.5, delay: 0.1, ease: 'easeOut' }`	Animation transition config
`className?`	`string`	`-`	Custom class name
`children`	`React.ReactNode`	`-`	Custom content to roll