Stipple Tide

A full-bleed Three.js stipple that sits on the page's own background: dots rest in the muted ink colour and swell into the primary colour as slow rings travel outward from the centre, fading toward the edges. It follows the active palette and light or dark mode, and shifting slightly as the pointer moves anywhere over the page. 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 stipple-tide

Manual

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

Usage

import { StippleTide } from "@/components/ui/stipple-tide";

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

Props