Hero ASCII Eclipse

Heroes

About

A full-bleed animated ASCII hero background where a dark disc eclipses a glowing sun disc over a starfield, with a corona that blooms only when the pointer-dragged transit nears perfect alignment.

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

Code

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

Usage.tsx

import { Totality } from "@/components/ui/hero-ascii-eclipse";

export default function HeroAsciiEclipseDemo() {
  return (
    <Totality className="h-[640px] min-h-[640px] sm:h-[760px] sm:min-h-[760px]">
      <h1 className="text-3xl font-semibold text-foreground sm:text-5xl">
        Bring it to totality.
      </h1>
      <p className="max-w-md text-sm text-muted-foreground sm:text-base">
        The cursor carries the transit. Line the centers up and the corona
        answers — no images, no dependencies, just characters.
      </p>
    </Totality>
  );
}