# Gasser 3D Intro Logo Dive Animation Session-derived pattern for replacing a heavier homepage WebGL logo layer with a performant, imposing first-view intro. ## When to use Use for local-business/trades homepages where the client wants a premium brand moment on first homepage open, but performance is more important than persistent WebGL/canvas motion in the hero. ## Pattern - Remove/deactivate the persistent hero WebGL/logo canvas if it is not essential to the visual idea. - Use the supplied 3D logo as a static image sequence substitute: one optimized transparent image animated with CSS only. - Prefer WebP for the intro (`~50 KB` target) with PNG fallback. - Preload the WebP only on the homepage. - Show the intro only once per browser session using `sessionStorage`, adding a class such as `has-seen-gasser-intro` early in `` before the body renders. - Respect `prefers-reduced-motion` by disabling the overlay. - Keep `pointer-events: none`; the page must be loaded underneath and never behave like a blocking loader. ## Animation recipe Use a single, non-pulsing dive zoom: 1. Fade/scale logo in quickly. 2. Hold only briefly so the mark is recognizable. 3. Scale aggressively from the exact center of the logo to cover the whole viewport. 4. Fade out at the end. Avoid intermediate overshoot/settle keyframes after the initial reveal; they read as a double pulse. For an immersive “dive into the logo” effect, scale to a very large value (`scale(30+)`) over about 1 second, with `transform-origin: 50% 50%`. Example keyframe shape: ```css .site-intro { animation: gasser-intro-shell 1000ms cubic-bezier(.2,.82,.2,1) both; pointer-events: none; } .site-intro__mark { transform-origin: 50% 50%; animation: gasser-intro-logo 1000ms cubic-bezier(.12,.9,.12,1) both; will-change: transform, opacity; contain: layout paint style; } @keyframes gasser-intro-shell { 0% { opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } @keyframes gasser-intro-logo { 0% { opacity: 0; transform: translate3d(0,0,0) scale(0.36); } 12% { opacity: 1; transform: translate3d(0,0,0) scale(0.9); } 24% { opacity: 1; transform: translate3d(0,0,0) scale(1); } 68% { opacity: 1; transform: translate3d(0,0,0) scale(9); } 100% { opacity: 0; transform: translate3d(0,0,0) scale(32); } } ``` ## Performance notes - Animate only `transform` and `opacity`. - Avoid large animated drop-shadows during the zoom; they can create expensive repaints and visually smear at high scale. - Do not import Three.js for a first-view logo intro unless the interaction truly requires real 3D. - Browser QA should verify: - intro duration is about `1s` - transform origin is centered - the WebP is loaded instead of the PNG in modern browsers - no persistent hero canvas remains if performance was the reason for the change - sessionStorage suppresses repeat intros during page transitions/reloads in the same session