WebGL Animated Gradient Background with Film Grain
Overview
An animated gradient background for React and Next.js, written as a small WebGL shader with no 3D library. Up to five colours fold slowly through each other under real film grain, and they part around the cursor.
Layered noise folds your colours into each other, so you get slow, liquid shapes instead of round blobs drifting past. Grain refreshes about twelve times a second like film, and it also hides the banding dark gradients tend to show.
Details
- Category
- Backgrounds
- Interaction
- On Load + Mouse Move
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 082 / Backgrounds
WebGL Silk Fabric Background Shader with Cursor Ripple
On Load · Mouse Move · On Click
No. 062 / Backgrounds
WebGL Liquid Gold Background Shader
On Load · Mouse Move
No. 068 / Backgrounds
GSAP Interactive Canvas Background: Needle Field
Mouse Move · On Click · On Load
(02)FAQ
WebGL Animated Gradient Background with Film Grain — FAQ
01How do I use my brand colours?
Pass up to five in colors, as any CSS colour. Ordering them dark to light gives the smoothest result, and fewer than five simply repeat.
02How do I make it calmer or stronger?
Lower speed for slower movement, lower warp for simpler shapes, and set grain to 0 for a clean gradient. Grain around 0.07 is visible up close without getting noisy.
03Does it need Three.js?
No. It talks to WebGL directly and the only dependency is GSAP.
04How do I put content on top?
Pass it as children. The canvas sits behind them, and className sets the size and layout of the section.
05What happens with reduced motion?
It draws one still frame in your colours, with no movement and no reaction to the cursor.