Recreating After Dark screensavers in CSS.

  • By Bryan Braun
  • Last update: Dec 31, 2022
  • Comments: 11

After Dark in CSS

Flying Toasters in CSS

Do you longingly reminisce about the days when flying toasters graced your screen? Do words like "Confetti Factory" and "Daredevil Dan" make your heart skip a beat?

If so, then never fear—CSS is here! Using modern CSS techniques like animations and transforms, we can imitate several of your favorite After Dark™ screensavers.

The animations were made with CSS alone. No animated gifs or JavaScript.

See them here!

Why?

Just for fun.

Thanks to:

Jonathon Sampson, Keith Clark, Rob Glazebrook, Ryan Justice and others for posting tutorials & demos on CSS animations. N. Landsteiner, David Donarumo, and Lazy Game Reviews for online preservation of what the original screensavers looked like. Robin Casady for the Public Domain ChicagoFLF font. The original screensavers and artwork are © 1989 Berkeley Systems Inc.

Github

https://github.com/bryanbraun/after-dark-css

Comments(11)

  • 1

    jQuery plugin?

    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.

  • 2

    Starry Night?

    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.

  • 3

    Fixed Responsiveness issue on messages2.html

    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.

  • 4

    Random Quotes screensaver

    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.

  • 5

    Make the demos mobile friendly

    The index page is not mobile friendly:

    image

    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.

  • 6

    Fix: add meta descriptions and adjust titles

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

  • 7

    Create LICENSE.md

    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

  • 8

    New possible screensavers?

    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]

    image

  • 9

    Messages - Improve behavior on mobile

    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

    image

    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).
  • 10

    Improve animation performance

    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):

    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)
  • 11

    Some screensavers have issues on ultrawide screen resolutions

    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: image

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