The part about initial="hidden" baking opacity: 0 into the server-rendered markup matches something I've hit too. One thing that helped me was gating the hidden state behind a class set by a tiny inline script (e.g. js-enabled on the html element), so no-JS or failed-hydration visitors still see the content. Did you also try a CSS fallback animation with a short delay that forces opacity back to 1 if the bundle never runs?
Thanks Ethan! I did try the delayed fallback, but it felt slow since you're still staring at a blank screen until the timer kicks in. Ended up flipping it so content renders visible by default and JS only hides off-screen parts after hydration.
The bigger fix though was trimming a lot of the heavier animation along the way. Simpler site now, but it shows up on every iPhone, and looks more professional.
Ethan Moore
The part about initial="hidden" baking opacity: 0 into the server-rendered markup matches something I've hit too. One thing that helped me was gating the hidden state behind a class set by a tiny inline script (e.g. js-enabled on the html element), so no-JS or failed-hydration visitors still see the content. Did you also try a CSS fallback animation with a short delay that forces opacity back to 1 if the bundle never runs?