<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Walker Bolt</title>
    <description>The latest articles on Forem by Walker Bolt (@walker_bolt_62297c729ba8f).</description>
    <link>https://forem.com/walker_bolt_62297c729ba8f</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3903865%2F62eba0ab-1cd1-4353-871b-467332c47def.png</url>
      <title>Forem: Walker Bolt</title>
      <link>https://forem.com/walker_bolt_62297c729ba8f</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/walker_bolt_62297c729ba8f"/>
    <language>en</language>
    <item>
      <title>I Declared War on a Browser Game. The Game Almost Won.</title>
      <dc:creator>Walker Bolt</dc:creator>
      <pubDate>Wed, 29 Apr 2026 09:51:13 +0000</pubDate>
      <link>https://forem.com/walker_bolt_62297c729ba8f/i-declared-war-on-a-browser-game-the-game-almost-won-5dp5</link>
      <guid>https://forem.com/walker_bolt_62297c729ba8f/i-declared-war-on-a-browser-game-the-game-almost-won-5dp5</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkuel9pk0pwgv1ryv82n6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkuel9pk0pwgv1ryv82n6.png" alt="A screenshot of the Simon memory game featuring a round interface with four colored quadrants and a central round display showing Round 1"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I didn't build this because I needed a project. I built it because I had something to prove.&lt;/p&gt;

&lt;p&gt;🎮 Play it: &lt;a href="https://extraordinary-bombolone-b35d76.netlify.app/" rel="noopener noreferrer"&gt;https://extraordinary-bombolone-b35d76.netlify.app/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Stubbornness Is The Stack&lt;/strong&gt;&lt;br&gt;
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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why It Looks Like This&lt;/strong&gt;&lt;br&gt;
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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nt"&gt;CSS&lt;/span&gt;
&lt;span class="nc"&gt;.orb&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;absolute&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;border-radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;50%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;blur&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;120px&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="py"&gt;will-change&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;transform&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;drift&lt;/span&gt; &lt;span class="m"&gt;12s&lt;/span&gt; &lt;span class="n"&gt;ease-in-out&lt;/span&gt; &lt;span class="n"&gt;infinite&lt;/span&gt; &lt;span class="n"&gt;alternate&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No Three.js. No canvas. Just divs pretending to be light sources. Works every time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Button That Took An Hour&lt;/strong&gt;&lt;br&gt;
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.&lt;/p&gt;

&lt;p&gt;I spent an hour on this one curve:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;JavaScript&lt;/span&gt;
&lt;span class="nx"&gt;gsap&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;timeline&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;to&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;el&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
    &lt;span class="na"&gt;scale&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;1.05&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
    &lt;span class="na"&gt;duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
    &lt;span class="na"&gt;ease&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;power2.out&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;    &lt;span class="c1"&gt;// fast in&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;to&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;el&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
    &lt;span class="na"&gt;scale&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;1.0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
    &lt;span class="na"&gt;duration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
    &lt;span class="na"&gt;ease&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;power2.inOut&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;  &lt;span class="c1"&gt;// slow out&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Terminal Hell&lt;/strong&gt;&lt;br&gt;
The game worked perfectly in localhost. You already know where this is going.&lt;/p&gt;

&lt;p&gt;Netlify deployed. Favicon vanished. I checked the file path. Correct. I checked the link tag. Correct. I checked both again. Still correct.&lt;/p&gt;

&lt;p&gt;47 minutes. The fix was a hard cache clear. A hard cache clear I should have tried at minute two.&lt;/p&gt;

&lt;p&gt;Then the branch situation. My local repo lived on master. Netlify was watching main. Every push I made dissolved into silence.&lt;/p&gt;

&lt;p&gt;Bash&lt;br&gt;
git push origin master:main --force&lt;br&gt;
I should not have needed --force. I needed --force.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Part I Engineered On Purpose&lt;/strong&gt;&lt;br&gt;
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.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;HTML
&lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"application/ld+json"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@context&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://schema.org&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@type&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;WebApplication&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;SIMON: Tactile Memory Training&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;applicationCategory&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;GameApplication&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;genre&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Memory Game&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;operatingSystem&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Web Browser&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;offers&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@type&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Offer&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;price&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;0&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Ten lines. Engineered signal. Free real estate.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Go Play It&lt;/strong&gt;&lt;br&gt;
This isn't a tutorial. It's not a portfolio piece. It's a game with a design system, a brand identity, and my name in the footer.&lt;/p&gt;

&lt;p&gt;Built in evenings. Deployed from Pakistan. Forced-pushed to main at 1am.&lt;/p&gt;

&lt;p&gt;🎮 &lt;a href="https://extraordinary-bombolone-b35d76.netlify.app/" rel="noopener noreferrer"&gt;https://extraordinary-bombolone-b35d76.netlify.app/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Drop questions below — happy to go deep on the GSAP state management or why I spent 47 minutes on a favicon.&lt;/p&gt;

&lt;p&gt;Stasis is failure. Keep building.&lt;/p&gt;

&lt;p&gt;— Walker Bolt&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>gsap</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
