Sliced Text

Text 7

About

An animated text that splits into two horizontal halves and slices apart on hover.

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

Code

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

Usage.tsx

import SlicedText from "@/components/ui/sliced-text";

export default function SlicedTextDemo() {
  return (
    <div className="flex min-h-[300px] w-full items-center justify-center bg-background p-8">
      <SlicedText
        text="Sliced Text"
        className="text-6xl font-bold text-foreground"
        splitSpacing={4}
      />
    </div>
  );
}