Opening Mark

Each letter drifts in from a seeded offset in the theme's italic heading face, trailing soft fringes in the primary and muted tones that converge as it lands, while a square seal in --primary settles beside the word. The finished title holds, then replays. It reads its colours from the theme, scales to fill its parent, pauses off screen and shows the finished title when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add opening-mark

Manual

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

Usage

import { OpeningMark } from "@/components/ui/opening-mark";

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

Props