SpotlightCard

Options

light #fff6e4

css colour

Colour of the lamp. Warm, unless the room is not. It is screened over the card rather than painted on it, so a saturated colour tints the whole face.

sheen 0.5

0 to 1

How much the face lifts under the lamp. Paper scatters, so this wants to stay low and wide: a tight bright spot is a light source sitting on the card rather than a card being lit.

spread 0.85

0.1 to 2

How wide the lift is, as a share of the card. Large and weak reads as a lamp; small and strong reads as a torch.

edge 0.7

0 to 1

How brightly the edge facing the lamp catches. This is the part that sells it: a glow with no lit edge reads as something emitting light, and a card does not emit anything.

shade 0.5

0 to 1

How far the side away from the lamp falls into shade. This is what makes it read at all. A near white card lifted a few percent looks like a near white card; what you see when something is lit is the gradient across it, and half of that gradient is the dark half.

ease 0.12

0.01 to 1

How fast the lamp catches up with the cursor, as a fraction of the remaining distance per frame. At 1 it is welded to the pointer and reads as a rectangle following the mouse.

What it needs

Dependencies

None at all

Browser

No WebGL

Frame budget

~0.2 ms · 0 context

Pinned to

v0.11.0

• No canvas and no WebGL. One added span whose background and box-shadow are painted by CSS from the pointer position
• Two layers rather than one: a wide weak sheen across the face, and a hard highlight on whichever edge is turned toward the light. Paper is matte, so it scatters rather than reflecting a bright spot
• Light and shade together. Lifting the face alone is what the physics says and what nothing in a light room can see, so the far side darkens as the near side brightens. Painted normally rather than screened, because screening cannot darken anything
• Window pointer scope, so the sheen moves before the cursor reaches the card
• Two style writes per frame on one composited element. Nothing is measured and nothing reflows
• The layer is added once, at setup, and removed on destroy