Dev Diary🌃
The Making of the Neon Glassmorphic Look
Loading…
Enough reading — go solve something
Every idea on this page is one tap away from practice. The first world is free, no download, no sign-up.
▶ Play Flow PuzzleLoading…
Every idea on this page is one tap away from practice. The first world is free, no download, no sign-up.
▶ Play Flow PuzzleThe first version of Flow Puzzle was light. White background, clean black grid lines, primary colors — the sensible, professional choice. I showed it to a friend and she said, kindly, "it looks like a spreadsheet." She was right. Everything you see now — the near-black backdrop, the glowing lines, the frosted glass panels — came out of throwing that correct, forgettable first version in the bin.
A flow puzzle is, at its heart, about colored lines. On a white background, color is just color — flat and a little harsh. On a near-black background, color does something else: it glows. Each line looks lit from within, like neon tubing or fiber optic. Suddenly the thing the whole game is about — those bright paths snaking across the grid — became the most beautiful thing on the screen instead of the most clinical.
That's the entire reason for the dark theme. It's not a trend or a "dark mode toggle." The game is dark because color only sings against darkness, and color is the point.
We carry a palette of a dozen carefully chosen hues — reds, blues, greens, a cyan, a teal, a hot pink, an indigo. Every one had to satisfy three brutal constraints at once:
Each color actually ships as a pair: a solid hex for the line itself, and a soft translucent "glow" that radiates around it. That glow is doing the emotional heavy lifting. Take it away and the lines look like flat stickers; add it back and they look alive.
The exact opacity of each glow was tuned by hand, color by color. Too faint and the line looks dead. Too strong and several glowing lines smear into mush. The "right" value is different for every hue because bright colors and dark colors bloom differently. Yes, we really spent days on this.
The panels — menus, cards, the headers on pages like this one — use a glassmorphic look: semi-transparent surfaces with a blur behind them, so the glowing background bleeds softly through. It's the same instinct as the dark theme. A solid opaque panel would block the glow and flatten the screen. A frosted one lets the light through, so the whole interface feels like it's floating above a lit world rather than sitting on top of a flat one.
It's also a small nightmare to get right across browsers — pairing every blur with its -webkit- twin so Safari behaves — but the effect is worth the fuss. It's a big part of why the game feels "premium" even though it runs in a browser tab.
Lines animate as you draw them. Confetti bursts when you finish, themed to the world you're in — leaves in Mr. Bean, sparks in Rocky, stars in Secret Agent. Particles drift gently in the background. None of it is loud, and that's deliberate. The animation exists to make completing a board feel as good as it is, then get out of the way. A puzzle game that constantly flashes at you isn't relaxing, and relaxing is half of why people play. (More on that half in the piece on why these puzzles calm you down.)
Each of the ten worlds has its own accent color and gradient, so moving from Mr. Bean's greens to Charlie's blues to The Hero's cold silver actually feels like progressing through the journey. The visual shift is subtle, but it makes the long climb described in the world walkthrough feel like travel rather than repetition.
None of this makes the puzzles easier or harder — a 7×7 solves the same whether it glows or not. But design isn't about the logic. It's about whether you want to be there. The neon glow, the frosted glass, the gentle confetti — all of it exists to make a humble connect-the- dots puzzle feel like somewhere worth spending two quiet minutes. The spreadsheet version worked perfectly. Nobody would have ever wanted to open it twice. That's the difference design makes.