Six Fun Front‑End Easter Egg Effects with Code Samples

1️⃣ Ghost Button (Never Clickable)

Effect description: The button follows the mouse pointer while maintaining a subtle offset.

<button id="ghostBtn" style="position:absolute">点我试试？</button>
<script>
  const btn = document.getElementById('ghostBtn');
  document.addEventListener('mousemove', (e) => {
    btn.style.left = `${e.clientX + 15}px`;
    btn.style.top = `${e.clientY + 15}px`;
  });
</script>

2️⃣ Minimalist Matrix Digital Rain

Code highlight: Implements the classic falling‑character effect in only about 20 lines.

<canvas id="matrix"></canvas>
<script>
  const canvas = document.getElementById('matrix');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const chars = '01';
  const drops = Array(Math.floor(canvas.width/20)).fill(0);
  function draw() {
    ctx.fillStyle = 'rgba(0,0,0,0.05)';
    ctx.fillRect(0,0,canvas.width,canvas.height);
    ctx.fillStyle = '#0F0';
    drops.forEach((drop, i) => {
      ctx.fillText(chars[Math.random()>0.5?0:1], i*20, drop);
      drops[i] = drop > canvas.height ? 0 : drop + 20;
    });
  }
  setInterval(draw, 100);
</script>

Running tip: Press F11 for full‑screen mode.

3️⃣ Melt Animation

Interaction effect: Clicking the element triggers a distortion‑and‑fade animation.

<div onclick="melt(this)" style="cursor:pointer; padding:20px; background:#ff6666;">点我融化！</div>
<script>
function melt(element) {
  let pos = 0;
  const meltInterval = setInterval(() => {
    element.style.borderRadius = `${pos}px`;
    element.style.transform = `skew(${pos}deg) scale(${1 - pos/100})`;
    element.style.opacity = 1 - pos/100;
    pos += 2;
    if(pos > 100) clearInterval(meltInterval);
  }, 50);
}
</script>

4️⃣ Console Treasure Map

Easter‑egg effect: Logs styled secret messages in the developer console.

console.log('%c🔮 你发现了秘密通道！', 'font-size:24px; color:#ff69b4; text-shadow: 2px 2px #000');
console.log('%c输入咒语 %c"芝麻开门()" %c获得力量', 'color:#666', 'color:#0f0; font-weight:bold', 'color:#666');
console.debug('%c⚡ 警告：前方高能反应！', 'background:#000; color:#ff0; padding:5px;');

5️⃣ Reverse‑Scroll Page

Magic interaction: Inverts the scrolling direction of the page.

window.addEventListener('wheel', (e) => {
  e.preventDefault();
  window.scrollBy(-e.deltaX, -e.deltaY);
}, { passive: false });

Warning: May confuse users; use only for prank scenarios.

6️⃣ Real‑Time ASCII Camera

Technical highlight: Captures webcam video and renders it as ASCII art.

<pre id="asciiCam" style="font-size:8px; line-height:8px;"></pre>
<script>
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();
    const chars = '@%#*+=-:. ';
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    video.onplaying = () => {
      canvas.width = 80;
      canvas.height = 40;
      setInterval(() => {
        ctx.drawImage(video, 0, 0, 80, 40);
        const imgData = ctx.getImageData(0,0,80,40).data;
        let ascii = '';
        for(let i=0; i<imgData.length; i+=4) {
          const brightness = (imgData[i]+imgData[i+1]+imgData[i+2])/3;
          ascii += chars[Math.floor(brightness/25.5)] + (i% (80*4) === (80*4-4) ? '
' : '');
        }
        document.getElementById('asciiCam').textContent = ascii;
      }, 100);
    };
  });
</script>

⚠️ Usage Precautions

Camera access requires HTTPS or localhost. Reverse‑scroll code can affect user experience; use only for fun. Matrix rain consumes GPU resources continuously. Console Easter‑egg should not expose sensitive information.

These snippets act like front‑end “Easter eggs”; used sparingly they add delight, but avoid deploying them in production environments.