# Gasser hero/logo animation refinement

Use this reference when a local construction/trades hero animation uses a brand mark and the user reports that the visual Leitidee feels unclear, the hero photo looks like a separate tilted object, or the logo artwork shows a white frame/background.

## Durable lessons

- If the user says the visual idea is unclear, do not merely lower opacity or move objects. Recompose the hero so the visual, copy, and motion all express one concept.
- For Gasser-style construction visuals, prefer the concept: **Planlinie → Materialkörper → saubere Ausführung**.
- Avoid a large tilted photo/card in the hero when it reads as a separate object lying beside the design. Move project photography later into references/proof sections unless it directly supports the hero concept.
- If supplied PNG logos appear to have a checkerboard/white artboard, verify actual alpha. Some exported PNGs visually show checkerboard but are RGB with no transparency. Create transparent derivatives before using them in CSS/WebGL.
- Use only the bordeaux symbol for background/hero animation when requested; avoid white backgrounds, artboard edges, frames, or full-logo text in the dark hero.
- Reduce distracting diagonal construction lines. Use orthogonal plan/grid lines and at most one intentional accent axis that supports the brand mark/cut line.

## Useful implementation pattern

1. Download/use the user-provided 2D and 3D logo assets.
2. Programmatically remove non-red/neutral background pixels and save transparent PNG derivatives, e.g.:
   - `public/images/brand/gasser-logo-2d-transparent.png`
   - `public/images/brand/gasser-logo-3d-transparent.png`
3. In the hero static fallback, use the transparent 3D mark directly.
4. In Three.js/canvas, load both transparent textures:
   - 2D logo: low-opacity plan/flat layer
   - 3D logo: higher-opacity material/relief layer
5. Animate a subtle morph by varying opacity and micro-rotation rather than creating an obvious spinning logo.
6. Build the background from:
   - quiet orthogonal plan grid
   - simple room/wall linework
   - one bordeaux accent line that visually becomes the logo cut
7. Keep `prefers-reduced-motion` and mobile fallbacks.
8. Verify in browser vision/screenshot, not only by build output.

## QA checklist for this pattern

- Logo appears without white/grey artboard, border, or frame.
- Hero no longer contains a tilted/separate-looking photo card.
- Diagonal lines are removed or visually subordinate.
- The copy names the concept clearly, e.g. “Vom Plan zur sauberen Ausführung.”
- Build passes and browser console has no JS errors.
- Motion remains subtle and brand-supporting, not a generic Three.js demo.