Hero ASCII Rainfall

Heroes

About

A full-bleed ASCII rain hero background where every column falls independently and streams bend sideways like wind when the pointer moves nearby.

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

Code

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

Usage.tsx

import { Downpour } from "@/components/ui/hero-ascii-rainfall";

export default function DownpourDemo() {
  return (
    <Downpour className="h-[600px] min-h-0">
      <h1 className="text-4xl sm:text-6xl font-bold tracking-tight text-foreground">
        Build in the rain.
      </h1>
      <p className="max-w-md text-muted-foreground">
        A full-bleed ASCII precipitation field where the pointer stirs the wind
        through every falling stream.
      </p>
    </Downpour>
  );
}