Roll Label

A card-coloured pill with a hairline border and an uppercase mono label. On hover the button lifts, the label rolls upward and blurs out while a copy in the theme's primary colour rises from below with an arrow, and a primary underline draws across. It follows the active theme and palette in light and dark mode. Hue, saturation and brightness grade the button with a CSS filter, and the motion is switched off when the user prefers reduced motion. The component centres the button in its parent and is transparent unless you pass background.

Installation

CLI

npx @modus-ui/cli add roll-label

Manual

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

Usage

import { RollLabel } from "@/components/ui/roll-label";

export default function Example() {
  return (
    <div className="h-[300px] w-full">
      <RollLabel onClick={() => console.log("clicked")} />
    </div>
  );
}

Props