The HTML content you're reading right now is overlaid with a full-screen <canvas> element. There is a fragment shader that defines opacity and color for each pixel of the <canvas>. Shader input values are scroll progress (aka animation progress), time, and resolution.
While time and window size (resolution) are super easy to gather, for animation progress I use GSAP ScrollTrigger plugin.
Once the inputs are prepared, we pass them as uniforms to the shader. The WebGL part of this demo is a basic JS boilerplate to render a fragment shader on the single full-screen plane. No extra libraries here.
The fragment shader is based on Fractal Brownian Motion (fBm) noise.
First, we create a semi-transparent mask to define a contour of burning paper. It is basically a low-scale fBm noise with scroll progress value used as a threshold.
Taking the same fBm noise with different thresholds we can:
(a) darken parts of the paper so each pixel gets darker before turning transparent
(b) define the stripe along the paper edge and use it as a mask for flames.
The fire is done as another two fBm based functions - one for shape and one for color. Both have a much higher scale and both are animated with time value instead of scroll progress.
