# Gasser pencil-sketch hero background correction

Session learning for construction/local-business hero design when abstract blueprint/floor-plan animation is rejected as unclear.

## Trigger

Use this pattern when the client says the generated plan/blueprint reads as random or meaningless lines, or supplies an authoritative sketch/plan asset such as `bleistiftzeichnung.png` / `bleistiftzeichnung_bw.png`.

## Better pattern

- Stop iterating on decorative generated linework; replace it with the supplied real drawing/sketch asset.
- Use the high-contrast black-background/white-line version as a full-bleed hero background.
- Anchor the drawing strongest on the left side, near full opacity/coverage.
- Fade the drawing toward the right with a mask/gradient so the copy and animated logo have breathing room.
- Keep the animated logo/emblem on the quieter right side; avoid making it look like a separate tilted object/card lying beside the page.
- Add a dark overlay behind text to preserve legibility without hiding the sketch entirely.
- Use the colored/original sketch only if it supports foreground detail; do not mix two drawings unless the composition has a clear depth hierarchy.

## Homepage typography after sketch swap

When the supplied sketch becomes the hero Leitidee, reduce the visual weight of the copy so the page does not feel like an agency showcase:

- Shrink oversized hero headlines aggressively; for a serious local construction site, desktop `h1` around the high-50px to mid-70px range often reads better than 90–115px display type.
- Keep the hero copy column narrow enough to leave a quiet right-side drawing/logo zone; e.g. `max-width` around 620–700px rather than 800px+.
- Increase headline line-height slightly after reducing size (`~1.0–1.05`) so German multi-word lines feel stable rather than compressed.
- Make lead text more conversational and less billboard-like; around 16–19px with generous line-height is usually sufficient.
- Reduce section headline and card-title clamps in the same pass. If only the hero changes, the rest of the homepage can still feel over-scaled.
- Visually QA at the real review viewport; computed font-size checks are useful, but final judgement should be screenshot/browser based.

## Concrete-wall sketch variant

If the supplied dark BW sketch starts to make the homepage feel too black or oppressive, test a concrete-texture version of the same drawing before abandoning the visual idea.

Implementation pattern:

- Put the Drive-provided concrete sketch asset under `public/images/hero/`, e.g. `bleistiftzeichnung_beton.png`, and commit it with the component change.
- Swap both the base and reveal image layers to the concrete asset so the start animation and final state match.
- Change the hero fallback background from near-black to concrete grey, not brand red or pure black.
- Soften dark overlays while preserving a stronger left-side readability gradient for copy.
- Keep more of the right side visible than with the black sketch; the concrete texture already has enough visual structure and does not need aggressive masking.
- Brighten/contrast the image slightly instead of piling on black overlay (`filter: contrast(~1.03) brightness(~1.06)` was a good starting point).
- If small Bordeaux eyebrow text becomes marginal over structured concrete, use a lighter rose/bordeaux tint for the hero-only eyebrow rather than increasing global brand red.
- Browser/vision QA should explicitly check three things: less oppressive than the black version, copy contrast still strong, and the concrete/sketch still feels premium rather than wallpaper.
- If a later white sketch asset (`bleistiftzeichnung_weiss.png`) is provided for a more elegant first impression, use it only as the first-session intro layer. Track this with `sessionStorage`/an `html.hero-intro-seen` class so client-side navigation or later homepage visits go directly to the concrete sketch instead of replaying the white intro.
- For the final `Plan → Material → Realität` interaction, keep all hero images identically aligned/sized. Use white sketch for first load, concrete sketch as steady base, and the real-photo overlay (`bleistiftzeichnung_ueberlagerung.png`) behind a soft radial mouse mask. Protect the left copy area with a dark readability gradient.
- If the client asks for the left-to-right blend to be faster, halve the related durations together so the sequence stays coherent rather than only shortening one layer. The Gasser tuning that worked: white intro `4.4s → 2.2s`, concrete arrive `4.2s → 2.1s`, draw-on reveal `3.4s → 1.7s`, reveal delay `0.85s → 0.42s`. Verify computed CSS animation durations and the final end state in browser QA.

## Conversion copy and contact pattern for local construction sites

When refining a local Bauunternehmen homepage, prefer concrete regional/value language over abstract brand language — but avoid overloading the hero with repeated place names if the client says it feels too narrow or cumbersome.

- For Gasser specifically, keep the hero regional rather than naming `Windisch` / `Brugg` in the main block. A better compact pattern is: eyebrow `Regionales Bauunternehmen`, headline `Umbauten, Kundenarbeiten und Baumeisterarbeiten.`, lead `Persönlich begleitet – von der ersten Besichtigung bis zur sauberen Übergabe.` Keep exact local place names for SEO/meta, contact/service-area content, reference locations, and deeper pages rather than the first visual sentence.
- Keep the lead very short: one calm sentence covering personal guidance and clean handover. Do not list every audience and service in the hero lead; the service cards can carry the taxonomy.
- Show email and phone as parallel hero CTAs; keep references as a lower-priority text link.
- On the contact page, add an inquiry checklist: project type, site/location, photos/plans/sketches, desired timeframe, phone number.
- Show the service area as visible chips/tags and repeat phone/email as clear options, not buried footer links.
- Reference detail pages should consume existing schema fields such as `gallery`; prepare sections for facts, Ausgangslage, Herausforderung, Lösung, Ergebnis, and make placeholders an explicit fallback until real photos / before-after material arrives.

## Interactive sketch → concrete → reality reveal

When the client supplies aligned variants of the same hero artwork — e.g. black pencil sketch, concrete-wall sketch, and real-photo overlay — treat them as one registered image stack instead of separate decorative assets.

Recommended pattern:

- Keep all hero images the same pixel dimensions/crop and layer them with identical `object-fit`, `object-position`, scale, and masks so the building stays registered.
- If the concrete/base image and real overlay both show the same sketch lines, animate them with the exact same transform keyframes, delays, and mobile sizing. Do not drift only the base layer; even a tiny independent translate/scale makes the linework look unregistered on hover. Keep draw-on reveal transforms fixed or identical to the base while clipping left-to-right.
- Intro sequence can be: black sketch briefly visible → concrete texture fades in underneath → a continuous line/reveal pass confirms the drawing → final steady concrete/sketch state.
- Put the real photo/overlay layer above the concrete sketch and reveal it only through a soft radial CSS mask driven by pointer coordinates (`--mx`, `--my`, `--reality-spot`). This makes the mouseover feel like “Plan wird Realität” rather than a simple crossfade.
- Keep the reveal out of the text zone visually: a strong left-side readability overlay should remain above image layers, and the real-photo opacity should usually stay below full strength (`~0.75–0.85`) so it integrates with the sketch.
- On `pointerleave`, fade the real layer out and shrink the mask; do not snap it off.
- On touch/mobile, avoid pretending there is hover. Either show a very subtle static real-photo hint or keep the concrete sketch only.
- Use `prefers-reduced-motion` to disable intro animations and hide transient reveal layers while preserving the final concrete/sketch background.
- If the filename contains umlauts for Drive/client naming, download/publish with an ASCII URL-safe filename such as `bleistiftzeichnung_ueberlagerung.png` while preserving the meaning in notes.
- Browser QA should test both the static end state and a simulated pointer move over the hero; verify direct image URLs return `200` and that the reveal layer is actually loaded. If the implementation attaches pointer listeners to the hero/stage rather than the background element, simulate QA events on that stage; dispatching a pointer event on the image/background can falsely show the class but leave CSS variables such as `--reality-opacity` unchanged.
- When the client provides a more realistic replacement overlay later, do not rebuild the whole stack. Download it with a URL-safe filename such as `ueberlagerung_realer.png`, verify it matches the established crop/dimensions, then swap only the `src` for the reality layer and preserve the same mask/opacity/interactions.

Pitfalls:

- If the real-photo overlay asset already contains sketch lines, do not remove the base sketch entirely; use it as the reveal layer so the transition feels like reality emerging under the plan, not replacing the concept.
- A too-small hard circular mask looks gimmicky; a larger soft radial spot reads more premium. If the client asks for more “punktuell,” first reduce radius gently rather than adding a hard edge.
- Do not attach pointer listeners repeatedly under Astro ClientRouter; mark initialized hero backgrounds with a dataset flag or global guard.

## Subtle sketch motion options

Prefer calm CSS motion before adding more WebGL:

1. **Slow sketch drift** — tiny scale/translate movement over 18–30s, preferably `alternate`, to keep the drawing alive without looking like a slideshow.
2. **Light/pass gradient** — a very low-opacity diagonal or horizontal highlight moving over the drawing every 12–18s, like light over paper rather than a sci-fi scanner.
3. **Layered parallax** — if separate assets are available, split paper/background, major lines, and detail lines into layers with tiny differential movement.
4. **Bordeaux line accent** — add one intentional brand-color line or trace moving toward the emblem; only if it follows a real/credible contour, not random decorative paths.
5. **Draw-on reveal** — strongest conceptually, but only worth doing if the drawing is converted to SVG/masks or clean line layers; otherwise it tends to look fake. A pragmatic interim effect is a second copy of the supplied BW sketch as a bright `mix-blend-mode: screen` reveal layer with `clip-path: inset(0 100% 0 0) → inset(0 0 0 0)`, then fade it out while the base sketch remains. Keep this reveal *linear and continuous*: avoid intermediate keyframes at e.g. 12%/62%/88% that change opacity or clip in visible stages, because the client will read that as an abgehackt/three-step reveal. Prefer `animation-timing-function: linear`, only `0% → ~86% fully revealed → 100% fade-out`, and let the base image fade in linearly underneath.
6. **Texture/noise shimmer** — very subtle grain can make the image feel analog, but overuse reads cheap.
7. **Stronger emblem motion** — if the Gasser-G feels passive, first increase logo texture size/opacity and add a controlled intro ease, subtle pulse, and slow 3D rotation. Avoid bobbing or flashy scanner behaviour; keep the text zone protected. If `mix-blend-mode: screen` washes out the burgundy mark, switch the logo canvas layer back toward `normal` blend and verify in browser QA. After increasing presence, be ready to reduce the logo geometry about 20% if the mark starts competing with the sketch/text; size, opacity, and blend mode must be tuned together rather than in isolation.

Always wrap sketch/logo motion in `prefers-reduced-motion: reduce` and keep animation supportive of the supplied drawing, not competing with it.

## Implementation notes

- Put Drive-provided hero assets under a publishable static path such as `public/images/hero/`.
- Prefer CSS `mask-image` / layered linear gradients for left-to-right fade control.
- Verify direct image URLs return `200` and run browser visual QA, not only build checks.
- Commit binary image assets together with the component change so preview/deploy does not break.

## Vercel deployment note for Git-managed Astro sites

When the Gasser/Astro site is connected to Vercel via GitHub, explain deployment behaviour plainly: pushes to the configured production branch (`main` here) trigger automatic Vercel builds (`npm install`, `npm run build`, publish `dist`). Preview branches create preview deployments if configured. There is no CMS/database/secrets dependency for the static site unless a future feature adds one. After pushing, mention that Vercel should pick it up automatically rather than asking the user to redeploy manually.

## Page-transition and performance safeguards

For Astro business sites with `ClientRouter` and custom page transitions:

- Add a global init guard such as `window.__siteTransitionInitialized` before registering document-level listeners; otherwise client-side swaps can duplicate click/popstate listeners.
- Keep transitions short and quiet for service-business websites; around 500–650ms usually feels premium without delaying navigation.
- Exclude `mailto:` and `tel:` links from page-transition interception.
- For decorative Three.js hero scenes, delay initialization until the canvas is near the viewport via `IntersectionObserver`; keep a `WeakSet` for both queued and initialized canvases so repeated swaps do not double-start WebGL.
- Avoid `background-attachment: fixed` on mobile; use scroll backgrounds under mobile media queries.

## Pitfall

If a client says the visual leitidee is not implemented, opacity tweaks are usually insufficient. Switching from invented abstraction to a client-provided source drawing can restore credibility faster than another round of custom SVG/canvas geometry. The source drawing becomes the leitidee; the animation should support it, not compete with it.