Skip to content
animorio
IT
Back to the library

The burning veil

An orange veil covers the page while the number climbs to a hundred, then it catches fire from the bottom: a ragged front with embers on the edge, drawn by a shader.

Transitions, WebGLGSAP, WebGLAdvancedFree

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.

Download the zip
<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Il velo che brucia</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- la pagina vera, sotto il velo -->
  <main class="pagina">
    <p class="sopra">Benvenuto</p>
    <h1 class="titolo">
      <span class="riga"><span>Il sito compare</span></span>
      <span class="riga"><span>dietro la carta</span></span>
      <span class="riga"><span>che brucia.</span></span>
    </h1>
    <p class="sotto">Il velo è un solo triangolo a tutto schermo: il fronte del fuoco lo disegna lo shader, con un rumore frattale che sale dal basso.</p>
  </main>

  <!-- il velo: in WebGL se c'è, altrimenti un div che si ritira -->
  <div class="velo" aria-hidden="true">
    <canvas class="velo__tela"></canvas>
    <div class="velo__piano"></div>
    <div class="conta">
      <p class="conta__numero"><span class="conta__cifre">000</span></p>
      <p class="conta__sotto">caricamento</p>
    </div>
  </div>

  <button type="button" class="rivedi" hidden>Rivedi il fuoco</button>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

What it does

The page is covered by an orange veil with a big number climbing from zero to a hundred. At a hundred the number disappears and the veil starts burning from the bottom: the edge of the fire is not a straight line but a ragged front rising and swaying, with a dark band of burnt paper, a line of glowing embers and, below it, the page appearing. When the fire reaches the top the veil is gone and the title rises from its mask.

How it works

One triangle for the whole screen

The veil is a WebGL canvas with a single triangle bigger than the screen (vertices -1,-1 / 3,-1 / -1,3): three vertices and no library. All the work is done by the fragment shader, one pixel at a time.

The ragged front

A fractal noise (five octaves of value noise) moves the front line: d = y + (noise - 0.5) * 0.55 - front. Where d is negative the veil is burnt and the pixel is transparent. The noise scrolls upwards over time: the little flames rise.

Char, ember, core

Three smoothsteps on the same distance d: a wide band that darkens the veil, a narrower one in the ember colour that flickers over time, a very thin almost white one. Below the edge an orange glow settles on the page.

GSAP keeps the time

A timeline takes the number to a hundred and then uFronte from 0 to 1; GSAP's ticker draws the canvas only while needed. Without WebGL the same timing pulls back a div with clip-path.

Values to change

NameFileDefaultWhat it changes
FUOCOscript.js2.6Seconds for the front to cross the screen. Under two seconds it looks like a cut, not a fire.
ONDEscript.js3.0How ragged the front is: higher, more small flames.
VELO / BRACEscript.jsarancio / rosso fuocoThe colours of the veil and the ember, in RGB from 0 to 1. The veil must match --velo in the CSS, used without WebGL.
CONTEGGIOscript.js2.2Seconds for the number to climb to a hundred.

When to use it

For the entrance of a site that wants a theatrical moment on the first visit: an event, a label, a portfolio. Once only, then remember you have already shown it.

On phones

It works the same; the canvas is drawn at most at 1.5 times the screen's pixels, so even weaker phones keep up.

With reduced motion

No veil and no number: the page is there straight away.

Pitfalls

  • With premultipliedAlpha (the default) the colour coming out of the shader must be multiplied by alpha: with alpha alone at zero a light halo stays on the edges.
  • Start the front below the screen and end it above (here from -0.4 to 1.4): the noise moves the line by half a screen, and without a margin you already see a hole at the start.
  • The sine-based caso() function loses precision in mediump: ask for highp when available, otherwise on some phones the noise turns blocky.
  • When the fire is over, get the canvas out of the way and stop drawing: a full-screen shader running for nothing heats the phone.

Libraries

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Weight: 11 KB of our own files.

Testing

Tested on 26 September 2026

  • Desktop: Done
  • Phone: Done
  • Reduced motion: Done
  • Safari on iPhone: Done

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.

From the same family

All animations