Tide Line

A full-bleed Three.js shader of a soft band of light that hangs from the top edge and rolls in slow waves. Its two inks are derived from the theme's primary hue, so it sits on paper in light mode and glows on the dark background in dark mode, following the palette picker. 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 tide-line

Manual

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

Usage

import { TideLine } from "@/components/ui/tide-line";

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

Props