Cel-shaded WebGL flames for landing heroes: tongues lick up from the bottom in flat bands of heat, and the fire reaches for the pointer.
"use client"
import { ShaderAnimeFire } from "@/components/ui/shader-anime-fire"
const settings = {
colors: ["#B4200A", "#FF6512", "#FFC04A"],
speed: 0.6,
intensity: 1,
height: 0.45,
interactive: true,
dither: false,
}
// Unchanged colors are left unset so the component picks its own light/dark palette.
function sameColors(a: string[], b: string[]) {
return a.length === b.length && a.every((c, i) => c.toLowerCase() === b[i]!.toLowerCase())
}
export default function ShaderAnimeFireDemo(props: Partial<typeof settings>) {
const s = { ...settings, ...props }
return (
<div className="flex min-h-[520px] w-full items-center justify-center bg-background p-4">
<div className="relative h-[480px] w-full max-w-4xl overflow-hidden rounded-xl border border-border bg-background">
<ShaderAnimeFire
className="absolute inset-0"
colors={sameColors(s.colors, settings.colors) ? undefined : s.colors}
speed={s.speed}
intensity={s.intensity}
height={s.height}
interactive={s.interactive}
dither={s.dither}
/>
</div>
</div>
)
}