# Gasser hero blueprint motion reset

Session-derived notes from a Gasser homepage iteration where an initially promising “full-width blueprint” concept failed because execution became too busy and motion-heavy.

## Problem signals from client

- The logo still moved side-to-side and up/down, which made it feel unstable rather than premium.
- The floor plan was not clearly recognizable as a real plan.
- The blueprint layer did not appear to build up meaningfully.
- Background linework made hero text harder to read.
- The user liked the idea in principle, but not the implementation.

## Durable design lesson

For local construction/trades homepages, a blueprint hero must behave like a calm architectural drawing, not a WebGL/motion demo.

Preferred composition:

- Keep the company logo / emblem static as a brand anchor.
- Put the readable copy on a protected dark zone.
- Push denser plan linework to the right / non-text side.
- Use one recognizable orthogonal floor plan, not many overlapping grids/lines.
- Use motion as progressive reveal only: outer walls → inner walls → openings/dimensions → one accent build line.
- Avoid continuous drift, floating, pulsing, camera tilt, or parallax that makes the plan/logo feel unstable.

## Implementation pattern

### Logo

- Do not move hero logo with pointer or scroll.
- Remove sinusoidal floating (`Math.sin(...)` position/rotation), pointer parallax, and scroll offsets.
- If hover exists, limit it to very subtle opacity/glow/scale only; no position shifts.

Example principle:

```ts
logoGroup.position.x = fixedX;
logoGroup.position.y = fixedY;
logoGroup.rotation.z = 0;
logoGroup.scale.setScalar(1 + hover * 0.02);
```

### Blueprint

- Prefer SVG for exact orthogonal plan linework.
- Use `pathLength="1"` and CSS variables for reveal:

```css
.wall--outer {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--bp-shell));
}
```

- Drive variables via scroll/intro:
  - `--bp-shell`
  - `--bp-core`
  - `--bp-detail`
  - `--bp-axis`

- Add a dark text-protection overlay above the plan but below content:

```css
background: linear-gradient(
  90deg,
  rgba(17,19,21,0.96) 0%,
  rgba(17,19,21,0.9) 40%,
  rgba(17,19,21,0.56) 60%,
  rgba(17,19,21,0.18) 100%
);
```

### QA checklist for this pattern

Before presenting:

- Screenshot the hero at initial load.
- Confirm headline and lead are readable without squinting.
- Confirm the plan is recognizable as a floor plan, not decorative noise.
- Confirm dense linework stays mostly off the text area.
- Watch the live hero for 10–15 seconds: logo must not float, drift, bob, or pulse distractingly.
- Scroll slightly and verify the plan reveal is perceptible but calm.
- If the client says “idea OK, execution not good,” simplify and remove motion first; do not add more effects.