MeshGradient

A WebGL flowing gradient: four color blobs are domain-warped into slowly streaming ribbons, blended in Oklab, with a satin sheen gliding along the flow and fine film grain.

Elyri

WebGL · Real-time

Components that come alive

A React library of living backgrounds, motion and text effects — built to make your interface feel alive.

Customize

Text

Blob 1

#6e6af0

Blob 2

#f472b6

Blob 3

#fbbf77

Blob 4

#38bdf8

Grain0.35Speed1Follow pointer

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content layered above the background
`colors`	`[string, string, string, string]`	`['#6e6af0', '#f472b6', '#fbbf77', '#38bdf8']`	Colors of the four blobs (hex)
`grain`	`number`	`0.35`	Film grain strength, 0 disables it
`speed`	`number`	`1`	Animation speed multiplier
`interactive`	`boolean`	`true`	Whether the color swirl follows the pointer
`className`	`string`	—	Extra class name

Dependencies

WebGL