search

cdmoro / literature-clock

A clock for book lovers that tells the time using quotes from literature. Support for multiple languages, themes, and more!
https://literatureclock.netlify.app
MIT License
4 stars 1 forks source link

Request: Add fade when changing quotes #8

Closed simgust closed 1 month ago

simgust commented 2 months ago

I would love for the quotes to change with a fade instead of being instant. Having it on a secondary monitor within view makes the changes a bit distracting.

cdmoro commented 2 months ago

Hey, this is an interest feature, how do you think the transition should be? the old quote should fade out and the new one fade in, or just one of them? thanks

simgust commented 2 months ago

Yes, I think the old one should fade out and the new one fade in (at least in the zen mode)! :)

Some additional feedback: I think the timeline bar should fade out instead of animate backwards, which feels strange. I would also love some more font options (the current ones are very wacky). I can recommend TT2020, which is a very realistic typewriter font. I would also love to have more classic serif typefaces, in addition to the default system sans-serif fonts (on macOS at least that would look very good). Maybe even an option to choose from your own system's fonts?

Thank you for making this thing and taking the time to read this feedback :)

cdmoro commented 2 months ago

Hey, I merged a PR with this change, check it out and tell me what you think! https://literatureclock.netlify.app/?fade=true

Regarding the other things you mentioned:

Timeline animation

This is a bit tricky because the issue with backwards animation is caused by how the browsers handle CSS animations, to save resources, when a tab is inactive, the animations are paused, so when the tab is active again, the animation starts from the same point it was before. To solve this issue I replaced the CSS animation with a JS-based animation (I included it in the same PR so you should be able to see it in action!)

Fonts

At the moment, I wouldn't like to replace the way fonts are handled. I relied on Google Fonts for that because it was the easiest approach. BUT, there is a way to use any font from Google Fonts using the fonts query param.

I found this serif font in Google Fonts, called Abril Fatface (btw, I really like this one!), I can copy the name as it is in the URL (Abril+Fatface) and paste it on the clock https://literatureclock.netlify.app/?font=Abril+Fatface you should see the clock with this font.

Let's try another font, Edu Australia VIC WA NT Hand Guides, https://literatureclock.netlify.app/?font=Edu+AU+VIC+WA+NT+Guides, and voila!

The custom font is saved into the font selector input :-)

Let me know what you think!