Terrace Dusk

A full-bleed Three.js shader of fifteen grained bars that step down from left to right and breathe on a slow pulse. The bars are a lightness ramp on the theme's primary hue and the ground above them is the theme background, so it reads as ink terraces on paper in light mode and as dusk 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 terrace-dusk

Manual

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

Usage

import { TerraceDusk } from "@/components/ui/terrace-dusk";

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

Props