Skip to main content
Max

Iris Grid Menu

A create button that morphs into a 3-column action grid: the trigger stretches into the panel header (its plus rotating into a close mark) while the grid irises open from the center with a radial stagger and blur-scale item entrances. The trigger never unmounts — click again, press Escape, or click outside to fold it back, with focus restored on keyboard dismissal.

Micro InteractionReactMotionTailwind CSSPhosphor Icons

Manual

Create a file and paste the following code into it.

Update the import paths to match your project setup.

Similar components

Status Roll Badge

Max

Spring Split Accordion

Goo Reaction Bar

Status Badge Table

Resource details

PublishedJuly 10, 2026
CategoryMicro Interaction
ReactMotionTailwind CSSPhosphor Icons