How We Built Cyber Circuit: A Memory Card Game Hiding Inside a Circuit-Board Skin

The name sounds like a wire-tracing puzzle. It's actually a pair-matching memory game with circuit-board card art — and that gap between name and mechanic is where the whole design got decided.

April 18, 2026 · Vibe Arcade

The first thing to admit about Cyber Circuit is that the name misled us. It was on the pipeline's proposed-title list described loosely as "cyber-themed puzzle game." We glanced at it and assumed wire-tracing — route the current from a power node to a target node, dodge broken traces, rotate tiles. A whole game already existed in our heads before a single line of code had been written.

What we shipped is a pair-matching memory game. You flip two cards, try to match the symbols, repeat until the grid is clear. The only thing "circuit" about it is the card art. The mechanic is pure Milton Bradley Memory, 1966, unchanged. The interesting part of the build story is how that pivot happened, and what the AI did with the constraint once we committed to it.

Want to play first, then read the build story?

▶ Play Cyber Circuit Now

The Name Problem

"Cyber Circuit" sounds like a circuit-building puzzle. Infinity Loop, Electric Box, any of the Zachtronics games — that whole category was crowding out our imagination before we'd even started design. So the first thing we did was ask the AI to stop assuming.

We prompted for three alternative game types that could honestly fit the name: a wire-routing puzzle, a tower-defence variant where you build circuit paths to defend a core, and a memory matching game with circuit-board art. The pitch for option three was disarming — "the name describes what the cards look like, not what you do with them." That reframing was all it took.

Memory matching also solved a problem the other two options had. Circuit-builders need level design; defence variants need balanced waves. Pair-matching is instantly understood, self-contained, and every round is fresh because the deck shuffles. The theme does the atmospheric work and the mechanic stays out of its way.

Why the Grids Are 4×3, 4×4, and 6×4

Any pair-matching game needs an even total number of cards — every card has a partner. That immediately disqualifies a lot of grid sizes. 3×3 is odd. 5×5 is odd. 3×5 is odd. All out.

The AI's first proposal was 4×3 / 4×4 / 5×4 — all even totals, all playable. We pushed back on the top tier because twenty cards with ten pairs felt like a plateau rather than a jump. Bumping Hard to 6×4 adds eight cards and four pairs over Medium, a genuine step up in memory load without crossing into tedium. The final set (12, 16, 24 cards) also scales the grid visually in a satisfying way: Easy fits a phone's vertical viewport, Medium reads as a clean square, Hard forces the grid wider than it is tall — which looks more like a circuit board. A happy accident that reinforced the aesthetic after the fact.

What Goes on the Cards

The AI picked twelve symbols: lightning, plug, lightbulb, battery, desktop, game controller, wrench, gear, satellite, radio antenna, microscope, floppy disk. Each reads clearly at card-front size. None can be confused with another at a glance — no two lightning-like symbols, no two chip-looking rectangles. They're all recognisable as "things from a technology set" without being strictly electronic, which keeps the vibe playful rather than sterile.

Twelve is also exactly the count Hard needs. Easy draws six per round; Medium draws eight; Hard uses all twelve. The deck is re-shuffled every game, so even players grinding Easy see different symbol subsets each round. That small detail — shuffling the symbol pool, not just the card positions — keeps every game feeling fresh.

The Card Flip Is Pure CSS

The most technically satisfying moment of the build was the card flip. A 3D card flip looks like it should need a library, or at minimum some imperative JavaScript manipulating transforms frame by frame. It doesn't. The whole thing is CSS, five properties deep, and the AI reached for the standard pattern on the first pass:

perspective: 600px on the card container — defines how much 3D depth the browser will render
transform-style: preserve-3d on an inner wrapper — tells the browser that children live in 3D space
transform: rotateY(180deg) applied when a .flipped or .matched class lands — rotates the inner wrapper
backface-visibility: hidden on both faces — so the back of each face is invisible, and whichever face is rotated toward the camera is the one you see
A 0.35-second cubic-bezier transition on the inner wrapper — the curve that sells the feel of the flip

That's all of it. The card front is pre-rotated 180 degrees so it sits behind the back; when the container rotates 180 degrees, the front comes forward and the back disappears. No state machine, no animation frames, no JavaScript timing. The only JavaScript the flip needs is one classList.add('flipped') call on click.

What took iteration was the mismatch feedback. When two cards don't match, we needed a visible signal before they flipped back. The AI proposed a red border flash via a second class (.mismatch) and a keyframe that alternates between two red tones. That works, but the flash duration and the flip-back delay are coupled — too short and the player misses the signal, too long and the game feels laggy. Eight hundred milliseconds is what we landed on. Long enough to register, short enough to keep the pace honest.

The Input Lock That Prevents Chaos

The subtlest piece of logic in the game is the click guard. Five guards, one function: ignore clicks when the game isn't active, when input is locked during a mismatch window, when the card is already matched, when the card is already flipped this turn, or when two cards are already flipped.

Without any of them, the game breaks in specific, player-enraging ways — click the same card twice and it counts as a match; click a third card during the mismatch flash and the second pair goes invisible; click during the win screen and ghost cards flip in the background. The AI wrote three on the first pass; we added two more during testing. This is the small systems thinking that separates a toy from a finished game — the flashy parts get noticed, but the click guard is what makes the flashy parts actually work when players do unexpected things.

Per-Difficulty Leaderboards, Then Stop

The last decision was the leaderboard. A single global leaderboard would incentivise only playing Easy — fewer cards, lower move count, highest score. That's how you build a game nobody plays on Hard.

Splitting the leaderboard by difficulty means each tier has its own ranking. The score starts at 1000, subtracts 5 points per move beyond the pair count, and subtracts one point per elapsed second, with a floor of 100 — and then adds a streak bonus on top: 50 points for a second match in a row, 100 for a third, climbing until you miss. Per-difficulty local best scores show on the menu screen, so you always know what you're chasing between runs.

And that was the stopping point. No power-ups, no unlockable card backs, no daily challenge twist. The mechanic is sixty years old and it works. The temptation to gild it was real, but the right call was to ship it and move on.

What the Name Taught Us

The most useful thing Cyber Circuit gave us wasn't a game — it was a workflow note. Working titles shape design more than we realised. We'd been treating the pipeline's title list as disposable labels, but by the time we'd read "Cyber Circuit" a few times we'd already started designing a different game than the one we eventually built. Catching that early, and asking the AI to propose alternatives that fit the name, was the save. For every game since, we've made a habit of interrogating the name before writing code.

Play Cyber Circuit — try Hard, race your best time, and see how much of the twelve-symbol deck you can hold in memory at once.