Animated Menu

Component 169

About

A React component featuring an animated menu with Rive icons, inspired by @guerriero_se's UI experiment.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Menu to your project and fits it to your theme.

Code

How Animated Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AnimatedMenu } from "@/components/ui/animated-menu"

function AnimatedMenuDemo() {
  const menuItems = [
    {
      riveIcon: {
        src: "https://anim-icons.s3.amazonaws.com/9/rotate-layer.riv",
        stateMachine: "rotateLayer"
      },
      label: "Rotate Layer",
      hotkey: "R",
      onClick: () => console.log("Rotate clicked"),
    },
    {
      riveIcon: {
        src: "https://anim-icons.s3.amazonaws.com/9/bring-to-front.riv",
        stateMachine: "bringToFront"
      },
      label: "Bring to Front",
      hotkey: "]",
      onClick: () => console.log("Bring to front clicked"),
    },
    {
      riveIcon: {
        src: "https://anim-icons.s3.amazonaws.com/9/replace-layer.riv",
        stateMachine: "replaceLayer"
      },
      label: "Replace Layer",
      hotkey: "⇧R",
      onClick: () => console.log("Replace clicked"),
    },
    {
      riveIcon: {
        src: "https://anim-icons.s3.amazonaws.com/9/open-prototype.riv",
        stateMachine: "openPrototype"
      },
      label: "Open Prototype",
      hotkey: "⇧P",
      onClick: () => console.log("Prototype clicked"),
    },
    {
      riveIcon: {
        src: "https://anim-icons.s3.amazonaws.com/9/view-hotkeys.riv",
        stateMachine: "viewHotkeys"
      },
      label: "View Hotkeys",
      hotkey: "⇧H",
      onClick: () => console.log("Hotkeys clicked"),
    },
  ]

  return (
    <div className="flex min-h-screen w-full items-center justify-center">
      <AnimatedMenu items={menuItems} />
    </div>
  )
}

export default { AnimatedMenuDemo }