【Stylish Transitions】AI App Development from Zero Knowledge – 1000 Hours #11: Effects Are the Soul – Recreating Persona 5-Style Animations

Summary
During app development, I felt that simple screen transitions weren’t enough, so I tried to recreate the stylish effects of the popular game Persona 5 using CSS and JavaScript. At first, I ran into problems: misaligned timing, unclickable buttons, and lingering overlays. But when I changed my thinking from “covering” to “opening,” the entire feel of the app clicked into place. Paying attention to visuals is a sign that you’ve poured your soul into it.

…But before we dive in, take a look at this—this is the app I spent 1,000 hours building from scratch. I started with zero knowledge, and I want to share with you how I got here!

As I developed the app, I found myself wanting to make it better and better. In the beginning, I thought, “As long as it works, that’s enough.” But before I knew it, I was thinking, “If I’m going to do this, I want it to look cool.”

This time, I focused on the transition to the “Prison” screen. Without any animation, it felt like a routine task. That’s when I wanted to introduce some bold red-and-black effects like Persona 5.

My first attempt was to overlay a red-black gradient across the whole screen and then fade it out. I created a CSS animation using a .persona-overlay class, giving it a gradient background and animating it with slide-in and fade-out.

However, it didn’t work as planned. The prison screen’s background would briefly appear before the overlay faded, breaking the illusion. Even adjusting animation-timing-function: ease or animation-fill-mode: forwards didn’t fix it.

That’s when I had an idea:
“What if I start with the screen already covered, and then animate it to open instead of trying to cover it afterward?”

That shift in perspective made a huge difference.

I rewrote the keyframes like this:

@keyframes slideUpFadeOut {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}

With this change, the effect began with a red curtain covering the screen, then smoothly sliding upward to reveal the content beneath. It looked far more polished.

Another issue I encountered was that the screen became unclickable after the animation ended. Even though I had set pointer-events: none in the CSS, it remained blocked. I solved this by explicitly hiding the overlay element using JavaScript:

setTimeout(() => {
  document.querySelector('.persona-overlay').style.display = 'none';
}, 1000);

Lastly, I tackled the horizontal gradient lines that slice across the screen. A single looping line didn’t have enough impact, but looping too many caused performance issues. The solution? Show multiple lines of different widths and timings with slight delays. That layering created the dramatic, cutting-through-data style seen in Persona 5.

After all this, I came to a renewed realization:

Programming isn’t just about making things work.
It’s about creating a world. Putting your soul into the details. Making users say, “Wow, that’s amazing...”
That fleeting moment of awe is what sticks in their memory.

Next up: maybe I’ll add animations to the dialogue text too…
(Yes, I’m still going!)

●NEXT
AI App Development from Zero Knowledge – 1000 Hours #12
(👉#1)

●My HP
Check Out the Website I Built Using My 1000 Hours of App Development Experience!

It may look like a game, but it’s actually a website I built after 1,800 hours of development. It was tough, but I gained the skills to build anything.

This site is designed to help people around the world pursue their dreams—using Japanese-style diligence and five key pillars: learning, exercise, sleep, nutrition, and time. I’m living this lifestyle too.

One day, I hope to team up with users who reach their dreams here and take on world-changing projects together.

So—want to chase a big dream with me?