Cipher Safari: The Ultimate Kids' Enigma Cryptography Adventure

pavan k — Sun, 21 Jun 2026 02:05:03 +0000

This is a submission for the June Solstice Game Jam

What We Built

Cipher Safari is an interactive wildlife adventure game. It uses the core concepts of Alan Turing's Enigma machine to perform the wildlife rescue mission. In this game you will move across across unique animal habitats by solving riddles, twisting dials (rotors) and using vines (plug board) to make it to next level.

How to Play

You need to be at least 5 years old to play this game.

To play the game:

You read the limerick that is displayed on the scroll
Spin the rotors - Season and Shadow
Plug the vines - Yep! just like the Enigma plugboard!

Then, if all is well, et voila! the cipher is broken and animal does a happy dance, and you level up. Hoorayyy!!!!!

Your mission:

Pass all the levels to save the animals.

Our Goal and Vision

Cryptography is a complex concept to explain be it a kid or a grown-up. Concepts like ciphers, encryption can feel intimidating especially when a complex machine like Enigma is being explained. This game was developed to make these concepts more fun and easy for kids and young adults.

By turning industrial rotors into "Seasons/Time" and a complex plugboard into "Vines/Stumps," the game sneaks in the foundational logic of code-breaking and multi-variable encryption behind a playful safari adventure.

Fitting the Theme

June Solstice Theme: Time and changing seasons drive the entire game. The core loop forces you to constantly adapt to the shifting seasons (including the Summer Solstice) and changing daylight hours to crack the codes.
Best Ode to Alan Turing: This is a direct tribute to Alan Turing’s legendary work at Bletchley Park. The rotating rotors and physical cable routing are gamified versions of the real Enigma Machine. It celebrates Turing's work by teaching the next gen kids about logic and cryptography through a game play.

Video Demo

Code

pavanpkulkarni / cipher_safari

🦁 Cipher Safari: The Ultimate Kids' Enigma Cryptography Adventure

Welcome to Cipher Safari: The Ultimate Kids' Enigma Cryptography Adventure Play it live here: 🎮 https://ciphersafari.vercel.app/

This interactive web game teaches players about encryption, logical deduction, and problem-solving through the lens of a beautiful, animated Safari adventure. It is inspired by the legendary Enigma Machine.

🔐 1. What is the Enigma Machine?

The Enigma machine was a famous cipher device used heavily during World War II to protect military communication. It looked a bit like an oversized typewriter, but it was incredibly complex for its time. When a letter was typed into the keyboard, it would pass through a series of rotating wheels (called "rotors") and a plugboard, scrambling the letter before lighting up the encrypted output on a lampboard.

Because the rotors moved after every single keypress, the encryption pathway constantly changed. Typing "A" three times in a…

View on GitHub

How We Built It

The Tech Stack

Frontend: Next.js and React
Styling & UI Design: Tailwind CSS
Animation: Framer Motion
IDE: Antigravity and agy CLI
CI/CD : Github Actions
Publish : Vercel

A "Fixed" Canvas: This is a responsive canvas to keep the puzzle layout from breaking on different screens, We benchmarked the game on a fixed 1920x1080 canvas. useEffect hook is used to watch the viewport size and scales the whole game up or down dynamically with CSS transform: scale(). Consistent alignment, everywhere.

Interactive SVG Plugboard: The component handles the cord mechanics and uses SVG cubic bezier curves to make the vines sag and stretch dynamically as you drag them. To keep mouse tracking pixel-perfect while the canvas is scaling, We have used SVG's getScreenCTM() matrix transformation to map raw screen pixels directly to the SVG coordinates.

Procedural Sound Synthesis: We have gotten rid of bulky audio files. Every sound effect is built in real-time using the native Web Audio API:

Mechanical Rotors: The Rotor Wheels component mimic the physical dials or rotors of the enigma machine. It supports dragging and clicking to rotate the wheels while snapping precisely to the right "steps". We have calculated angles from mouse movement.

Animations: Framer Motion handles the heavy lifting for smooth UI transitions—like the animal stage pop-ups, spark particles flying off the dials, and victory banners.

Challenges & Solutions

Season Shifting Scenes
The Snag: MOving the entire game scene to match the current season while still maintaining the same performance or causing layout glitches was tough. Animating every single environmental asset on the fly would have been a massive resource hog.
The Fix: We pre-baked highly detailed, static background "pages" for each season. This let us use Framer Motion to simply switch between the seasons thus creating a clean, instant, and lag-free (almost) transition every time you spin the season rotor.
Dynamic Scaling & Layout Alignment
The Snag: The UI relies on absolute positioning for rotors, specific socket coordinates, and draggable vines. If a user resized their browser, standard responsive design (like percentages or flexbox) completely broke the strict alignment the plugboard needed.
The Fix: We forced the entire game into a 1920x1080 "benchmark window frame." A hook calculates the screen space available and applies a global CSS transform: scale() to that frame. The puzzle layout stays perfectly intact and aligned, no matter what device it's loaded on. This is still buggy and needs some work to be done.

Prize Category

Best Ode to Alan Turing :

Cipher Safari is an entry point to an interactive tribute to Alan Turing and the Enigma machine. It translates the rather confusing cryptographic concepts into an fun adventure for kids. Instead of heavy rotor, children manipulate glowing "Season" and "Shadow" rotor dials and connect colored vines (plugboard) to decode limericks. By translating the mechanics of the concepts of Enigma cipher in a playful safari setting, the game is intended to teach encryption, logical deduction, and pattern recognition. Kids experience the thrill of cracking codes, thus ensuring that Turing’s work of computational thinking always inspire the coders/thinkers of tomorrow.

Best Google AI Usage :

We have used AI-assisted development to build the Cipher Safari game. Tools used were

Gemini Pro and Fast Models : The ideation was brought to life through Gemini. It helped us brainstorm and refine the ideas. We extended the usage to generate clean consistent prompts Google Flow and Antigravity.
Google Flow : We created all the static images with simple prompts to make them fun and kid friendly. Image generation models helped us visualize and modify the images as per our requirements. The seassons, avartars, animals followed the same safari theme.
Antigravity agentic IDE : Acting as a pair programmer, Antigravity handled about 60-70% of the coding effort from making the 1st few drafts, to setting up CI/CD and publish pipelines. Due to heavy operation and when we ran out of tokens, we used agy in parallel to have extra control on our coding env.
Google Analytics : We have embedded Google Analytics to view the user adoption of our newest game.

Team

A special thanks to my life partner who has been the think tank behind the ideation, creative and all the art work.

DEV Community: pavan k