A great web app is measured by its easter eggs. Ever since Moonlander (1973), easter eggs have gradually become more and more common in the software we write. And that’s no surprise - over the years, it’s gotten easier and easier to hide easter eggs in our code, and the bliss users have when they happen to wander upon such an egg is heavenly 👼
refers to the animated screensaver commonly found on American DVD players, in which the DVD Video logo bounces to different parts of the screen and changes color. Online and in pop culture, people brag and joke about seeing the logo land perfectly in the corner of the screen.2
In fact, it is so popular, that when you google “bouncing dvd logo”, the google logo starts to bounce.
I started to read about existing implementations and found out about this one: bouncing-dvd-logo
So, starting to react-ify things up, I rewrote the code in TypeScript, and refactored it to use
requestAnimationFrame to get a smooth animation.
A weird bug that took me some time to solve was that my hooks were called twice - this is because of
React.StrictMode , which helps you to spot side effects by intentionally double-invoking function component bodies, state updater functions (the first argument to setState), and functions passed to useState, useMemo, or useReducer. That was quite annoying and I just disabled it altogether (what’s more, this only applies to development mode, and lifecycles will not be double-invoked in production mode).
The code is available here: react-dvd-player-animation