Grainy Mesh Gradient Background

Grainy mesh gradient background in WebGL2: a breathing glacier-blue mesh under hairline drafting guides and circles, printed with fine grain. The bloom follows the pointer, guides glint, and a click drops a ring through the mist. Five presets, optional snapping crosshair. React only.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Grainy Mesh Gradient Background to your project and fits it to your theme.

"use client"

import MeridianMist from "@/components/ui/meridian-mist"

export default function Demo() {
  return (
    // w-full matters: 21st centres demos in a flex wrapper, and a flex item
    // left at width:auto shrinks the mist to 0px wide.
    <div className="relative w-full">
      <MeridianMist />
    </div>
  )
}