AI App Development from Zero Knowledge – 1000 Hours #9

9: Subtle, Yet Striking – The Tug-of-War Between Effects and UI

Quick Summary
This chapter focuses on designing a "level-up animation" for an app that upgrades the user’s level daily. While initially aiming for a Persona 5-style flashy animation, the effect felt overdone and disrupted the user experience. Through trial and error, the design settled on a subtle red-and-black gradient frame and flowing lines—leaving a lasting impression without being overwhelming. The key lesson: great UI is often about subtraction, not addition.

Leveling Up, Subtly but Effectively

This time, the topic is level-up animations.
In this app, the user’s level increases every day. Naturally, I needed a visual effect to communicate that progress. But that’s where the challenge began—how do you express it?

At first, I went bold. I tried to mimic the stylish animations of Persona 5.
Picture iron bars slamming open left and right—a dramatic reveal. I recreated this vibe using CSS animations, complete with grid-like patterns.

But honestly? It looked tacky.

It felt way too heavy for something shown daily. The animation seemed long, and to make matters worse, bugs appeared—status boxes briefly disappearing, mysterious frames flashing on the screen edge. Clearly, this was too much.

That’s when I had a realization:
Maybe it’s better to convey the level-up not through a dramatic “effect,” but through a subtle “mood.”

---

The Power of Simplicity

Next, I tried something minimal:
A red-and-black gradient border that flashes briefly.
I added a temporary level-up class to the .status-box, then used CSS to make the border glow subtly. With setTimeout(), the class is removed after 1 second—creating a quick, natural animation that feels smooth each day.

To give it a bit more character, I added another touch:
A thin, elongated red-black line that flows upward. It’s not flashy, but it draws the eye. Even I thought, “This works.”

---

Plenty of Bugs, Plenty of Lessons

That said, the journey wasn’t bug-free.
Errors like "levelUp is not defined" and "setShowDoor is undefined" came up repeatedly. I kept running into basic state management issues in React. The most laughable? A JSX syntax error that actually displayed “gills” (in Japanese, “エラ” = “error”).

---

Less Is More in UI

After all this, one thing became clear:
UI strength doesn’t come from adding more—it comes from removing what’s unnecessary.

Persona 5’s design isn’t built on flashy animations alone.
Its world is crafted through consistency—color scheme, layout, spacing, rhythm in sound and motion. That’s what I’m aiming for too: immersion without awkwardness.

From now on, I’ll keep chasing those low-key but impactful animations that make users think, “Nice touch.”

---