Halo Trace

A card-coloured pill with an uppercase mono label and a status dot. A beam of the theme's primary colour continuously traces its hairline border; on hover the beam brightens, the dot and label ink in, the pill lifts and the arrow nudges outward. It follows the active theme and palette in light and dark mode. Animations and transitions are turned off when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add halo-trace

Manual

1. Install framer-motion.
2. Copy the code from the component tab.
3. Create a file at components/ui/halo-trace.tsx.
4. Paste the code.

Usage

import { HaloTrace } from "@/components/ui/halo-trace";

export default function Example() {
  return <HaloTrace />;
}

Props