Ash Spiral

A Three.js point spiral of 12,000 sparks winding into an off-centre core. Spark colours are derived from the theme's primary hue: on a dark background they glow with additive light, on paper they settle as soft ink, and they follow the palette picker. Rendered at half resolution, 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 ash-spiral

Manual

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

Usage

import { AshSpiral } from "@/components/ui/ash-spiral";

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

Props