Breathbox CSS

Website

Github Repository

This is a simple minimalistic revisit of the breathbox animation! I wanted to make something in CSS native, so I came up with this design, which uses webkit-animation and keyframes to step through changes to width, height, top, left and border-radius, with a border: 2px solid white; in the middle of the AI-generated image. It looks really great, and with the addition of a slider and a smattering of JQuery, we have a really powerful, but minimalistic tool for practising mindfulness and healthy breathig techniques! Give it a try!