Mesh Gradient

Animated WebGL mesh-gradient surface that morphs between motion presets, with optional cross-fading status messages.

Pro

Reading your prompt

Description

MeshGradient is a Create UI Pro component; installing it requires a Pro seat. It renders a live WebGL gradient built on Paper shaders that slowly morphs by tweening between motion presets (distortion, swirl, grain, speed, scale, rotation) on a fixed interval. An optional MeshGradientMessages slot rotates short status lines in sync with each preset change, cross-fading them with a blur transition.

Reach for it as an ambient, decorative surface: an AI-generation or processing state, a hero or card background, or an empty-state visual. It is not a loading control. For a determinate indicator use Progress; for a small inline wait state use Spinner.

Installation

Mesh Gradient is part of Create UI Pro; adding it requires an authenticated Pro seat.

pnpm dlx @create-ui/cli add mesh-gradient

Usage

import {
  MeshGradient,
  MeshGradientMessage,
  MeshGradientMessages,
} from "@/components/ui/mesh-gradient"

<MeshGradient className="h-64 w-full">
  <MeshGradientMessages>
    <MeshGradientMessage>Generating ideas</MeshGradientMessage>
    <MeshGradientMessage>Almost there</MeshGradientMessage>
  </MeshGradientMessages>
</MeshGradient>

The root has no intrinsic size; give it width and height via className.

Examples

Hero composition

The gradient is a surface, so anything absolutely positioned inside it becomes an overlay. This hero card layers a full composition on the Midnight colorway: a glass Badge (bg-white-alpha-16 plus backdrop-blur-md), a read-only Rating, static-white typography tokens, a primary Button next to a glass one, and an AvatarGroup with an action chip. The white-alpha tokens keep the glass treatment consistent regardless of theme.

Passing a single-element steps array pins the surface to one preset: the gradient keeps drifting via its speed, but never re-tweens to a different character. That calm, stable motion is usually what you want behind real content.

Pro

Unlock with Pro Code

Create UI Pro

Design that moves80+ handcrafted components on one animated, themeable foundation.

Trusted by 12,000+ designers

CTA banner

A wide, shallow surface with content laid out horizontally: static-white copy on the left, a solid static-white Button on the right. The banner is pinned to a single energetic preset so the call to action stays legible.

Pro

Unlock with Pro Code

Unlock every pro componentOne license, unlimited projects, lifetime updates.

Profile cover

The gradient does not have to be the whole card. Here a short strip (h-28, rounded-none) sits as the cover image inside a bordered bg-static card; an Avatar overlaps the seam with a bg-static ring, followed by a verified Badge and an outline Button. A calm pastel preset keeps the cover from competing with the content.

Pro

Unlock with Pro Code

Ayla KaragözVerified

Product designer crafting motion-first design systems.

Colors

colors feeds the shader an array of hex colors (3 to 5 blend best); the default alternates near-white and near-black. The colorways below are built from the Create UI palette scales (indigo, red, yellow, zinc). Each instance paces itself with its own interval (milliseconds between preset changes, default 4000), and the default rounded-component-4xl corner is a class you can override via className.

Pro

Unlock with Pro Code

Primary

Sunset

Pastel

Midnight

Semantic theme colors

The shader draws to a WebGL canvas, so it needs concrete color values; var(--color-primary-base) strings will not work. To tie the gradient to your semantic tokens, resolve them with getComputedStyle and re-resolve when the theme class changes with a small MutationObserver, since tokens are remapped without a page reload when the theme toggles. The gradient below follows the active theme's primary scale live; switch between light and dark to see it re-tint.

Pro

Unlock with Pro Code

Custom composition

For full control, useMeshGradientCycler(steps, interval) exposes { config, stepIndex, messageIndex, goToStep }, and MeshGradientRoot provides the bare clipped container to combine with the shader primitive yourself.

Notes

Client-only: the shader draws to a WebGL canvas, so nothing meaningful renders during SSR.
Extra props beyond steps, interval and children pass through to the underlying Paper MeshGradient shader and override the cycling preset values.
Messages advance one step per interval and wrap independently of the steps count.
MeshGradientMessage sits bottom-right over the canvas by default; reposition it via className. Its white text is tuned for darker color sets.
Each instance runs its own animation loop and WebGL context; avoid many large instances on one screen.

Label Modal