Hologram Shader for React

Hologram Shader draws a sci-fi projection. Soft diagonal interference bands in royal blue and deep navy drift across the box, with teal, violet and the odd gold where the color channels disagree; broad scan ripples roll over them, fine grain shimmers, a cyan glow lines the edges, and a soft bright band sweeps up every five seconds. Now and then the power dips a little. Every pixel is computed each frame by a WGSL fragment shader on WebGPU: the bands are sums of sines, and red, green and blue each sample them at a different moment, which is where the colors come from.

Use it behind a dark hero, a launch or a product page with a futuristic feel. For iridescent foil in plain CSS, with your theme's colors and no GPU, use the Hologram background; for corrupted, glitching video instead of a clean projection, Glitch Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS gradient of the same bands in browsers without WebGPU.

Installation

Usage

import { HologramShader } from "@/components/ui/hologram-shader";

<HologramShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold text-white">Project the future</h1>
</HologramShader>

Hologram Shader is a container: your content sits on top of the projection, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". The projection is dark in both color schemes, so use white text: it reads at 4.5:1 or better over 95% of the frame and at about 10:1 on half of it. The brightest cyan patches and the rim drop to about 2:1, so keep small body text away from the edges, or on a panel.

Demos

In a card

intensity={0.7} dims the projection for a small surface, like a classified file on a dark dashboard.

Violet

color="#a78bfa" tints the projection violet, and the rim glow and the sweep follow as deeper tones of it. stability={0.8} makes the power a little less steady: the projection is slightly dimmer and dips more often.

Performance

About 0.3 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. The bands are soft, so on a slow GPU quality={0.5} renders a quarter of the pixels and looks nearly the same. The animation stops when the shader scrolls out of view, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu (about 50 KB gzipped) loads only when the first one mounts.

Browser support

The shader needs WebGPU: Chrome and Edge, Safari 26 and later, and Firefox on Windows and macOS. Elsewhere, and until the first frame, the box shows a CSS gradient of the same diagonal bands and rim, in your color, so the layout never jumps. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The projection is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame and stops. Its flicker is built to stay well under three flashes a second: power dips and scan bursts each come at most once per two seconds, fade in and out over a few hundred milliseconds, and dim by at most 30%; speed is capped at 2, so that's at most one of each a second. The frame is dark (its mean relative luminance is under 0.08), so a dip changes it far less than the 10% that counts as a flash. For text contrast, see Usage.

FAQ

API Reference