Components
Starting preview...
A React component featuring an animated menu with Rive icons, inspired by @guerriero_se's UI experiment.
npx shadcn@latest add https://21st.dev/r/serafimcloud/animated-menuimport { 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 }