Designing Lanterns: A React Native Puzzle Game Built Around Feel

The short version

Lanterns started as a small mobile puzzle game, but the useful lesson was bigger than the puzzle rules. Games create permission to care deeply about feel: taps, light propagation, invalid-state feedback, solve moments, haptics, animation timing, and all the tiny signals that tell a user the interface is alive.

The build took roughly 7-10 days. The engine was written in TypeScript, the visual layer leaned on React Native Skia, Reanimated helped drive motion, and Expo Go made the feedback loop fast enough to test ideas on-device while they were still forming.

What prompted this

I play a lot of mobile puzzle games, and eventually that turned into a small itch: I wanted to build one of my own in React Native.

Lanterns is based on the puzzle logic of Akari. The player places lights on a grid, uses numbered wall clues, and tries to illuminate the board without creating conflicts. That gave the project enough structure to be interesting, but not so much scope that it turned into a multi-month game production.

The real attraction was the interaction surface. Puzzle games are full of small moments: a cell becoming lit, a move being rejected, a clue becoming satisfied, a level unlocking, a solve state landing with just enough feedback to feel good without becoming noisy.

The game engine and board

The most important implementation decision was separating the puzzle engine from the rendering layer.

The engine needed to describe the level, know where lights could be placed, calculate illumination, validate numbered walls, detect conflicts, and report solve state. That kind of logic belongs in plain TypeScript because it should be easy to test, reason about, and reuse without depending on the animation or rendering implementation.

The board then became a view over that state. A tap changed the model. The model described the new truth. The visual layer interpreted that truth into animation, color, haptics, and feedback.

The animation and haptics layer

The fun part was making the game feel responsive.

React Native Skia gave the board a canvas-like surface for drawing cells, light states, and visual transitions. Reanimated helped define motion that could respond to state changes without forcing every interaction through ordinary React view updates. Haptics gave certain actions a physical response: placement, invalid moves, clue satisfaction, and solve feedback could each have a different feel.

The main design question was restraint. Puzzle games can become visually loud very quickly. The goal was not to animate everything. It was to make each important state change legible and satisfying enough that the player understood what happened without needing extra explanation.

The playground workflow

The most useful workflow decision was building a playground for the board and its states.

Instead of waiting for full game flow every time I wanted to test a visual detail, I could isolate the board, force states, experiment with timing, and see how the interaction felt on-device. Expo Go made that loop fast enough that the project stayed playful rather than procedural.

That mattered because micro-interactions rarely arrive correct on the first try. A transition might be technically smooth but emotionally flat. A haptic might be too strong. A solve animation might feel late. A visual state might be clear in a simulator but too subtle in hand.

Where Codex helped

Codex was useful as a design and development support tool during the build.

The value was not that it replaced taste or product judgment. It helped speed up exploration: shaping implementation options, generating small technical paths, checking edge cases, and making it easier to keep moving when the next interaction idea needed a quick prototype.

For a small game, that mattered because the project had a short window. The 7-10 day timeline worked because the build could keep shifting between design thinking and implementation without a heavy handoff.

Stack note

React Native and Expo remain the practical foundation for this type of mobile experiment. They make it realistic to prototype quickly, test on-device, and still keep a path toward a production-quality app.

React Native Skia and Reanimated are worth keeping close for interaction-heavy mobile surfaces. They are not needed for every screen, but when the interface depends on motion, drawing, transitions, and tactile feedback, they open up a much richer design space than ordinary layout primitives.

Takeaway

Lanterns was a puzzle game, but the lesson transfers back to product work.

Good frontend work is not only arranging elements on a screen. It is deciding how the interface responds, how quickly feedback lands, what a user can understand without reading, and how much polish a moment deserves.

Games make that work obvious. Product interfaces benefit when the same care comes back into normal software.