# Gasser homepage intro animation tuning Session-derived notes for tuning a local-business homepage logo intro after repeated visual feedback. ## User feedback signals - Do **not** make the logo pulse or bounce. A double pulse reads as nervous/cheap and was explicitly rejected. - Do **not** zoom the logo to full viewport size if the bitmap becomes soft/blurred. The animation should fade out before visible blur dominates. - Direct homepage first-load can have a short branded intro; internal navigation back to `/` should not replay it or flash the logo. - If the user still sees the old animation, consider browser cache and Astro ClientRouter page-swap behaviour before assuming the CSS is wrong. ## Preferred animation pattern For this Gasser-style intro: 1. Render the intro overlay `display: none` by default. 2. Add an early `` inline script that sets a root class before body paint: - `has-pending-gasser-intro` only for direct homepage first-load in the browser session. - `has-seen-gasser-intro` for subsequent visits and non-home pages. 3. Use `sessionStorage` so the intro runs once per browser session. 4. On non-home pages, mark the intro as seen so navigation from `/leistungen/` to `/` does not play the intro. 5. Animate only `opacity` and `transform`. 6. Keep duration around `1.5s` if the user wants a more imposing but still non-blocking intro. 7. Start with the background/aperture fading in, then the logo appears as if from the viewer direction: - logo starts slightly larger and transparent, e.g. `scale(1.18), opacity: 0`; - settles once to `scale(1), opacity: 1`; - then eases forward only to around `scale(1.9)` and fades to `opacity: 0`. 8. Keep final apparent width around ~80% of viewport. Do not scale to `30x+`/full-screen if it causes blur. 9. Add a subtle radial/aperture pseudo-element behind the logo for impact instead of adding WebGL. ## Route-transition pitfall Astro ClientRouter can swap in the homepage markup while the intro element exists in the DOM. If `.site-intro` is visible by default and only hidden after JavaScript runs, the user may see a flash during internal navigation. Prevent this by making the intro hidden by default and opt-in via a root class. If the page-transition overlay also contains a `Gasser` wordmark/mark animation, it can visually compound with the homepage intro and look like a double blink. For serious local-business sites, keep internal page transitions material/line-based and remove redundant brand-mark flashes. ## Cache QA note When reviewing Vercel/static deployments in Firefox, ask the user to hard reload (`Ctrl+F5` / `Cmd+Shift+R`) or clear site data from the lock icon. CSS/JS cache can otherwise make them see the prior animation after a successful deploy.