Dissolve Text

Text

About

An animated text component where words or characters fade in at scattered, seeded random moments, used for subtle entrance effects on headings and paragraphs.

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

Code

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

Usage.tsx

import DissolveText from "@/components/ui/dissolve-text";

export default function DissolveTextDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background px-6">
      <DissolveText
        as="h1"
        split="characters"
        className="max-w-xl text-center text-3xl font-semibold tracking-tight text-foreground sm:text-5xl"
      >
        Fog lifting over the harbour.
      </DissolveText>
    </div>
  );
}