Shader Anime Fire

"use client"

import { ShaderAnimeFire } from "@/components/ui/shader-anime-fire"

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden bg-background">
      <ShaderAnimeFire />
      <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">
          Ship something that catches
        </h1>
        <p className="mt-3 text-muted-foreground">
          Flames along the floor. The copy stays clear.
        </p>
      </div>
    </section>
  )
}

<ShaderAnimeFire theme="light" />
<ShaderAnimeFire theme="dark" />

<ShaderAnimeFire dither pixelSize={3} />