aronsnotes quit page flickering animation

improving the flow of the quit page

04.07.2025 · by Aron Kovacs

Executive Summary

I've implemented a sophisticated flickering animation on the quit page, creating a subtle yet engaging user experience.

Intro

I was pretty happy with the quit page's Matrix-style typing animation. It blended well with the story of aronsnotes.com—gamifying digital character development.

The "wake up neo…" text in the animation blurs the line between the digital and physical worlds. It closes the UX loop on the site—when you try to quit aronsnotes, you realize you're not just playing a game—you're playing life.

User Story

That said, the existing flow sucked. Many users complained they couldn't return after quitting, even though clicking the logo in the bottom nav actually brings you back to the main page.

Fix

I wanted to improve the flow, make it more obvious that the text is clickable, and breathe a bit more life into an otherwise blunt page.

I had tried to prompt a flickering effect on the bottom nav logo using Cursor a couple of months ago—it failed miserably.

Now, a couple of months later, Cursor has improved absurdly, and I managed to get something out with a prompt—but it still flopped.

So, I searched the web for a great flickering animation to serve as the base for the new UX.

"Good artists copy. Great artists steal." – Pablo Picasso

I found a perfect one—shoutout to texteffects.dev.

That became the foundation. With some tweaking, it blended perfectly with the site's style.

CSS


@keyframes flicker {
  0% {
    opacity: 0.4;
    text-shadow: none;
  }
  19.9%, 22%, 62.9%, 64%, 64.9%, 70%, 100% {
    opacity: 0.99;
    text-shadow: 
      -1px -1px 0 rgba(111, 250, 30, 0.4), 
       1px -1px 0 rgba(111, 250, 30, 0.4), 
      -1px  1px 0 rgba(111, 250, 30, 0.4), 
       1px  1px 0 rgba(111, 250, 30, 0.4), 
       0 -2px 8px #6ffa1e,
       0 0 2px #6ffa1e,
       0 0 5px #6ffa1e, 
       0 0 15px #6ffa1e, 
       0 0 2px #6ffa1e, 
       0 2px 3px #000;
  }
  20%, 21.9%, 63%, 63.9%, 65%, 69.9% {
    opacity: 0.4;
    text-shadow: none;
  }
}

Fine-tuning

Now came the time to finesse the details.

I synchronized the Matrix typing animation so that the flickering kicks in right after the fade-out.

When the logo starts flickering, the bottom nav's background vanishes, and the entire screen background shifts from blackish to pitch black—mimicking how real life looks when electrical lights flicker and die.

It was almost perfect. But one thing was still off: the Matrix animation was fading out gradually, which clashed with the abrupt flickering. So I updated it—now, the Matrix effect cuts off instantly, precisely when the flickering begins.

Try it out

Go ahead—close the article and hit "quit" in the top nav.