Mosaic Crest

A 2D canvas lays square tesserae along a swooping band that dips low through the frame and rises to both corners, rippling with travelling waves. Edge tiles are muted ink; the crest of the band is laid in the primary colour, on the page's own background, so it reads as ink on paper in light mode and follows the active palette. Set a positive arcDrop to turn the band into an arch. 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 mosaic-crest

Manual

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

Usage

import { MosaicCrest } from "@/components/ui/mosaic-crest";

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

Props