ASCII Fluid

Heroes 76

About

A WebGL fluid background where mouse trails leave swirling ink that quantizes into a clean ASCII/letter brightness ramp, for hero sections and full-page backgrounds.

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

Code

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

Usage.tsx

"use client";

import AsciiFluid from "@/components/ui/ascii-fluid";

export default function AsciiFluidDemo() {
  return (
    <div className="relative h-screen w-full overflow-hidden bg-background">
      <AsciiFluid />
      <div className="relative z-10 flex h-full items-center justify-center p-10">
        <p className="text-sm text-muted-foreground">
          Move your mouse to stir the ink
        </p>
      </div>
    </div>
  );
}