Make an Animated Menu like Stripe with React, Tailwind, and AI

Written by Steve Sewell.

How does Stripe make this awesome morphing menu animation?

Let’s recreate this in React with just a few lines of logic:



```ts
const [hovering, setHovering] = useState(null);
const [popoverLeft, setPopoverLeft] = useState(null);
const [popoverHeight, setPopoverHeight] = useState(null);

const refs = useRef<(HTMLElement | null)[]>([]);

const onMouseEnter = (index: number, el: HTMLElement) => {
setHovering(index);
setPopoverLeft(el.offsetLeft);
const menuElement = refs.current[index];
if (menuElement) {
setPopoverHeight(menuElement.offsetHeight);
}
};
```



We’ll also use AI and Tailwind to create the markup, …

ai animated animation logic null react steve stripe tailwindcss webdev