Ember Tag

A Canvas 2D particle scene in the theme's ink: thousands of embers in --primary trace the edges of a lanyard badge, curl noise plumes them into fur, slanted rain in --muted-foreground falls in front of and behind the card and a waterline reflects it. On paper the strokes multiply like ink; in dark mode they add up like light, and both follow the palette picker. Fills its positioned parent, pauses off screen and paints a still frame for reduced motion.

Installation

CLI

npx @modus-ui/cli add ember-tag

Manual

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

Usage

import { EmberTag } from "@/components/ui/ember-tag";

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

Props