Pointer Glow

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 PointerGlow React component. The JavaScript version takes the same names in its settings object.

colors

[string, string, string], default ["#08090c", "#7aa7ff", "#ffe6c7"]

Wall in shadow, Lamp light, Lamp core. Hex colours.

speed

number, default 1

Speed. Range 0 to 3.

scale

number, default 1

Higher makes the bumps finer. Range 0.4 to 3.

intensity

number, default 1

Reach. Range 0.3 to 3.

seed

number, default 52

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

Light. Cost 1 of 3.

A few noise lookups per pixel. Comfortable as a full-page background on phones and older laptops.

Related shaders

• Fog Veil

  Code
• Event Horizon

  Code
• Lodestone

  Code