Local Clock

This was my first time working with a 12-column grid design. I created a Material UI-inspired fluid grid component that allows items to easily be positioned on a grid system at four different breakpoints. I did run into the question of when to set breakpoints for different device sizes. What are the industry standards?

It was important to incorporate functionality that led with accessibility. I used several Radix primitives, including the Collapsible component to power the clock details section.

It was a fun challenge adding an animation on top of the Radix Collapsible because the API doesn't expose state for controlling the toggle, and the render method disrupts the timing of external transition effects. With a combination of scroll methods, keyframe animations, and a class toggle, I created a smooth mount and unmount effect that keeps the collapsible component fixed to the bottom edge of the viewport across all screen breakpoints, and complies with accessibility recommendations for toggling element visibility.

Was this a good approach? Was there a better one I missed?