Dot Screen

A fine grid of round WebGL points whose size swells in rings rolling in from the lower-left corner, shaded diagonally from the theme's primary to its muted ink on the theme background. It fills its positioned parent, follows the active theme and palette in light and dark mode, pauses when off screen and renders a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add dot-screen

Manual

1. Install three.
2. Copy the code from the component tab.
3. Create a file at components/ui/dot-screen.tsx.
4. Paste the code.

Usage

import { DotScreen } from "@/components/ui/dot-screen";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <DotScreen />
      <div className="relative z-10 p-8">
        <h1>Content over the background</h1>
      </div>
    </div>
  );
}

Props