Pointer · effect

Foil

A hot-foil stamp on paper, raked by the light your cursor carries.

move the cursor. it carries the light

Paste into Claude Code, Cursor or any agent. Pinned to a tag, so it will not change under you.

Options

paper #fbfaf4

css colour

The paper the stamp is pressed into. Match it to your page background or the panel reads as a pasted-in rectangle.

foilLow #7a3410

css colour

The foil where the light does not reach. Metal takes almost all its colour from the highlight, so this wants to be genuinely dark.

foilHigh #f0b070

css colour

The foil at the highlight. Copper by default; a pale grey here gives silver, a yellow gives gold.

spokes 12

3 to 40, good: 8 to 18

Points on the rosette. Above about 24 the petals are narrower than the relief and it turns into a disc.

scale 0.86

0.3 to 1.6, good: 0.7 to 1.1

Size of the stamp relative to the shorter side of the element.

relief 0.38

0 to 1, good: 0.35 to 0.7

Depth of the brushed relief. At zero the foil is a flat shape that changes brightness, which reads as plastic rather than metal.

sharpness 0.42

0 to 1, good: 0.3 to 0.65

How tight the highlight is. High is a mirror finish, low is a brushed one.

iridescence 0.3

0 to 1, good: 0.15 to 0.45

Spectral shift at grazing angles. Past about 0.6 it stops being a foil and becomes a hologram.

lightHeight 0.42

0.05 to 2, good: 0.3 to 0.7

How far above the surface the cursor's light sits. Low is a hard raking light that sweeps a narrow band; high floods the whole stamp at once.

grain 0.3

0 to 1

Paper tooth. Static by design. Animated grain flickers, and a flicker this fine is what WCAG 2.3.1 exists to prevent.

period 5

2 to 60 s, good: 5 to 20

Seconds for one orbit of the idle light, which is the motion used when no pointer is present. Exactly periodic, so the loop has no seam.

reducedMotionTime 0.9

0 to 60 s

The single frame shown when the user prefers reduced motion. Pick a light angle where the relief is legible.

WebGL2 for gl_VertexID; there is no WebGL1 fallback and none is planned
Pointer-driven, never pointer-dependent. With no cursor the light orbits on its own, so it works on touch and under reduced motion
Five evaluations of the height field per pixel: one for the mask, four for the gradient
No render targets, no textures, no allocations per frame