Oil Slick Shader for React

Oil Slick Shader draws patches of oil on black wet asphalt on the GPU. Each patch is a thin film whose thickness follows two levels of swirling fractal noise, and its color is computed the way light does it: the film reflects each of eight wavelengths from 400 to 700 nm by how its two reflections interfere, and those are summed into a color through the CIE color-matching curves. So the bands run in the real order, magenta, gold, teal and violet, follow the swirl, and thin out through silver to gray at each patch's feathered edge. The asphalt under it has a faint grain and a soft sheen, and wide dark gaps between the patches leave room for text. Every pixel is computed each frame by a WGSL fragment shader on WebGPU, for about 1 ms of GPU time a frame.

Use it behind a streetwear or sneaker drop, a music release, or a launch that wants iridescence with an edge. For silver foil with sliding rainbow bands in plain CSS, use the Hologram background; for spectral arcs on a grooved disc, Diffraction Shader; for stress fringes round moving loads, Photoelastic Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows soft CSS glows of the same colors in browsers without WebGPU.

Installation

Usage

import { OilSlickShader } from "@/components/ui/oil-slick-shader";

<OilSlickShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="rounded-2xl bg-black/40 px-6 py-3 text-5xl font-semibold text-white">
    Drop 07
  </h1>
</OilSlickShader>

Oil Slick Shader is a container: your content sits on top of the oil, 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 asphalt is near-black in both color schemes, so put white text on it.

Demos

Pastel, with a soap drop

coverage={1} floods the whole frame with oil, and thickness={0.3} thins the film to its first colors, silver, gold and pale blue. interactive makes the pointer a drop of soap: the film pulls back from it and piles up round it in a ring of deeper color. When the pointer leaves, the film flows back and the ring fades.

In a card

swirl={0.6} relaxes the swirls into broad, smooth bands for a small surface, and coverage={0.65} lets the oil fill a little more of it.

Performance

About 1 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. Most of it is the swirl, five layers of fractal noise a pixel; the color is eight sines. None of the props changes the cost. The film's thinnest bands are a few pixels wide, so keep quality at 1 unless the GPU needs the room: at 0.5 they go soft. 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 soft magenta, teal and gold glows on your backgroundColor, 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 oil is decoration: it's hidden from assistive tech and lets every click through to your content, even with interactive, which only reads the pointer's position. With reduced motion it draws one still frame, a long ribbon of oil across the asphalt, and stops. Nothing flashes: the patches drift and swirl over tens of seconds. Over ten moments, white text on the bare asphalt is above 16:1 for half the frame, but the brightest film drops it to 2:1, and the patches move under your text, so set it on a bg-black/40 panel, which keeps white text above 5:1 everywhere.

FAQ

API Reference