Real holographic foil works by interference patterns -- light waves bouncing off microscopic ridges create shifting colors at brightness levels that standard displays cannot reproduce. We have been trapped in the sRGB 0-255 range for 30 years. HDR displays push brightness 2-3x beyond that range, which makes convincing holographic effects possible in a browser for the first time.
The Core Technique
HDR is not primarily about new color spaces. It is about brightness multipliers that exceed 1.0:
background: hsl(240, 100%, 150%);
filter: brightness(2.5);
On a standard display, these values clamp to white. On an HDR display, you get colors that pop off the screen the same way real metallic surfaces catch light. The difference is immediately visible and physical -- people reach out to touch the screen.
Simulating Color Shift
Real holographic foil shifts colors based on viewing angle. Mouse position simulates the angle change by driving a gradient rotation and HDR intensity multiplier. Multiple color stops at hsl(hue, 100%, lightness * hdrIntensity) create the characteristic rainbow sweep.
Layered Interference
Real holographic materials have multiple interference layers. Four stacked effects approximate this: a base gradient for primary color shifts, a diffraction overlay using repeating fine-line gradients, a radial shimmer layer that tracks the mouse, and animated sparkle particles with HDR glow. Each layer uses a different blend mode (overlay, screen, multiply) to create the visual complexity of real interference patterns.
3D perspective transforms responding to mouse position make the surface feel physical:
const transform = `
perspective(1000px)
rotateX(${(mousePosition.y - 0.5) * 20}deg)
rotateY(${(mousePosition.x - 0.5) * 20}deg)
`
Graceful Degradation
const supportsHDR = window.matchMedia('(dynamic-range: high)').matches
const intensity = supportsHDR ? 2.5 : 1.0
On standard displays, the gradient shifts and 3D transforms still produce an interesting interaction. The HDR brightness range is what makes it look physical rather than digital.
Performance
Real-time gradient generation is expensive. Caching calculations when the mouse is stationary, using transform properties for hardware acceleration, and reducing frame rate during idle periods keep it smooth. The computation cost is in the gradient recalculation, not the rendering.
Try the HDR holographic experiment on an HDR-capable display to see what happens when your screen can finally match the brightness range of real materials.