Ribbon Light

A full-bleed Three.js simplex-noise shader of soft diagonal ribbons that drift and fold across the frame. The two ribbon inks come from the theme's primary hue and are mixed onto the theme background, so it reads as ink on paper in light mode and as light in dark mode. 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 ribbon-light

Manual

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

Usage

import { RibbonLight } from "@/components/ui/ribbon-light";

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

Props