Words Stagger

Text 45

About

Word-by-word text reveal animation that staggers each word in with blur, upward transform, and opacity for an elegant entrance effect.

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

Code

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

Usage.tsx

import { WordsStagger } from "@/components/ui/words-stagger";

export default function WordsStaggerDemo() {
  return (
    <div className="flex min-h-[360px] w-full items-center justify-center bg-background px-8 py-16">
      <WordsStagger className="max-w-xl text-3xl font-semibold leading-snug tracking-tight text-foreground">
        Spell UI is an open source collection of elegant, user friendly
        components that seamlessly integrate with frameworks and AI models.
      </WordsStagger>
    </div>
  );
}