# I Built an On-Device "Solstice Engine" Using TensorFlow.js to Break Ciphers

> Source: <https://dev.to/hopebestworld/i-built-an-on-device-solstice-engine-using-tensorflowjs-to-break-ciphers-887>
> Published: 2026-06-21 06:10:59+00:00

*This is a submission for the June Solstice Game Jam*

I wanted to build something that forces the player to look around their room, grab a flashlight, or turn on the light, and interact with the physical world!

**Solstice Cipher** is an atmospheric, browser-based puzzle game inspired by Alan Turing’s legendary code-breaking machines and the beautiful transitions of the June Solstice. The game challenges players to step into the shoes of a wartime cryptanalyst to intercept and decode three hidden binary messages celebrating June milestones.

Just like the solstice marks a shifting point between light and darkness, this machine’s cryptographic system alters its logic based on the *actual, real-world light in your room*. To fully break a cipher, you have to decipher cryptic riddles and physically shift your environment between Day Mode (shining a light at your webcam) and Night Mode (covering the lens) to calibrate both mechanical rotors!

Take a look at the "Solstice Engine" in action!

The entire project is completely open-source, free, and lightweight (built using HTML, CSS, and client-side JavaScript). You can explore the repository or host your own version below:

Building this was an absolute joy and a fun logic puzzle in its own right! I wanted to ensure the game was 100% free to run, private for the player, and required zero backend servers or complicated API keys.

`navigator.mediaDevices.getUserMedia`

), the app securely requests access to a localized 320x240 video matrix.`app.js`

to feature persistent memory flags (`dayCalibrated`

and `nightCalibrated`

). Now, the engine securely holds its state when you successfully align a rotor, politely guiding you to switch from flashlight to shadow to finish the job.`style.css`

) to create that clandestine, high-stakes "secret bunker" aesthetic.This game is an ode to the father of modern computing. Instead of a standard clicker game, the mechanics intentionally simulate the interactive physical dial-tuning of the Enigma-decrypting Bombe machines. The puzzles themselves lean heavily on binary data arrays and computational logic definitions, and the initial level unlocks a direct tribute to Turing's profound impact as both a computer science pioneer and a June Pride icon.

To drive the core mechanic without adding any friction or registration steps for players, I utilized **Google TensorFlow.js** loaded straight from a CDN.

Inside `app.js`

, every frame from the user's webcam is treated as an active mathematical playground. The application converts frame pixels directly into data streams on the browser GPU using `tf.browser.fromPixels`

. By using localized matrix mathematics with `tf.mean()`

, it reads the average brightness value instantly. This turns a simple consumer webcam into a zero-latency, private, on-device environmental sensor! It shows off just how incredibly accessible, lightweight, and versatile Google's open-source AI ecosystem can be.

*Thank you so much for hosting this jam! Getting to use history, AI, and creative web design to celebrate a beautiful month of milestones was an incredibly rewarding experience. Good luck to everyone participating!*