Glyph Surge

A 19×19 field of mono glyphs set in faint theme ink. It opens with one surge from the centre, and each click fires another that travels outward, swelling the letters it passes and lifting them into the primary colour. Colours and type follow the active Modus theme and palette. It fills its positioned parent, pauses when off screen and renders a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add glyph-surge

Manual

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

Usage

import { GlyphSurge } from "@/components/ui/glyph-surge";

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

Props