I Declared War on a Browser Game. The Game Almost Won.

#webdev #javascript #gsap #showdev

I didn't build this because I needed a project. I built it because I had something to prove.

🎮 Play it: https://extraordinary-bombolone-b35d76.netlify.app/

The Stubbornness Is The Stack
Everyone talks about the AI part of "Vibe Coding." Nobody talks about the part where you're still awake at 1am arguing with a CSS easing curve.

The AI didn't ship this. I did. The AI just meant I could make decisions faster than I could second-guess them. That's the actual workflow. Not magic. Stubborn human. Fast tool.

Why It Looks Like This
I could've made a colorful Simon clone. They exist. They're fine. They're forgettable. I wanted something that looked like it cost money.

Architectural Noir. Ink-black base — not #000000, never pure black. #080612 with a violet undertone that you feel before you notice. Ghost-white type. A single teal accent used exactly three times. CSS noise texture at 3% opacity over everything.

That noise layer is the secret. It's the difference between a screen and a surface. The atmospheric orbs behind the game disc? Blurred divs. That's it.

CSS
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform;
  animation: drift 12s ease-in-out infinite alternate;
}

No Three.js. No canvas. Just divs pretending to be light sources. Works every time.

The Button That Took An Hour
Here's the thing about game feel — it lives in the timing, not the color. I knew the Simon buttons needed to feel pressed. Not just lit up. Actually physical.

I spent an hour on this one curve:

JavaScript
gsap.timeline()
  .to(el, { 
    scale: 1.05, 
    duration: 0.1, 
    ease: "power2.out"    // fast in
  })
  .to(el, { 
    scale: 1.0, 
    duration: 0.3, 
    ease: "power2.inOut"  // slow out
  });

Fast up. Slow down. That asymmetry is everything. The moment I got it right, I sat back and just pressed buttons for five minutes. That's how you know.

Terminal Hell
The game worked perfectly in localhost. You already know where this is going.

Netlify deployed. Favicon vanished. I checked the file path. Correct. I checked the link tag. Correct. I checked both again. Still correct.

47 minutes. The fix was a hard cache clear. A hard cache clear I should have tried at minute two.

Then the branch situation. My local repo lived on master. Netlify was watching main. Every push I made dissolved into silence.

Bash
git push origin master:main --force
I should not have needed --force. I needed --force.

There's a specific kind of tired that only exists when everything is technically correct and nothing is actually working. The exit is always something embarrassingly simple. That's the deal you make with deployment.

The Part I Engineered On Purpose
The SEO layer isn't an afterthought here — it's structural. Schema markup tells Google what the page is, not just what it contains. For a game, that means potential rich results in search. Most devs skip it.

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "SIMON: Tactile Memory Training",
  "applicationCategory": "GameApplication",
  "genre": "Memory Game",
  "operatingSystem": "Web Browser",
  "offers": { "@type": "Offer", "price": "0" }
}
</script>