For Time

TL;DR

Here's For Time. A sci-fi retro countdown timer meant for full screening.

Back story

I've been missing the adrenaline caused by Gareth setting the countdown clock for the imminent workout. The impending doom caused by the beeps, the final warning before having to sweat your heart out for the next ten minutes.

Me & Lyd have been trying to keep ourselves healthy since the UK went into lockdown by doing circuits around our living room (so many press-ups 😭), but one thing that was missing was the clock staring you in the face saying "you're not even half way through yet, keep going!"

I'm sure you're thinking—as did I—that you can use your phone. Or Google would return exactly the right thing. You'd be correct on both. But neither are very fun, and none of them are nice enough that you want to be looking at them at all.

I thought I'd give it a go, and build my own. A classic Software Engineer thing to do. But here we go:

For Time. A sci-fi retro countdown timer meant for full screening.

Details, details

"For time" is an expression used in the CrossFit world for a work out against the clock.

For Time (the website this post is about) turned out to be more art than engineering. It's the first time in awhile I've just let things happen. I was not consciously designing For Time in this aesthetic. It was pure chance I started to make the time display in neon, which led me to make it Tron-esk.

For the inspiration that started it all off, you'll find a couple of Codepens below.

For Time is open source on GitHub, with a concepts directory with some early experimentation with the neon effect in the last codepen.

Important to note that Firefox has a hard time rendering the floor animation via canvas. Safari seemingly is unsure about when to use the blend mode on the gradient (it works for me, but not for my house mate) and at some resolutions (mostly if you have your screen set to a scaled resolution) the frame rate drops quite a bit. Considering this is an experiment more than anything else, I think it's okay. You should've seen the performance before I switched it to canvas 😉.

It's made with Svelte, after I thought it was about time I tried something different to (p)react. From my very brief foray into Svelte, I can only report back good things.

Codepens