Rolling Text

Animated rolling text with customizable intervals and transitions.

Rolling effectCustom intervalsEvent callbacks

Basic

Make your app
shine
with libravelUI

Features

Vertical Roll

Smoothly rolls text items vertically.

Timed Intervals

Set precise duration for each item display.

State Tracking

Callbacks for index changes and animation state.

Installation

Works with npm, pnpm, yarn, and bun

$npx libravelui@latest add rolling-text

Anatomy


import { RollingText } from "@/components/ui/motion/rolling-text";

<RollingText texts={["First", "Second", "Third"]} />

import { RollingText } from "@/components/ui/motion/rolling-text";<RollingText texts={["First", "Second", "Third"]} />

Testing Playground

Over the Hills and Far Away

・Led Zeppelin

Props

Loading types…

Last updated on

Morphing Text

Creates smooth transitions between words by morphing their shared letters.

Shining Text

Shining effect on text with customizable animation speed and glow spread.