Framer component
Bounce Pills
Category pills that drift around the frame and bounce off the edges and each other. Hover one to pause it and open its dropdown.
Make it yours
Colors, fonts, borders, shadows, speed and hover behavior are all settings in the properties panel. Two quick restyles:
Dark pills with a white hover and a faster drift.
Outline pills, square corners and a slow drift that pauses every pill on hover.
Bounce Pills CMS
Connect a Collection List and every category becomes a pill. Its dropdown lists that category’s items, and new CMS items show up on their own.
What’s inside
Real bouncing
Pills bounce off the frame edges and off each other at a steady speed, so they never pile up.
Dropdown on hover
Hovering a pill pauses it and opens its own list of links. Pills without links just pause.
Works on phones
The first tap opens the dropdown instead of following the link, and tapping outside closes it.
Keyboard friendly
Tab opens a pill’s dropdown, Tab moves through its links and Escape closes it.
Stays in the frame
Dropdowns open upward or shift sideways near the edges, so they never get cut off.
Calm when needed
Respects reduced motion, pauses when off screen, and renders on the server so nothing jumps on load.
Bounce Pills for Framer