Silk Bands

A full-bleed WebGL shader of three slow, wide bands printed through a coarse scanning halftone screen. The colours are a ramp built from the theme (--primary at several lightnesses, --foreground and --muted-foreground) over --background, so it is ink on paper in light mode and follows palette changes live. The bands gather on the left and fade out to the right, leaving room for text, and drift with the pointer. 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 silk-bands

Manual

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

Usage

import { SilkBands } from "@/components/ui/silk-bands";

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

Props