00

Holographic stickers — compare

Five distinct foil techniques on real Whisper art from stickers/whisper-stickers-2025/. Hover or drag across each sticker — shine should track the pointer. The prior jal-co/holosticker WebGL path is unused (heavy Three.js bundle + many GL contexts was unreliable here).

01

CSS-only foil

Conic + linear rainbow layers; background-position and angle driven by --mx/--my. Overlay uses mix-blend-mode: color-dodge masked to the sticker alpha.

02

SVG specular + displacement

Per-sticker SVG filter: feTurbulence → feDisplacementMap for a subtle holographic warp, plus soft feSpecularLighting with a fePointLight at the cursor (eases back to idle on leave).

03

Canvas 2D iridescence

Draw the sticker, then a moving conic rainbow with globalCompositeOperation = "source-atop" and soft-light layering so only opaque sticker pixels catch the foil.

04

CSS 3D tilt + sheen

Perspective rotateX/rotateY from pointer, plus a moving ::after rainbow band (soft-light) clipped to the die-cut mask.

05

Lightweight WebGL foil

Tiny custom fragment shader (no Three.js): rainbow bands from pointer UV, multiplied by sticker alpha. Falls back to layered color-dodge CSS if WebGL is unavailable.