Hungry Frog 🐸
How a quirky 404 page Easter egg evolved into a full-featured arcade game with SVG animation, Web Audio synthesis, and a competitive leaderboard.
The Origin Story
It started as a simple idea: what if our 404 page wasn't just an error message, but something genuinely fun? Most users dread hitting a dead end, so we wanted to turn that frustration into a moment of delight.
We added a tiny pink frog that could catch flies. Nothing fancy—just a quick distraction while you figured out where you actually wanted to go. But something unexpected happened: people started deliberately visiting the 404 page to play.
Our founder's three kids became the unofficial QA team, demanding "more snakes", "bigger flies", and "louder sounds". Before we knew it, the Easter egg had grown into a proper arcade game worthy of its own home.
Technical Deep Dive
Pure SVG Graphics
The entire game is rendered using scalable vector graphics—no sprites, no canvas, no WebGL. The pink frog, menacing snakes, and buzzing flies are all hand-crafted SVG elements. This approach gives us infinite resolution scaling (perfect for any screen size) and incredibly small file sizes. The frog alone is just a few kilobytes of path data, yet renders crisply on a 4K display.
Squash & Stretch Animation
Disney's 12 principles of animation influenced our approach. When the frog hops, it squashes down and stretches out using CSS transforms on the SVG. This simple technique (scaleY for squash, scaleX for stretch) brings the character to life without any complex animation libraries. The result feels organic and playful—exactly what an arcade game should be.
Synthesised Sound Effects
Rather than loading audio files, we generate all sounds in real-time using the Web Audio API. Oscillators create the hop boing, catch chirp, combo celebration, and game over sting. Each sound is defined by frequency curves and gain envelopes—the same techniques used in synthesisers. The total audio code is under 100 lines, yet produces rich, retro-inspired sound effects.
Predatory Snake Behaviour
The snakes aren't just obstacles—they actively hunt the frog. Each snake's head tracks towards the player using angle interpolation for smooth turning. Multiple snakes coordinate their attacks using separation forces, preventing them from clumping together. A subtle sine wave is added to their movement for that slithering feel. As your score increases, more snakes spawn, ramping up the difficulty organically.
Combo Multiplier System
Catch flies quickly and your score multiplies. The combo system rewards skillful play—chain catches within 1.5 seconds to build your multiplier. Different fly types (normal, fast, big) have different point values, and the combo applies on top. Hit a 5x combo on a fast fly? That's 15 points for a single catch. The system creates those "just one more try" moments that make arcade games addictive.
Global Leaderboard
Competition drives engagement. Our leaderboard stores the top 10 scores globally, with automatic updates when you beat your own record. The backend validates scores server-side and includes rate limiting to prevent abuse. Players can claim a name and update their high score across sessions—turning a casual game into a competitive experience.
Touch-First Controls
The game was designed mobile-first. Tap anywhere to hop—no virtual joysticks or awkward button overlays. The touch handler calculates the hop direction and distance based on where you tap relative to the frog. Keyboard controls (arrow keys and WASD) were added later for desktop players. The game area fills the screen, hiding the header and chat widget during active gameplay for a fully immersive experience.