Word Swarm

A liquid, SVG-filtered swarm of cells wanders over a line of serif type, drawn toward the words and your pointer. Each word it touches darkens from muted ink to full foreground and leans into italic. Colours follow the active Modus theme and palette, and the type uses the heading font. 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 word-swarm

Manual

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

Usage

import { WordSwarm } from "@/components/ui/word-swarm";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <WordSwarm />
    </div>
  );
}

Props