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
Resource details
PublishedJuly 10, 2026
CategoryMicro Interaction
ReactMotionTailwind CSSPhosphor Icons
Unlock with MaxResource details
PublishedJuly 10, 2026
CategoryMicro Interaction
ReactMotionTailwind CSSPhosphor Icons