Shader Fire

Heroes 12

About

A theme-aware WebGL fire wash that renders sparse flame tongues rising from the bottom of a landing hero, with optional pointer-driven heat and an ordered-dither pixel mode.

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

Code

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

Usage.tsx

import { ShaderFire } from "@/components/ui/shader-fire";

export default function ShaderFireDemo() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden bg-background">
      <ShaderFire />
      <div className="relative z-10 mx-auto flex min-h-svh max-w-xl flex-col items-center justify-center px-6 text-center">
        <p className="text-xs font-medium tracking-[0.18em] text-muted-foreground uppercase">
          New
        </p>
        <h1 className="mt-3 text-4xl font-medium tracking-tight">
          Heat under the headline
        </h1>
        <p className="mt-3 text-muted-foreground">
          The fire stays a wash. The page stays readable.
        </p>
      </div>
    </section>
  );
}