Portfolio Screensavers

The five screensavers on this site, in a folder you can drop into yours. They take over the page when someone stops moving, and any key or pointer movement dismisses them. React only — no Tailwind, no build step, no dependencies. MIT.

Download the packRead how they were built

What is in it

  • The cmachines screensaver

    cmachines

    A beige-box desktop on a CRT that has been on for six years — scanlines, a rolling vertical hold, and the guns slightly out of convergence.

  • The Flying toasters screensaver

    Flying toasters

    The After Dark ones. Pixel art, wings on a four-frame flap cycle, toast at a different depth.

  • The Dial-up screensaver

    Dial-up

    A loading sequence from when getting online took a minute and made a noise.

  • The Hang in there screensaver

    Hang in there

    The poster, falling apart a letter at a time. Five ways of falling, picked in rotation.

  • The DVD logo screensaver

    DVD logo

    It has still never hit the corner.

Setting it up

  1. Copy the five .tsx files into your components folder.
  2. Copy assets/ into your public folder as /screensavers. Somewhere else is fine — change ASSET_BASE at the top of the three files that load art.
  3. Import screensavers.css once, wherever your global styles are.
  4. Render <ScreensaverManager /> at the bottom of your layout. That is the whole setup.

The full README is in the zip. I wrote about building them here.