Easter egg

3 min

How to Add the Konami Code in Webflow

Learn how to add the legendary Konami code to your Webflow site to trigger a secret easter egg.

In this tutorial, Sandro, co-founder of Gemeos Webflow agency, shows you how to add the legendary Konami Code to your Webflow site to trigger a secret easter egg.

Example

Type the sequence on your keyboard

↑ ↑ ↓ ↓ ← → ← → B A

0 / 10 keys

Sequence	Keys	Result
Konami Code	↑ ↑ ↓ ↓ ← → ← → B A	Custom easter egg
Detection	keydown event	Sequence stored step by step
Reset	Wrong key	Starts over from the beginning

Understanding the Konami Code

The Konami Code (↑↑↓↓←→←→BA) is a cheat code invented by Kazuhisa Hashimoto in 1986 for the game Gradius on NES. It became a gaming cultural reference and is used by many sites as a subtle easter egg. On Webflow, developers especially love it.

1. Add the script in Footer code

The script is self-contained, so you don't need any Webflow element. It creates the toast and animations on its own.

(function() {
  var KONAMI = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown',
    'ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
  var idx = 0;

  document.addEventListener('keydown', function(e) {
    if (e.key === KONAMI[idx]) {
      idx++;
      if (idx === KONAMI.length) {
        idx = 0;
        triggerEasterEgg();
      }
    } else {
      idx = e.key === KONAMI[0] ? 1 : 0;
    }
  });

  function triggerEasterEgg() {
    // Confetti if canvas-confetti is loaded
    if (typeof confetti === 'function') {
      confetti({ particleCount: 200, spread: 90, origin: { y: 0.5 } });
    }
    // Toast message
    var toast = document.createElement('div');
    toast.textContent = '🎉 Konami Code activated! +30 lives';
    toast.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);' +
      'background:#111;color:#fff;padding:20px 32px;border-radius:16px;font-size:18px;' +
      'font-weight:500;z-index:99999;animation:konamiFade 3s forwards;';
    var style = document.createElement('style');
    style.textContent = '@keyframes konamiFade{0%{opacity:0;transform:translate(-50%,-60%)}' +
      '15%{opacity:1;transform:translate(-50%,-50%)}85%{opacity:1}100%{opacity:0}}';
    document.head.appendChild(style);
    document.body.appendChild(toast);
    setTimeout(function() { toast.remove(); }, 3000);
  }
})();

2. Combine it with canvas-confetti

To add confetti when the code is activated, load canvas-confetti in the head and the script will trigger it automatically:

// In the  of your page :
//

3. Customize the easter egg

Replace the content of the triggerEasterEgg() function with any action you want: redirect to a secret page, switch the theme, display a GIF, activate a special mode...

good to know

The Konami Code is an easter egg meant for visitors who know the reference, mostly developers and gamers. It creates a moment of surprise and connection with your tech audience. On a digital agency site or a developer portfolio, it's a strong signal of personality and attention to detail.

Conclusion

The Konami Code is the web's most iconic easter egg. Type ↑↑↓↓←→←→BA to test it on this page. Use cases:

Developer portfolios and creative agencies
Gaming or pop culture sites
Tech hiring pages

How to Add the Konami Code in Webflow

Example

Understanding the Konami Code

1. Add the script in Footer code

2. Combine it with canvas-confetti

3. Customize the easter egg

The Konami Code is an easter egg meant for visitors who know the reference, mostly developers and gamers. It creates a moment of surprise and connection with your tech audience. On a digital agency site or a developer portfolio, it's a strong signal of personality and attention to detail.

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials