Rising Motes

A button in the theme's primary colour, lit from below, with small motes drifting upward through it. The arrow rises on hover and the button presses in on click. The label is set in uppercase mono. Animations and transitions are turned off when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add rising-motes

Manual

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

Usage

import { RisingMotes } from "@/components/ui/rising-motes";

export default function Example() {
  return <RisingMotes onClick={() => console.log("clicked")} />;
}

Props