Wensity

SVG Fire

Pro

Real fire simulated on the GPU, rising from any SVG's edges, with embers and glow.

svgfirelogoflameemberswebgltheme
SVG Fire component preview

Overview

SVG Fire is a React and Tailwind CSS fire effect that sets any SVG logo alight with a GPU fire simulation, in Next.js or any React app, with no dependencies. The artwork is rasterized, its upward facing edges become fuel, and curl noise carries the heat up while uneven cooling tears it into flames, colored on a blackbody ramp with embers and heat shimmer. Pass a URL, markup, or inline SVG, and tune intensity, rise, distortion, and colors. Rendering halts off screen and in background tabs. A src on another domain is fetched as text, so it needs CORS.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add svg-fire

Usage

Import SvgFire from @/components/wensity/svg-fire and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { SvgFire } from "@/components/wensity/svg-fire";


export default function Example() {
  return (
    <SvgFire
      src="https://assets.wensity.com/brand-icons/rune.svg"
      className="h-[520px] w-full"
    />
  );
}

Props

PropTypeDefaultDescription
srcstring-SVG url. Fetched as text and rasterized, so the fire can read the paths.
markupstring-Raw SVG markup, when you already have the file as a string.
childrenReact.ReactNode-Inline svg, used when src and markup are omitted. It is serialized, so keep it presentational.
intensitynumber0.92How hard it burns, from 0 to 1. 0 leaves the artwork untouched.
risenumber0.5How tall the flames rise, as a fraction of the frame.
distortionnumber0.72Heat shimmer over the artwork, from 0 to 1.
speednumber1Playback rate.
tintstring | false-Recolors the mark before it burns. Omit it and the mark follows the theme. Pass false to keep a multicolor logo's own colors.
theme"auto" | "light" | "dark""auto"Which scheme the mark follows when tint is omitted. Auto reads the dark class on html.
colors[string, string, string]["#d8340f", "#ff7a1c", "#ffe7a8"]Flame stops, from the cool tip through the body to the hot core.
pausedbooleanfalseFreezes the simulation on the current frame.
labelstring"Burning graphic"Accessible name for the burning graphic.

Related components

  • Dynamic Island Toast component preview

    Dynamic Island Toast

    A pixel-faithful Apple Dynamic Island that morphs, splits, and breathes while it hosts live activities inside your app.

  • Infinite Marquee component preview

    Infinite Marquee

    A seamless, GPU-only logo strip that never stutters or snaps at the loop point.

  • Apple-Style Sticky Scroll component preview

    Apple-Style Sticky Scroll

    A pinned cinematic section that morphs in lock-step with scroll, staying perfectly in sync whichever way you travel.

  • Morphing Shape Background component preview

    Morphing Shape Background

    Lava lamp background for React heroes: soft gradient shapes that drift and melt.