Raymarching Shader for React

Raymarching Shader draws folded sheets of something like liquid porcelain: smooth lobes of pearl and cream, edged in ice blue and copper, glowing out of near-black space, while a warm orb of light drifts between them. The folds morph slowly as the field flows past the camera. A WGSL fragment shader on WebGPU walks a ray through a gyroid-like field for every pixel and adds light the closer the ray passes to a sheet, so the shapes have no hard surface: they glow from within.

Use it behind a premium hero, a creative studio's page or a product launch, where a sculptural, colorful backdrop sets the tone. For a liquid metal look in plain CSS, with no GPU, use the Mercury background; for a raymarched ocean, Sea Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a gradient of the same colors in browsers without WebGPU.

Installation

Usage

import { RaymarchingShader } from "@/components/ui/raymarching-shader";

<RaymarchingShader className="flex min-h-[32rem] items-center justify-center">
  <div className="rounded-xl bg-black/60 px-8 py-6 backdrop-blur">
    <h1 className="text-5xl font-semibold text-white">Ship faster</h1>
  </div>
</RaymarchingShader>

Raymarching Shader is a container: your content sits on top of the folds, 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 folds are bright and the gaps between them dark, in both color schemes, so put white text on a panel such as bg-black/60.

Demos

Ice

hue={0.5} shifts the color bands half a cycle, so ice blue and teal take over where copper was, and glowColor="#9ad7ff" turns the orb cold to match.

In a card

The folds scale with their box. speed={0.3} slows the flow to a drift, which suits a profile or pricing card where the eye should stay on the text.

Performance

About 2 ms of GPU time a frame at 1280×720 on an M2 Max laptop, and about 4 ms at quality={1}; slower GPUs take several times longer. Each pixel walks up to 120 steps through the field, so the shader renders at half resolution by default (quality 0.5): the folds are soft, so you can't tell. detail sets the step count, from 48 at 0.4 to 120 at 1, and rays stop early once they leave the field. 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 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 colors, a cream lobe and a warm orb beside a blue-grey fold on dark brown, 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 folds are decoration: they're hidden from assistive tech and let every click through to your content. With reduced motion it draws one still frame, the orb in a cream fold, and stops. Nothing flashes: the folds morph over seconds and the orb drifts slowly. Text needs a panel: across the renders we measured, white text reaches 4.5:1 on 69% of the shader and black text on 33%. White text on a bg-black/60 panel stayed above 5.8:1 on every pixel.

FAQ

Credits

Inspired by Raymarching (opens in a new tab) by Frostbyte_ on Shadertoy. This is a new shader written from a description of the look, not a port: the field, the camera, the palette, the orb and the tone curve are ours. The folded field follows XorDev's idea of "dot noise", a gyroid whose two halves are turned against each other, with our own rotation and scale.

API Reference