WebGL Marble Background with Gold Veins on Scroll
Overview
A polished marble background for React and Next.js, written as a small WebGL shader. Gold runs slowly along the veins as the section comes into view and as you scroll, and a window's reflection slides across the stone with the cursor.
The stone is domain-warped noise, stretched along one diagonal so it has a grain, with veins that kink and fork rather than curl like smoke. It has fine hairlines, mineral bleeding out of the veins, and a faint crystal grain. All of it is drawn once into a texture, so after the first frame the running cost is a single texture read per pixel.
Details
- Category
- Backgrounds
- Interaction
- On Scroll + Mouse Move
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 062 / Backgrounds
WebGL Liquid Gold Background Shader
On Load · Mouse Move
No. 082 / Backgrounds
WebGL Silk Fabric Background Shader with Cursor Ripple
On Load · Mouse Move · On Click
No. 056 / Backgrounds
WebGL Animated Gradient Background with Film Grain
On Load · Mouse Move
(02)FAQ
WebGL Marble Background with Gold Veins on Scroll — FAQ
01Can I tie the gold only to scrolling, or only to the view?
Yes, with viewReveal. At 0 the gold moves only with scrolling, at 1 it finishes by itself once in view, and the default of 0.62 does some of each. duration sets the seconds it takes to cross the whole section.
02How do I get a different pattern?
Change seed to any number. Small changes slide the same stone along, and bigger ones give you a different slab. scale sets how close you are to the stone. The veins don't know where your text is, so try a few seeds until the area behind your heading is calm.
03What does it need from my page?
React and Tailwind CSS v4 for a few layout classes on the wrapper. It has no npm dependencies: no Three.js, no GSAP, and no image files to load. Give the section a height with className.
04Can I change the colours?
Yes. color, vein and gold each take any CSS colour, so a dark stone with pale veins works too. Dark text reads best on the default ivory.
05What happens without WebGL or with reduced motion?
Without WebGL, or when the browser would draw on the CPU, the section keeps a drawing of a few veins in your colours. With reduced motion it draws one still frame with all the gold in place.