Mercury Bloom

A full-bleed raymarched WebGL shader of a metal blob that morphs with layered simplex noise. Its studio environment is built from the theme's background, card and primary tones, so it reads as polished pewter on paper in light mode and as dark mercury in dark mode, and follows the palette. It fills its positioned parent, re-reads the theme when the mode or palette changes, pauses when off screen and stays still when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add mercury-bloom

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/mercury-bloom.tsx.
3. Paste the code.

Usage

import { MercuryBloom } from "@/components/ui/mercury-bloom";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <MercuryBloom />
    </div>
  );
}

Props