• 

  The playable 5×5 board, controls, score, and instructions.

• 

  A completed route lights the home lantern.

• 

  Responsive mobile board and help panel.

Lantern Lines

Tagline: Turn the paths. Carry the light home.

Inspiration

I wanted a small browser game that people could understand at a glance and still enjoy solving. Many puzzle prototypes depend on a backend or account even when the core interaction can happen entirely in the browser. Lantern Lines is a quiet, self-contained game: one board, one goal, and a clear result when the light reaches home.

What it does

Players rotate tiles in a five-by-five grid to connect a starting lantern to a home lantern. Connected tiles light up as the path grows. The game tracks moves and the best completed score, offers Undo and Reset, and generates a new seeded puzzle on demand. It keeps progress in the browser's local storage and puts the seed in the URL so a specific puzzle can be reopened. Mouse and keyboard controls both work.

How I built it

The app uses semantic HTML, CSS, and plain JavaScript. Each tile has two directional connections. Rotation changes its bitmask, and a breadth-first traversal follows matching connections from the starting lantern to determine what lights up. A deterministic seeded generator scrambles a known solvable path; the win condition checks a continuous route to the destination. The background and lantern artwork were generated for this project with AI image generation. The board paths and all controls are code-native. No account, external runtime library, paid API, or backend is needed.

Challenges and learning

The hardest part was keeping the puzzle truly solvable while making the visual light path reflect the connection graph. An end-to-end solve test caught a mapping error: the generated route was stored in traversal order rather than tile index order. After fixing it, the automated test completed a puzzle and observed the destination lantern lighting up. I also tuned the layout at desktop, shorter laptop, and mobile sizes and tested keyboard rotation, undo, persistence, reset, and the help panel.

What is next

Possible next steps include curated difficulty levels and more path shapes, with the same no-account design. These are ideas, not current features.

Try it

Open the live demo. Click a tile to rotate it clockwise, or use the arrow keys to choose a tile and Space to rotate. U undoes a move. Use Reset to retry the same puzzle and New puzzle for another seed. Connect the two lanterns to finish.

Live demo: https://estona815.github.io/lantern-lines-hyperbloom-2026/

Public source: https://github.com/estona815/lantern-lines-hyperbloom-2026

Built with: HTML5, CSS3, JavaScript, GitHub Pages, Playwright, AI image generation.

Status: A new project built during the Hyperbloom September hackathon. The game is functional and the source is public. The visual assets were AI generated; the code and game logic were created for this entry.

Built With

• ai-image-generation
• css3
• github
• html5
• javascript
• playwright