Sigil Weather

A full-bleed WebGL2 scene built around a signed distance field of a sigil. Lightning crawls fBm arcs along its contour by default; water refracts it beneath pointer-driven ripples, and flame licks noise-driven tongues and embers upward from its edge. The whole scene is mapped through a duotone of the theme tokens (background, primary, foreground), so it reads as ink on paper in light mode, glows in dark mode and follows the palette; set palette="original" to keep the source colours. It fills its positioned parent, pauses when off screen or when the tab is hidden, and renders a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add sigil-weather

Manual

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

Usage

import { SigilWeather } from "@/components/ui/sigil-weather";

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

Props