Night Gate

An italic serif link in a translucent pill with an inked arrow badge, floating over two canvas fields: a slow upward drift of ink specks and motes in the theme's primary and foreground colours that wander, bounce and pulse with a glow. Colours come from the theme tokens and are re-read when the theme or palette changes, so the field is ink on paper in light mode and light on dark in dark mode. It fills its positioned parent, pauses when off screen or the tab is hidden, and renders a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add night-gate

Manual

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

Usage

import { NightGate } from "@/components/ui/night-gate";

export default function Example() {
  return (
    <div className="relative h-[400px] w-full overflow-hidden">
      <NightGate label="Begin the journey" href="/start" />
    </div>
  );
}

Props