The animation that made my app disappear

I rebuilt this site in an afternoon. New design, a card for my first app, Lode, little iPhone mockups, a glowing line that travels around the card’s edge. It looked great.

Then I took a screenshot of it, just to check. The page had my name, my headline, the word “Apps”… and then a huge empty black gap where my app was supposed to be.

The app card was gone. Not broken. Not missing. Just invisible.

What actually happened

I’d added one of those smooth effects where things gently fade in as you scroll down. Every modern landing page has them. Ask an AI to “make it feel premium” and you’ll almost certainly get one.

Here’s the catch. For that effect to work, the page starts with the content hidden, and a bit of code in the browser reveals it a moment later. If that code runs, you get the nice fade. If it’s slow, or blocked, or never runs at all, the content just stays hidden.

My screenshot tool didn’t wait for that code. So it saw exactly what the page looked like before the magic happened: nothing.

“But it works on my laptop”

It did. On my laptop, on fast Wi-Fi, the card faded in beautifully every time. That’s what makes this trap so sneaky: you’ll never see it while you’re building.

The people and things that would see the empty version:

• someone on a slow phone connection, staring at a blank section for a second or two
• people who’ve turned off JavaScript, or use a browser extension that blocks it
• link previews, screenshot tools, and some of the bots that read your page to decide what it’s about, including the AI tools people now use instead of search

That last one hurts. The whole point of the page was to tell the world “here’s my app.” And for some of the readers that matter most, the app wasn’t there.

The fix was deleting something

I didn’t add a clever workaround. I removed the fade from the app card entirely. It now shows up instantly, every time, for everyone.

I kept the fancy stuff for the parts that don’t matter if they fail: the dotted pattern in the background, the light moving around the card’s border. If those don’t load, nobody loses anything. The page still says what it needs to say.

That’s the rule I ended up with:

Animate the decoration, never the message.

The one question to ask your AI

If you build with AI, you’re going to get effects like this, because they look good in a demo. You don’t have to give them up. Just ask this before you ship:

“If JavaScript doesn’t run on this page, what does a visitor see? Is any important text or image hidden until an animation plays?”

Then test it yourself. In Chrome, click the icon left of the address bar, open Site settings, set JavaScript to Block, and reload your page. Whatever you see now is what the slowest phone, the strictest browser, and a lot of bots see. If something important is missing, you just found your invisible card.

It took me a lucky screenshot to find mine. Yours takes thirty seconds.