Dust Signature

A seeded grid of fine dots and squares samples a word set in the theme's italic heading face, and slanted bands drift across the letters, shading each grain from the muted tone through --primary to the foreground. It sits on the page ground in light and dark mode, re-reads the palette when it changes, fills its parent, pauses off screen and holds a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add dust-signature

Manual

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

Usage

import { DustSignature } from "@/components/ui/dust-signature";

export default function Example() {
  return (
    <div className="relative h-[400px] w-full">
      <DustSignature text="Modus" />
    </div>
  );
}

Props