Flat, graphic fire rather than a photo of one. Four crisp bands (ember, flame, core, and a hot center) curl up from the bottom edge over a warm glow that flickers under it all. Move the pointer over it and a plume of flame reaches up toward it. Toggle Dither to print the same bands as ordered Bayer pixels. Press d to switch theme.

Preview

Now burning

Ship something that catches

Flames lick up from the floor and leave the copy clear. Move the pointer and the fire reaches for it.

Props

Palette

Speed0.60

Intensity1

Height0.45

Copy

Headline over the fire

Interactive

Flames reach for the pointer

Dither

Ordered Bayer pixels

Pixel size1

Installation

pnpm dlx shadcn@latest add @23rd/shader-anime-fire

Or install straight from the public GitHub source registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/shader-anime-fire

Usage

Pin it behind a relatively positioned section. Keep content in a later stacking context (relative z-10). Default theme="auto" follows shadcn / next-themes (class on <html>).

"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>
  )
}

Force a palette if the parent theme should not drive it:

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

Print the same bands as ordered Bayer pixels:

<ShaderAnimeFire dither pixelSize={3} />

Props

Prop	Type	Default
`colors`	`string[]`	ember / flame / core
`speed`	`number`	`0.6`
`intensity`	`number`	`1`
`height`	`number`	`0.45`
`interactive`	`boolean`	`true`
`dither`	`boolean`	`false`
`pixelSize`	`number`	`1`
`theme`	`"light" \| "dark" \| "auto"`	`auto`
`className`	`string`	React only
`class`	`string`	Svelte only