# RoofHero Animation System — V1 Reference

Canonical reference for RoofHero motion on homeowner-facing pages, ads, explainers, and Roof Review visuals.

Source visual file: `roofhero-brand-visual-system-v3.html`

## Motion Principle

RoofHero motion should prove useful work is happening:

- the roof is being found
- the roof is being reviewed
- the scope is becoming clearer
- the homeowner is moving toward a local pricing path

It should never feel like generic SaaS flourish.

## Locked Tokens

| Token | Value | Role |
|---|---:|---|
| Dark canvas | `#0b1c18` | Roof Review / trace background |
| Trust green | `#0f2620` | Text, progress bars, handoff surfaces |
| Grid | `rgba(30,76,65,0.06)` or white 4.5% | Only approved pattern |
| Trace | `#ff7006` | Roof perimeter, scan dot, active path |
| Secondary trace | `#ff9a50` | Internal roof lines |
| Soft field | `#f7f6f1` | Motion demo and page background |
| Border | `#c3c2bc` at 45-55% | Inputs, cards, pills |

## Catalogue

| ID | Name | Use When | Timing |
|---|---|---|---|
| RH-M01 | Calm Reveal | Section headings, proof cards, explanatory text | 0.45-0.65s, ease-out |
| RH-M02 | Address Confidence | Address found, flow-step confidence, non-sensitive status chips | 0.25s stagger |
| RH-M03 | Scope Trace | Roof Review hero, Digital Roof Scan, explainer videos | 2-6s total |
| RH-M04 | Roover Handoff | Explaining RoofHero front door → Roover engine → pricing path | 0.2s stagger |

## RH-M03 Scope Trace Sequence

| Phase | Time | What Happens |
|---|---:|---|
| Canvas visible | 0-0.4s | Dark plantation canvas and grid already present |
| Perimeter trace | 0.8-5.0s | Blaze line traces roof outline |
| Scan dot | 0.8-5.0s | Blaze dot follows the trace with a soft glow |
| Internal lines | 3.2-5.2s | Secondary roof lines draw in |
| Measurement pills | 5.1-5.6s | Simple non-price labels pop in |
| Label reveal | 5.7-6.2s | Roof Review / Powered by Roover labels fade up |

## Production Rules

- One-shot only. Do not loop in production page sections.
- Always honour `prefers-reduced-motion`.
- Static final state is acceptable everywhere.
- Input usability beats animation. The address field must be visible and usable before any Places/autocomplete/status animation.
- Use simple labels: `Roof Review`, `Roof area`, `Scope`, `Powered by Roover`.

## Never

- Never animate fake live roofer activity.
- Never animate quote counts.
- Never show fake prices or fake matched roofers.
- Never call early pricing a final quote.
- Never animate the RoofHero logo mark itself.
- Never use gradient orbs, bokeh, parallax, Lottie, or generic particle backgrounds.

## Implementation Note

For the current Cloudflare Worker site, keep motion CSS-only where possible. If a richer Roof Review engine is needed, adapt the Roover parameterised rooftop trace engine but retoken it to RoofHero:

- blaze trace instead of Roover amber
- plantation dark canvas
- homeowner labels, not engine labels
- no real homeowner PII in committed sample configs