Mesh Gradient — live WebGL hero effect

Paper Shaders · @paper-design/shaders-react@0.0.77 · Apache-2.0

Mesh Gradient — an animated WebGL hero background from Paper Shaders (Apache-2.0, open source). Rendered and measured live: 61fps on a 1440×900 canvas. Exact config shipped as tokens · npm i @paper-design/shaders-react.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/effects/mesh-gradient.

Library

Paper Shaders · @paper-design/shaders-react@0.0.77 · Apache-2.0

https://github.com/paper-design/shaders

Install

npm i @paper-design/shaders-react

Usage — the measured config

import { MeshGradient } from '@paper-design/shaders-react';

<MeshGradient colors={["#12081f", "#5100ff", "#ea00ff", "#ffb84d"]} distortion={0.9} swirl={0.6} speed={0.5} style={{width: '100%', height: '100vh'}} />

Measured live

61fps · canvas 1440x900 · dark scheme

Agent-ready

MCP: get_recipe("Paper Shaders", "Hero Effect") — the full config, params, fps and license/NOTICE in one call.