Skip to content

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

Notifications You must be signed in to change notification settings

dacre-denny/retro-fire-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 

Repository files navigation

RetroFireCSS

Summary

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

Demos

Heading showcase

Feature showcase

Quick Start

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

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

Features

  • 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

API

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

Examples

Example of RetroFireCSS result Example of RetroFireCSS result Example of RetroFireCSS result

Notes

A few of the things I learnt from this experiment:

Animation is not possible from Paint Worklet context

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.

Paint Worklet's context is a subset of CanvasRenderingContext2D

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().

About

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

Topics

Resources

Stars

Watchers

Forks