Cipher Safari: The Ultimate Kids' Enigma Cryptography Adventure

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

1. 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.




2. 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.