Remember the Windows 98 Mystify screensaver? I used to stair at when I was young, the colorful outlines bouncing around a black screen, stretching into different shapes and leaving trails behind them. Such a simple thing, but surprisingly fun to watch.

I wanted to see if I could recreate that feeling in JavaScript using PixiJS. Here’s my version:

See the Pen Windows 98 Screensaver by Andy Sciro (@spssciro) on CodePen.

I built this before I was using AI to help write code, so figuring it out was more challenging. Working through it myself was very fun though, and seeing the effect finally come together was especially satisfying.

The idea behind the animation is pretty small: give five points their own directions, move them each frame, and reverse their horizontal or vertical direction when they cross an edge. Connect the points with lines and close the shape.

The trails are the interesting part. Each point keeps a short history of its positions. On every tick, the drawing is cleared and the shapes are redrawn from that history, so you see earlier outlines following the newest one. The colors gradually shift using sine waves.

There are controls in the Pen for speed, the number of outlines, and line thickness. Try changing them and see how different the same little animation can feel.

This reminds me of why I enjoy small JavaScript experiments. You start with something familiar, figure out the pieces that make it work, and suddenly you’ve got a little bit of nostalgia running in the browser.

As always, feel free to open the source on CodePen and fork it! If you like this kind of thing, I also made a bouncing DVD logo in Pixi.js.