This is, literally, the best thing. But you know what would be better than the best thing in one place? The best thing IN EVERY PLACE.

I'd love to have these as jQuery plugins so I can enhance pages with toasters or even set an actual timeout, after which the screen saver will activate.

It's on my todo list for a little bit later. But if anyone's feeling ambitious, have at it.

Just logging an email request I got:

I wanted to personally thank you for crafting the After dark in CSS page. I was wondering if there were any chance you might create a"starry night" module?

Starry night would be tough, since there's not a good way to add run-time randomness to CSS animations. Still, I think there are ways to mimic the look and feel, and it would be cool to see one in action. I not planning on attempting this at the moment, but I'll happily merge a contribution if somebody wants to give it a shot.

The issue that's you mentioned, "Add a mobile metatag and confirm that it makes the text look better on phones." is solved. If it's ok then please tag the Hacktoberfest-Accepted label to my commit.

Hey again. ^^

Actually your project motivated me to remake an old After Dark screensaver I used to like when I was a kid. I don't remember the exact name but I prefectly remembered the behavior.

It was a black screen with, at fixed interval, a random quote displays. You could put your own quotes, as many as you want, and you could choose the style and colors of the borders around the quotes. I don't know if you ever seen that one.

Anyway, I just made it and published it on my gitlab. Feel free to include it in your project! ;) https://gitlab.com/maxlefou/adquotes

Just like the original screensaver, quotes and borders styles are editable easily, just by editing a file named options.js.

You can see it in action here.

The index page is not mobile friendly:

Fixing this is probably just a matter of including the mobile meta tag and testing it on a couple mobile devices.

While we're at it, we should see how the demos themselves look on mobile devices. I don't think they need to be perfect (mobile is not the primary use-case), but at the very least they shouldn't look broken.

I adjusted the meta titles and descriptions for the homepage, and wrote meta descriptions and adjusted titles for all of the individual screensaver pages.

I'm interested in using some of your code on my personal website (https://cosmo.red), and I'd definitely feel more comfortable doing so if the license was clear. I chose MIT based on your comments here: #3

Just creating this issue as a place to collect a list of screensavers that we could add using CSS alone.

• Nocturnes (the one with the blinking eyes... see image below)
• [add more ideas here as we come up with them]

I saw this error reported by google search console for these urls:

• [ ] https://www.bryanbraun.com/after-dark-css/all/messages.html
• [x] https://www.bryanbraun.com/after-dark-css/all/messages2.html

Things to improve:

• Add a mobile metatag and confirm that it makes the text look better on phones.
• Ensure that the animation for Messages goes all the way across the screen (it seemed like it wasn't scrolling all the way when I checked on it).

One quick way for us to improve the performance of these animations is to rely more on transforms, as explained in this article (and the following image):

The biggest opportunities are in areas where we could animate transform: translate instead of top/bottom/left/right. We can fix this in the following screensavers:

• [ ] Flying Toasters
• [ ] Bouncing Ball
• [ ] Fish
• [ ] Logo
• [ ] Messages
• [ ] Messages 2
• [ ] Spotlight

Other opportunities include:

• [ ] Hard Rain (currently animates width and height).
• [ ] Rainstorm (animates background color, which could be done with opacity)

Super neat project. I just happened to notice these issues when I was checking it out on my 3440x1440p monitor.

For instance the Spotlight screensaver, when the spotlight reaches one of the far ends of the screen, the black overlay is not of sufficient size to cover the opposite side:

Rainstorm, the effects are left-aligned and do not reach the right side of the screen. The "flash" does however.