Fluid Ink Morph

Text 24

About

Animated text that dissolves in from a fluid, ink-like turbulence and settles into crisp letters while shifting color.

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

Code

How Fluid Ink Morph is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { InkMorphText } from "@/components/ui/ink";

export default function InkMorphDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background px-6 py-16">
      <div className="flex flex-col items-center gap-6 text-center">
        <span className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
          Fluid Ink Morph
        </span>
        <InkMorphText text="Ink Morph" />
        <p className="max-w-sm text-sm text-muted-foreground">
          Text emerges from ink-like turbulence and settles into crisp letters.
        </p>
      </div>
    </div>
  );
}