Splitting Text

Text 13

About

Animated text that splits into characters, words, or lines with staggered entrance presets like fade, slide, blur, and scale.

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

Code

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

Usage.tsx

"use client";

import { SplittingText } from "@/components/ui/splitting-text";

export default function SplittingTextHero() {
  return (
    <div className="flex min-h-50 flex-col items-center justify-center gap-3 px-6">
      <SplittingText
        as="h1"
        className="max-w-xl text-center font-bold text-4xl text-foreground tracking-tight sm:text-5xl"
        preset="slide-up"
        splitBy="words"
        staggerDuration={0.07}
        transition={{ damping: 22, stiffness: 220, type: "spring" }}
      >
        Motion components for modern web apps
      </SplittingText>
    </div>
  );
}