Hero ASCII Schlieren

Heroes 56

About

A full-screen animated ASCII hero background that renders an optical schlieren effect — a rising thermal plume and shear layer drawn as sparse bright/dark bands on a canvas, with the pointer rotating the knife edge to reveal different gradients.

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

Code

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

Usage.tsx

import { SchlierenRig } from "@/components/ui/hero-ascii-schlieren";

export default function SchlierenRigDemo() {
  return (
    <SchlierenRig>
      <h1 className="max-w-xl text-4xl font-semibold tracking-tight text-foreground sm:text-6xl">
        Only the edges survive.
      </h1>
      <p className="max-w-md text-sm text-muted-foreground sm:text-base">
        Still air transmits nothing — only the steep density boundaries of a
        rising thermal survive the knife edge. Sweep the pointer across the
        field to rotate that knife.
      </p>
    </SchlierenRig>
  );
}