Mesh Card Backdrop

The three-layer blue backdrop shared by the CTA card and the case study closing card: a static gradient base, the live WebGL mesh shader over it, and a legibility scrim.

On a card

Let’s start something big

The backdrop fills its host. Content needs relative z-10 to sit above it.

tsx

<div className="card-cta surface-ink relative overflow-hidden rounded-2xl p-7">
  <MeshCardBackdrop />
  <div className="relative z-10">…</div>
</div>

Host requirements

The host must be relative overflow-hidden with a radius — the shader canvas is a rectangle and squares off corners otherwise.
Content needs relative z-10 to sit above the three layers.
Add surface-ink to the host if it can land on a paper ground, so its copy keeps the dark token ladder.
Pair with card-cta for the accent ring and bloom. Do not combine with card-carousel-item: that class paints its own surface over the mesh, and its .surface-paper twin forces an opaque backing that hides the mesh entirely.

Layers

.hero-mesh-base — static deep-navy gradient. Carries the card before the shader mounts, when WebGL is unavailable, and on context loss.
HeroMeshGradient — the live shader, imported with ssr: false because it reads its colour stops (--hero-mesh-1…4) off the DOM at mount. It honours reduced motion by freezing on a formed frame.
.card-mesh-scrim — a 135° scrim built from --background, darkest at the two corners the copy and CTA occupy and lightest through the middle where the gradient should still show.

Props

Prop	Type	Default	Description
`speed`	`number`	`0.7`	Shader animation speed. Slower than the hero’s 1.2 — a card is a fraction of the hero’s area, so the same speed reads as busy behind the headline at card size.
`lazy`	`boolean`	`false`	Hold the shader back until the card has been on screen. Use it wherever a card renders more than once per page (e.g. a component with separate desktop and mobile trees) so the hidden copy never allocates its own WebGL context.

Import

tsx

import { MeshCardBackdrop } from '@/components/ui/MeshCardBackdrop'