The "Sanoli" Easter Egg: Hacking Reality

Every great portfolio needs a secret. Mine? Type "sanoli" anywhere on the site.

What started as a simple idea — "wouldn't it be cool if..." — turned into one of the most fun features I've ever built.

The Vision

I wanted something that felt like hacking into the matrix. Not just a cute animation, but a full transformation of the site. Here's what I aimed for:

1. A screen glitch to signal something's happening
2. Matrix code rain (green characters cascading down)
3. A terminal sequence typing out hacker messages
4. "ACCESS GRANTED" in giant neon letters
5. The site permanently switching to Hacker Mode (green theme, CRT effects)

Phase 1: Detecting the Sequence

First, I needed to listen for the "sanoli" keypress sequence. I built a custom React hook:

export function useEasterEgg() {
    const [triggered, setTriggered] = useState(false);
    const sequenceRef = useRef<string[]>([]);
    const target = 'sanoli';

    useEffect(() => {
        const handleKeyPress = (e: KeyboardEvent) => {
            sequenceRef.current = [...sequenceRef.current, e.key].slice(-target.length);
            if (sequenceRef.current.join('') === target) {
                setTriggered(true);
            }
        };

        window.addEventListener('keydown', handleKeyPress);
        return () => window.removeEventListener('keydown', handleKeyPress);
    }, []);

    return { triggered, setTriggered };
}

The trick: I keep a sliding window of the last 6 characters. When it matches "sanoli", boom — the effect triggers.

Phase 2: The Matrix Effect

The visual centerpiece is MatrixEffect.tsx. It goes through 4 phases:

1. Glitch (1 second)

@keyframes glitch-anim {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 2px) }
    40% { transform: translate(-2px, -2px) }
    60% { transform: translate(2px, 2px) }
    80% { transform: translate(2px, -2px) }
    100% { transform: translate(0) }
}

The entire document.body shakes. Subtle, but intense.

2. Matrix Rain (2 seconds)

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()";
// ... canvas drawing logic
ctx.fillStyle = "#00ff00"; // Hacker Green
ctx.font = `${fontSize}px monospace`;

I render falling characters on a full-screen canvas, creating that iconic Matrix aesthetic.

3. Terminal Typing (3.5 seconds)

const lines = [
    "> INITIALIZING EXPLOIT...",
    "> BYPASSING FIREWALL...",
    "> INJECTING PAYLOAD...",
    "> ROOT ACCESS ACQUIRED..."
];

Each line types out with an 800ms delay. The terminal window has a glowing green border and a blinking cursor.

4. Access Granted (2 seconds)

<h1 className="text-8xl font-black text-[#00ff00] drop-shadow-[0_0_10px_rgba(0,255,0,0.8)]">
    ACCESS GRANTED
</h1>

The text bounces and glows. Pure cyberpunk energy.

Phase 3: Hacker Mode (Permanent)

After the animation, the site enters Hacker Mode. This is where it gets wild.

I inject global CSS that:

• Forces monospace fonts sitewide
• Turns all cyan (#00f3ff) into neon green (#00ff00)
• Adds a CRT overlay with scanlines and flicker

const style = document.createElement('style');
style.innerHTML = `
    * {
        font-family: 'Courier New', Courier, monospace !important;
    }
    
    body {
        background-color: #000000 !important;
    }

    h1, h2, h3, p, div {
        color: #00ff00 !important;
        text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    }
`;

And the CRT overlay:

<div className="fixed inset-0 z-[9999] pointer-events-none">
    {/* Scanlines */}
    <div className="bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%)] bg-[length:100%_4px]" />
    
    {/* Flicker */}
    <div className="animate-[flicker_0.15s_infinite] opacity-[0.02]" />
</div>

The entire site looks like a 1980s hacker terminal. Until you refresh the page.

The Challenges

Problem #1: CSS Specificity Hell

Tailwind's utility classes are extremely specific. My initial green overrides weren't working because Tailwind's classes had higher specificity.

Solution: Target the actual Tailwind classes with escaped selectors:

.text-\\[\\#00f3ff\\] { color: #00ff00 !important; }

Problem #2: Performance

Animating a full-screen canvas at 30fps can lag on slower devices.

Solution: Used requestAnimationFrame and limited the frame rate to 33ms intervals.

Problem #3: The "Jumpscare" Effect

The original version was jarring — the Matrix rain appeared instantly.

Solution: Added a 1-second glitch phase first. The delay builds anticipation and makes the transition smoother.

What I Learned

1. Progressive Enhancement: The easter egg doesn't break the site. If JavaScript fails, you just don't get the secret feature.
2. User Delight: Small touches like the scanline effect make users feel like they discovered something special.
3. Creative Freedom: Portfolio sites are playgrounds. Don't be afraid to go wild.

The Result

Try it yourself. Right now. Type "sanoli" anywhere on this page.

Watch the matrix unfold. 🕶️

---

Tech Stack: React, Framer Motion, CSS Animations, Canvas API