Ridge Strata

Five parallax ridges in an ink-wash ramp from the theme background to its foreground, each rimmed with a hairline of primary, with faint primary stars and an occasional streak above. The ridges drift and follow the pointer. 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 ridge-strata

Manual

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

Usage

import { RidgeStrata } from "@/components/ui/ridge-strata";

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

Props