dacre-denny / retro-fire-css Goto Github PK

Inspired from games of the 80's and 90's, RetroFireCSS applies a dynamically generated retro fire effect to the background of page elements

Heading showcase

Feature showcase

<!-- Import the RetroFireCSS painter -->
<script src="/src/lib.js"></script>

<!-- Apply RetroFireCSS painter -->
<h1 style="background: paint(retro-fire);">I'm on fire</h1>

• Fire is dynamically rendered each time element is redrawn
• Adaptive to dimensions of element
• Accepts simulation parameters;
  • --fire-ambient
  • --fire-turbulence
  • --fire-scatter
• Accepts rendering parameters;
  • --fire-scale

The following (optional) CSS variables provide per element control over rendering and simulation behavior:

.retro-fire-background {
  /* Rendering pixelation [1-100] */
  --fire-scale: 4;

  /* Randomize fuel distribution [0.0-1.0] */
  --fire-scatter: 0.25;

  /* Scale randomized heat diffusion [0.0-1.0] */
  --fire-turbulence: 0.25;

  /* Ambient heat [0.0-1.0] */
  --fire-ambient: 0.125;

  /* Apply retro fire worklet */
  background: paint(retro-fire);
}

A few of the things I learnt from this experiment:

My original goal was to achieve an animated fire effect similar to this, via the PaintAPI. I discovered animation wasn't going to be possible due to requestAnimationFrame, setTimeout and setInterval not being available in the context of a Paint Worklet.

The putImageData() method is not available on the context interface passed to the Paint Worklet's paint() method (according to MDN, the context passed to a Paint Worklet's paint method implements a subset of CanvasRenderingContext2D, as PaintRenderingContext2D). I therefore had to paint each pixel of the fire simulation one at a time, rather than via a single call to putImageData().