Text Roll

Text 60

About

A per-character vertical text roll animation for animating label swaps and micro-interactions between two short strings.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Roll to your project and fits it to your theme.

Code

How Text Roll is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { TextRoll, chromatic } from "@/components/ui/text-roll";
import { useEffect, useState } from "react";

const WORDS = ["Beautiful", "Animated", "Kinetic", "Typography"];

const settings = {
  bounce: 0.6,
  stagger: 45,
  exitOffset: 50,
  colorFade: 280,
  spread: 320,
  saturation: 92,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setIndex((i) => (i + 1) % WORDS.length), 1800);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="flex h-screen w-screen items-center justify-center bg-background">
      <TextRoll
        text={WORDS[index]}
        className="text-6xl font-bold text-foreground"
        bounce={s.bounce}
        stagger={s.stagger}
        options={{
          exitOffset: s.exitOffset,
          colorFade: s.colorFade,
          color: chromatic({ spread: s.spread, saturation: s.saturation }),
        }}
      />
    </div>
  );
}