Fog Veil

Using it

Give it a box

The canvas fills its parent. Put it in a positioned container with a size, or pass classes such as absolute inset-0 to stretch it behind your content.

Keep it behind the content

The canvas is decorative and hidden from screen readers. Place your content after it in a relative container so text stays on top and selectable.

It looks after itself

Rendering starts when the canvas scrolls into view and stops when it leaves or the tab is hidden. Visitors who prefer reduced motion get one still frame.

Pointer reactive

This shader follows the pointer across the whole window, so it still reacts when content sits on top of it. Nothing to wire up.

Props

Props of the FogVeil React component. The JavaScript version takes the same names in its settings object.

colors

[string, string, string, string], default ["#0b0d12", "#4a5262", "#1b2350", "#ffb27a"]

Fog in shadow, Fog in light, Light, deep, Light, core. Hex colours.

speed

number, default 1

Speed. Range 0 to 3.

scale

number, default 1

Higher makes the fog finer. Range 0.4 to 2.5.

intensity

number, default 1

How wide a path the cursor clears. Range 0.4 to 2.5.

refill

number, default 1

How quickly the fog rolls back in. Range 0.2 to 3.

seed

number, default 31

Seed. Range 0 to 999.

paused

boolean, default false

Freeze the animation on the current frame.

maxDpr

number, default 2

Upper bound for devicePixelRatio. Lower it to save GPU time.

className

string

Classes for the canvas, for example to position it.

style

CSSProperties

Inline styles for the canvas.

Performance

Moderate. Cost 2 of 3.

Layered noise per pixel. Fine full-screen on recent phones and laptops; on weak GPUs the resolution steps down automatically.

Related shaders

• Event Horizon

  Code
• Pointer Glow

  Code
• Lodestone

  Code