There's a Happy Mac hopping across the bottom of my website, and you probably haven't seen it. That's rather the point of Easter eggs, isn't it?

If you click the version number in my website footer exactly 24 times, a cheerful pixelated Mac icon bounces across the viewport from left to right, accompanied by a tributary recreation of the classic Macintosh startup chord. It takes about 15 seconds to complete its journey, then disappears. The click counter resets, and you can trigger it again if you fancy.

The Significance of 24

The number isn't arbitrary. The original Macintosh was announced on 24 January 1984 – 24/01/84. So 24 clicks felt appropriate for a tribute to early Mac nostalgia.

I could have picked any number, really. Seven clicks would be too easy to stumble upon accidentally. Fifty would be tedious. Twenty-four sits in that sweet spot where it requires deliberate curiosity without being unreasonably demanding. If you're clicking my footer version number two dozen times, you're either looking for something or you're very bored. Either way, you deserve a Happy Mac.

The Technical Implementation

The Easter egg is built in Svelte 5 with runes, because that's what my website is built with and I wasn't about to switch frameworks just for a hopping computer icon. The implementation is pleasantly straightforward:

A store tracks the click count on the version number. When it hits 24, it triggers the animation. The Happy Mac SVG (more on that in a moment) is positioned off-screen to the left and animates across the full viewport width using requestAnimationFrame for smooth 60fps motion.

The hopping is handled with a CSS keyframe animation that includes subtle squash-and-stretch:

  • At the bottom of each hop, it squashes down (scaleY: 0.85) and widens (scaleX: 1.1)

  • At the peak, it returns to normal proportions

  • Going up, it stretches slightly (scaleY: 1.15) and narrows (scaleX: 0.9)

  • There's also a 5° rotation at the peak for extra personality

The whole thing takes about 15 seconds to traverse the screen, then the store resets so you can trigger it again.

The Sound

Before the Mac hops, you hear a chord. This is a tributary recreation – and I need to be clear about this for legal reasons: this is NOT the original Macintosh startup sound. It's an approximation I built using the Web Audio API.

The original Mac startup sound was a major chord (F4, A4, C5), so I've recreated that using three sine wave oscillators at approximately 349 Hz, 440 Hz, and 523 Hz. They play simultaneously with an ADSR envelope that gives it a quick attack (20ms) followed by a smooth exponential decay over one second.

It's not perfect, and it's not meant to be. It's meant to evoke the feeling of that classic "bong" without reproducing copyrighted audio. Hence: tributary recreation, built from scratch, legally distinct.

Attribution

The Happy Mac SVG comes from Wikimedia Commons, created by NiloGlock at Italian Wikipedia, and licensed under CC BY-SA 4.0. This is explicitly credited both in the source code and in my website's metadata, because proper attribution matters.

I didn't create the icon. I just made it hop.

Why Bother?

Honestly? Because it's delightful. Easter eggs are small moments of joy hidden in otherwise functional spaces. They reward curiosity. They give people who poke around in websites something unexpected to discover.

And there's something particularly fitting about a Macintosh tribute on a personal website. I'm 20. I didn't grow up with the original Macintosh – I only started using a Mac in 2023. But I've developed a genuine appreciation for early classic Macs. The early Mac was all about making computing personal, accessible, human. It had personality. It had a happy face that smiled at you when it booted up successfully. That sensibility – that computers could be friendly, even joyful – feels worth celebrating, even decades later.

Plus, I've been clicking version numbers on devices hoping they'll unlock secret settings. They usually don't. So now my website has a secret that actually rewards that behaviour.

The Code

The implementation lives in HappyMacEasterEgg.svelte if you want to examine it. The store is elsewhere in the repository. The version number click handler is in the footer component. It's all quite pedestrian, really – no clever tricks, just straightforward Svelte reactivity and CSS animations.

The most complex bit is the audio generation, and even that's just basic Web Audio API usage. Three oscillators, one master gain node, some envelope shaping, done.

Future Plans

None, really. This is what it is. A Happy Mac hops across the screen when you click a version number 24 times. That's the entire feature. I'm not planning to add more Easter eggs (though I reserve the right to change my mind), and I'm not going to make this one more elaborate.

Sometimes a thing is complete as it is. The Happy Mac hops. That's enough.

Finding It Yourself

I'm not going to tell you exactly where the version number is. That would rather defeat the purpose of it being hidden. But if you're reading this, you probably already know where to look. And if you don't... well, that's what curiosity is for.

Click around. Pay attention. See what happens.

And when the Happy Mac hops across your screen, know that it's there because someone in 1984 decided that computers should smile at people when they turn on. And that felt like something worth remembering.

Welcome to Macintosh. Enjoy the hop.