010 · component

Split Button Interaction

An expandable split button with project options

AnimatePresenceuseReducedMotionlayout
Live Preview
View source
Loading…

Overview

An expandable split button that smoothly reveals project options with layout, icon, staggered, and blur animations.

Learnings

It was a great practice in using the useReducedMotion hook and making thoughtful decisions about how animations should behave for motion-sensitive users.

It was also a good opportunity to practice layout animations and explore different AnimatePresence modes to control how elements enter and exit the UI.

Just a heads up

These components are part of my learning journey. I'm building them to practice motion, interactions, and UI engineering, so think of them as experiments rather than production-ready components.

Most of the ideas are inspired by incredible work from designers and developers across the internet. I'm not the original creator of those concepts, and I've added proper credit and links to the original sources wherever I could.