Animations and Games Hidden in the Browser Console

Every browser has a “back room” most people never open: the console. You open it with F12 (or right-click and “Inspect”) and it’s where developers see messages, errors and tests. But it can also be a place to play.

A greeting for the curious

If you open the console on my portfolio, you’re greeted with a banner that says “Hello, curious developer!” and a list of commands to try: showRobot(), showCow(), showRocket(), showDino(), showDuck() and a few more. Type one, press Enter, and an animation made of text characters appears: a dancing robot, a builder cow, a rocket taking off.

How do you animate text?

The same way paper cartoons work: frames. Each animation is a series of “frames” drawn with letters and symbols. The code clears the console, draws the next frame, waits a fraction of a second and repeats. To the eye, that becomes motion. The console also accepts colors and styles, so the text can be purple, green or have a background.

There’s even a command, downloadAnimations(), that downloads the animations so you can watch them in your computer’s terminal.

Why hide things there?

There’s a very concrete reason: people who open the console on a portfolio are usually other developers, someone on a technical team or a curious recruiter. Finding a greeting and a small game is a way of saying “I thought of you” and of showing, without explaining it, that you care about details even where almost nobody looks.

A tradition with history

Hidden console messages are a habit of several big companies, which often use them to invite developers to work with them. And hidden games, the famous easter eggs, have existed since the earliest video games.

Next time you visit a site you like, open the console. Something might be waiting for you.