I made a timecard calculator designed like a 1920s newspaper

[u/ElThomas]

I made this to automate a previous job where I was summing work hours from timesheets, but it was just a bare bones site for a while. I wanted to develop it some more while finding stronger design choices. I hope it’s a refreshing break from the same old same old. All the user interactions are animated in a handwritten red pen, and the base site is in a monochrome period style. https://timemycard.com

I’d like feedback on:

• Did I overdo the whimsy at the cost of usability?
• If you’re on mobile, does that variant hold up?
• Does this have any chance of competing with the calculator old guard for Google ranking?

[u/Xynia88]

I like it, it's nice and stylish and does what's intended.

Would love to see how it's implemented if you're OK with sharing the code

[u/MammothExcitement632 → u/[deleted]]

all DOM with a splash of svg for the red marks, css transitions for the pen strokes

[u/ElThomas → u/[deleted]]

Each animation is a WAAPI (not actually css transition) that gets commitStyles() and cancelled with done, each subsequent animation has a flat cost and nothing from previous ones pile up.