Rising Strokes

Fine strokes rise through a 2D canvas with fading tails. As they cross a horizon line a little below the middle of the frame they slow, lengthen and switch from the muted ink colour to the primary colour. Colours and background come from the active theme, so it is ink on paper in light mode and follows the palette 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 rising-strokes

Manual

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

Usage

import { RisingStrokes } from "@/components/ui/rising-strokes";

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

Props