I recently deployed a new homepage and a redesigned blog for a project called AppData. The homepage now features a "How it works" section, a work feed integrating Apify actors, and a services block with a toggle. The blog articles and the /tools pages received animated headers, text that fades in, and interactive CTA blocks.

I updated the site metadata and OG images for the blog articles. I excluded the old /build path from the sitemap since it now redirects to the founders section on the homepage, maintaining its anchor links. Part of the final launch checklist was making sure these new animations respected the operating system's reduced motion setting.

Heavy animations can cause discomfort. Operating systems have an accessibility setting to tone down movement, which browsers expose through a CSS media query. Since I had animations in plain CSS, Tailwind classes, and React state, I needed different approaches to handle it across the project.

First, I checked the animations relying on standard CSS.…