Using Pens as Screensavers

One thing I didn’t expect to happen on CodePen are all the amazing canvas animations people post. Like this:

or this:

Would it be cool to turn those into screensavers?

I mused on Twitter:

There should be an app to make fancy <canvas> code into screensavers. I’d totally use this one: codepen.io/cstumph/full/3…

— Chris Coyier (@chriscoyier) July 12, 2012

Enter WebViewScreenSaver for Mac (Thank you Willson Smith). It works great. You can download the Binary from there and one-click install it (OS X only here). Then under the Desktop and Screen Save r System Preference pane, you can select it.

Under Options you can list URL’s you want to show up. Use the full page versions you can find under the Share dropdown from the editor.

Now you can use fancy animations like this:

or this:

Some of these aren’t exactly battery-friendly, but you can get around that. Under the Energy Saver setting, change your display to go to sleep in less time than you have your screen saver set to turn on. That way when you’re plugged in you’ll get the cool screen saver, but when on battery your display will just sleep.

Then you can be awesome like this:

Chris Coyier on July 13, 2012

http://jackrugile.com Jack Rugile

This is awesome, Chris! I have a Mac at work and a PC at home, I will definitely try it out tomorrow. If anyone knows of a PC equivalent, please post a link in the comments.

I am loving CodePen so far. It is a great way to keep track of small ideas, concepts, styles, and experiments, while also getting feedback from the community. Up until now I haven’t had a home for a lot of things I was tinkering with, so this is great. Only one request at the moment: I would love it if CodePen either included the comment count as part of the list display, or if we had the option to be notified via email (or on CodePen) when we receive comments.

Thanks for featuring my work!
- http://twitter.com/digideth digideth
  
  +1 any one know of a pc app to use?
  
  please!
  
  awesome idea.
- chriscoyier
  
  Those two features are pretty much at the top of our list right now and we have much of the work ready to go. Definitely within a week or two.
- Willson Smith
  
  I think I’ve found a decent alternative for people on windows. Check out
  http://code.google.com/p/web-page-screensaver/ (I believe this has .NET dependencies) or this
  http://www.e-motional.com/autowebview.htm (I was hesitant to post this because of the awful website). I haven’t tested either of them, being on a Mac, but they seem promising.
  - http://twitter.com/digideth digideth
    
    Thanks… we shall see what works best.
Yannik Rödel

I just love the idea!