Backgrounds✨ Premium
Storm Veil
A complete storm sky on canvas: three parallax cloud sheets, fine rain, and lightning generated by recursive midpoint displacement — seven subdivision levels, rendered in three passes to build the halo, the body and the blown-out core. A click triggers a strike.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Backgrounds has 50 effects, including 6 free. Explore the category →
3 usage examples
🎈
🎊
✨
How it works
The bolt is built by recursive midpoint displacement: start from a segment, offset its midpoint perpendicularly by a random amount, then repeat on both halves. Seven subdivision levels on the main trunk produce a broken path that never repeats — it is the historical lightning-generation algorithm, and it remains the most convincing.
The path is rendered in three stacked passes: first a wide, very translucent halo simulating scattering in humid air, then the body of the discharge, finally a thin blown-out core. Without those three layers a bolt looks like a white stroke; with them, it lights its surroundings.
Behind it, three cloud sheets made of radial gradients scroll in parallax: the upper layer is slow, dark and rich in puffs, the lower one faster and lighter. Fine rain passes over the top. The flash itself is not painted on the canvas but applied to a separate CSS veil, which lets its intensity and rate be controlled independently of the render.
Accessibility
- A hard cap of one flash per second is enforced. This is not an aesthetic setting: content flashing more than three times per second can trigger seizures in photosensitive people, and this limit keeps a wide safety margin.
- Under
prefers-reduced-motion: reducethe scene freezes: clouds stop, rain hangs, no lightning at all. The storm sky stays visible as a still image, preserving the mood without imposing motion or flashing. - An
aria-live="polite"region quietly announces strikes to screen readers without interrupting whatever is being read. The canvas is removed from the accessibility tree and the container carries arole="img"describing the scene. - The flash veil is an element separate from the canvas: you can lower its peak opacity, or neutralise it entirely, without touching how the bolts themselves render. That is the right lever when the context calls for caution.
Browser compatibility
Canvas 2D (paths, radial gradients, compositing), ResizeObserver to track size changes, devicePixelRatio for sharpness, plus requestAnimationFrame and matchMedia. No library, no image, no audio.
Chrome 64+✓ Full
Edge 79+✓ Full
Firefox 69+✓ Full
Safari 13.1+✓ Full
Safari iOS 13.4+✓ Full
Chrome Android 64+✓ Full
Without ResizeObserver the scene renders but no longer resizes: add a resize listener if you must cover very old browsers. Without JavaScript the canvas stays empty — give .stv-scene a dark sky gradient in CSS.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
index.html — structure
<div class="stv-scene" id="stvScene"
role="img"
aria-label="Animated storm background with procedural lightning — click to trigger a strike">
<!-- Clouds, rain and lightning are painted here -->
<canvas class="stv-canvas" id="stvCanvas" aria-hidden="true"></canvas>
<!-- Full-scene veil: this is what flashes, not the canvas.
Keeping them separate is what allows the flash rate to be capped. -->
<div class="stv-flash" id="stvFlash" aria-hidden="true"></div>
<!-- Quiet announcement for screen readers, without interrupting reading -->
<div class="stv-sr" aria-live="polite" aria-atomic="true" id="stvSR"></div>
</div>
🔒 Unlock the full code — from €2.99 the first month
Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| Trunk subdivision levels | 7 | Path detail. 4 gives an angular, crisp bolt, 7 a credible break-up, 10 a line so finely cut it reads as blurry again — no visible gain, real cost. |
| Displacement amplitude | proportional to segment length | How nervous the bolt is. A small amplitude gives an almost vertical discharge; a large one, an erratic path zigzagging across the scene. |
FADE — decay duration |
460 ms | How long the bolt takes to vanish. Under 200 ms the discharge reads dry and electric; past 800 ms it lingers and loses its violence. |
| Peak veil intensity | full flash | Peak opacity of the CSS veil. This is the first thing to lower for a cautious context: the bolt stays visible on the canvas, but the page stops whiting out. |
| Interval between strikes | random, fast first strike | The storm's rhythm. A short interval gives a violent, constant storm; a long one, held tension. The one-flash-per-second cap applies regardless. |
| Cloud sheet density and speed | 3 layers, slow/high/dark to fast/low/light | Depth of the scene. Spreading the speeds accentuates the parallax; bringing them together flattens the sky. The upper layer carries the most puffs. |
| Rain density | fine | Number and length of rain strokes. Dense rain partly veils the clouds and closes the scene in; sparse rain lets it breathe. |
FAQ
It is a fair question and the effect takes it seriously. A hard cap of one flash per second is enforced, where the risk threshold begins around three per second: the margin is wide. On top of that,
prefers-reduced-motion is honoured, which removes lightning entirely. If your context is sensitive — young audiences, health, public service — also lower the veil's peak opacity: you keep the discharge on the canvas without whiting out the page.So it can be controlled separately. If the flash were part of the render, capping its rate or lowering its intensity would mean touching the drawing engine. Moving it onto a CSS veil turns the bolt and the illumination into two independent settings: you can keep spectacular discharges with discreet lighting, which is exactly what most real contexts ask for.
Yes. Recursive midpoint displacement draws a random offset at every subdivision: over seven levels, that is more than a hundred independently drawn points for the trunk alone. The probability of seeing the same path twice is nil in practice. That is the main advantage over a pre-rendered sequence, which gives its loop away by the third repetition.
