WebGL Silk Fabric Background Shader with Cursor Ripple
Overview
A flowing silk background for React and Next.js, written as a small WebGL shader. Long folds carry a highlight along the threads the way real satin does, and the cursor presses a slow ripple through the cloth.
A smooth gradient can suggest fabric, but it can't look woven. Here each pixel works out the angle to the thread rather than to the surface, which is what stretches a satin highlight along its folds. Each thread sits at a slightly different angle, so the highlight breaks into fine lengthwise streaks. Warp and weft also cross at thread scale, but that weave only shows on a high-density screen. On a 1x screen it fades out, because threads that fine would read as a screen door.
Details
- Category
- Backgrounds
- Interaction
- On Load + Mouse Move + On Click
- Trigger
- On Load
- 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. 065 / Backgrounds
WebGL Marble Background with Gold Veins on Scroll
On Scroll · Mouse Move
No. 056 / Backgrounds
WebGL Animated Gradient Background with Film Grain
On Load · Mouse Move
(02)FAQ
WebGL Silk Fabric Background Shader with Cursor Ripple — FAQ
01How do I change the colours?
color is the cloth in shadow and sheen is the highlight, both any CSS colour. Dark cloth with a pale sheen looks most like satin. light sets where the pool of light falls, so you can keep the bright folds away from your text.
02How do I put content on top?
Pass it as children. The canvas sits behind them and never takes pointer events, so links and buttons work as normal. className sets the size and layout of the section.
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, such as min-h-dvh.
04Does it work on phones?
Yes. Swiping over it scrolls the page, a tap starts a ripple, and the folds drift by themselves. It caps the pixel ratio at 1.5 and lowers it in steps if frames run slow.
05What happens without WebGL or with reduced motion?
Without WebGL, or when the browser would draw on the CPU, a CSS version in your colours stays in place. With reduced motion it draws one still frame of the cloth.