Animated React menus, tabs and navigation

Blur accordion

Panels spring open and smear with a vertical motion blur that follows their speed, while the plus folds into a minus and the answer rises into focus.

Navigation, press, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/blur-accordion.tsx https://motion-brew.com/r/blur-accordion.tsx

One self contained file for React and Tailwind CSS: blur-accordion.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { BlurAccordion } from "@/components/blur-accordion";

export default function Page() {
  return (
    <BlurAccordion
      items={[
        { id: "ship", title: "When does it ship?", content: "Orders leave within two working days." },
        { id: "returns", title: "Can I return it?", content: "Yes, within 30 days, no questions asked." },
      ]}
      blur={6}
    />
  );
}

Props

Prop	Type	Default	Description
items	{ id: string; title: string; content: ReactNode }[]	a short FAQ	Rows, top to bottom
multiple	boolean	false	Let several panels stay open at once
defaultOpen	string[]	the first item	Ids open on first render
blur	number	6	Strongest vertical blur mid-travel, px; 0 turns it off
stiffness	number	380	Spring stiffness for the height
onOpenChange	(open: string[]) => void		Called with the open ids
className	string		Classes on the shell

More navigation

Tab bar: A white, fully rounded mobile bottom navigation in three styles: a gliding soft gray pill, icons with labels and a dot, or a raised action button.
Account menu: A profile pill that morphs into an account card: a status picker that recolours the avatar's dot, quick tiles that lift, a workspace switcher whose check flies, a filling storage meter and a log out that asks twice.
Liquid tabs: Icon tabs where the chosen tab is a white bump grown out of the panel.
Sidebar nav: An app sidebar that folds to a slim rail of icons.

All animated react menus, tabs and navigation