Vanta White
Shapes that render brighter than white on HDR screens.
Two brightness ceilings, and a gap between them
Most phone screens have two brightness ceilings. The normal one CSS uses for white, and a second, higher one the OS reserves for HDR video. A webpage can actually reach that second ceiling — if you feed it real HDR footage and mask it into a shape.
Dongsung Kim documented the underlying CSS behavior in 2021. csscade.com later called it "HDR white shinethrough" and showed it masking video into illustration work. What didn't exist was a tool that let you draw freely with it.
A canvas for shapes that glow past white
Vanta White is that tool. Draw circles, polygons, stars, or freeform paths with a pen tool. Arrange them into patterns — radial mandalas, spirals, grids, sine waves, Lissajous curves. Set type in a few font families. Import your own SVG. All of it renders through the same live HDR video mask, so on a capable screen the shapes don't just look white — they exceed it.
Pan and zoom the canvas, Figma-ish keybindings throughout, no build step.
“The effect only shows on HDR-capable displays — iPhone, iPad Safari, XDR Macs. Everywhere else it degrades to plain white, which is the correct fallback, not a bug.”
— Vanta White
Screenshots can't capture it
A screenshot composites the SDR frame. The HDR headroom doesn't survive. You have to see it on the screen it's intended for — which is part of what makes it interesting as a medium. It's a display-specific experience, not a format you can export.
HDR video, CSS masking, nothing else
The trick is entirely CSS: a <video> element playing HDR footage, masked with mask-image into whatever shape is on the canvas. The browser's compositor does the rest, letting the HDR luminance values through into the display pipeline. No WebGL, no shaders, no native code.
The scene can be serialized to JSON and reloaded, so work can be saved and resumed.