Text Ligature Melt

Text 10

About

An animated headline where glyphs near the cursor visually melt and fuse into liquid ligatures using an SVG gooey blur filter, with a faint ambient drift when idle.

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

Code

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

Usage.tsx

import { LigatureMelt } from "@/components/ui/text-ligature-melt";

export default function LigatureMeltDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background px-6">
      <LigatureMelt
        text="SURFACE TENSION"
        className="text-5xl font-bold tracking-tight text-foreground sm:text-7xl"
      />
    </div>
  );
}