GradientMesh

Render an animated WebGL mesh gradient background using brand colours or custom colours.

GradientMesh is a client component that renders the MeshGradient shader from @paper-design/shaders-react inside a Box with overflow: hidden and pointer-events: none. Use it as an animated background behind hero sections and banners.

Ship faster

lowmediumhigh

Import#

typescript

import { GradientMesh } from "@reactberry/system/blocks";

Usage#

typescript

import { GradientMesh } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";

export default function Hero() {
  return (
    <Box position="relative" height="70vh" overflow="hidden">
      <GradientMesh position="absolute" top="0" left="0" width="100%" height="100%" />
      <Box position="relative" p="l">
        <Text as="h1" fontSize="xxxl" fontWeight="700" color="white">
          Ship faster
        </Text>
      </Box>
    </Box>
  );
}

Examples#

Custom colours#

Pass colors to replace the brand colours. intensity="low" gives a calmer movement.

Static with grain#

Set animated={false} for a still gradient, and grainOverlay to add texture.

API#

GradientMesh#

Prop	Type	Default	Description
`intensity`	`"medium""low""high"`	`"medium"`	Animation intensity level
`colors`	`{ primary?: string; secondary?: string; tertiary?: string \| undefined; } \| undefined`	—	Custom colors for the gradient (brand cyan, accent purple, bridge blue)
`speed`	`number`	`1`	Animation speed multiplier (default: 1)
`animated`	`boolean`	`true`	Whether the animation is enabled (default: true)
`distortion`	`number`	—	Distortion amount (0-1)
`swirl`	`number`	—	Swirl amount (0-1)
`grainMixer`	`number`	`0`	Grain mixer amount (0-1)
`grainOverlay`	`number`	`0`	Grain overlay amount (0-1)
`scale`	`number`	`1`	Scale factor
`rotation`	`number`	`0`	Rotation in degrees
`offsetX`	`number`	`0`	X offset
`offsetY`	`number`	`0`	Y offset

intensity presets for distortion / swirl: low is 0.3 / 0.05, medium is 0.6 / 0.1, high is 0.9 / 0.2. distortion and swirl override the preset. Default colors are #0099c2, #7c4dff and #1565ef. When animated is false, speed is set to 0.

All remaining props are spread onto the container Box (typed as [key: string]: any). The shader canvas fills the container at 100% width and height, so size the container with layout props.

Accessibility#

When the user prefers reduced motion, speed is set to 0 regardless of animated.
The gradient is decorative. Make sure text placed on top has enough contrast against all colours.

Notes#

The container has pointer-events: none, so it does not intercept clicks on content behind it.
Four colours are sent to the shader: primary, secondary, tertiary, then primary again.
Rendering uses WebGL; keep the number of instances on a page low.