Hacker News new | ask | show | jobs
by keepamovin 781 days ago
I wanted this for a while so I could do a 'box-breathing' thing. With the inhale-hold-exhale-hold stages all being customizable to fit your body and go for the effect you wanted.

Could not figure out a way to do it (sans JS or insane complexity) without something like what's on this page. Holy stylesheets! This page has really creative demos!!! Haha :)
1 comments
spartanatreyu 779 days ago
Isn't that just an animation curve in css?
link
keepamovin 775 days ago
I couldn't figure it out. I mean, could you have a go at it? Like I want each of the 4 edges to be parameterizable (by a CSS var) so I can add a slider to adjust how long the circle stays in each of the states.

I'm thinking of a customizable CSS version of: https://quietkit.com/box-breathing/

link
spartanatreyu 773 days ago
Well I could replicate that example with an animation curve using only css:

https://codepen.io/spartanatreyu/pen/YzbPjwg?editors=1100

But if you want each step's duration to be parameterizable then you'll need to reach for js, I'd recommend the Animation API.

link