Prism Flow Button

A dispersion shader paints laminar prismatic ribbons inside the pill on hover, a travelling chromatic rim runs round the outline, the cursor drags the ribbons and each press throws a faceted ripple. The plate is a deep shade of the theme's primary colour resting on a soft pool of the page background. Comes as a labelled pill, an icon circle or a larger play circle. Pauses when off screen; with reduced motion the surface holds still.

Installation

CLI

npx @modus-ui/cli add prism-flow-button

Manual

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

Usage

import { PrismFlowButton } from "@/components/ui/prism-flow-button";

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

Props