Scrolling Text

npx shadcn add https://try.pungrumpy.com/r/scrolling-text.json

An infinite scrolling text component with hover effects. Creates smooth horizontal text animations with interactive stroke-to-fill transitions.

How It Works

The component creates a seamless infinite scroll effect by duplicating the text items four times and animating them continuously. The magic happens through two techniques working together:

1. x transforms — The text container animates horizontally using motion.dev, moving from 0% to -50% (or reverse for right direction) to create the scrolling effect. The animation repeats infinitely with a linear easing function for smooth, consistent motion.

2. Stroke-to-fill transition — Each text item starts with a transparent fill and a stroke outline. On hover, the text transitions from the stroke outline to a filled state by removing the stroke and applying the inherited text color. This creates a distinctive interactive effect that draws attention to individual items as users hover over them.

The component uses will-change-transform to optimize animation performance by hinting to the browser that the element will be transformed. The text is rendered at large, responsive sizes (text-5xl on mobile, scaling up to text-8xl on larger screens) with tight tracking for a bold, impactful appearance.

The duration prop controls the speed of the scroll animation—higher values create slower scrolling, while lower values create faster scrolling. The default is 60 seconds, which provides a smooth, readable scrolling speed for most use cases.