Archetype → motif matrix
| Archetype | Label | Motif file | Notes |
|---|---|---|---|
audience | Role / audience | motifs/branch-rail-01.svg | Fan-out from a single rail. |
card_grid | Feature / card grid | motifs/frame-card-grid-01.svg | Perimeter frame; calm interior. |
comparison | Comparison / contrast | motifs/dual-rail-01.svg | Bilateral symmetry. |
cta | CTA / convergence | motifs/converge-trace-01.svg | Inbound traces; short loops. |
hero | Hero / impact | — | Relies on global field + aurora; optional local motif later. |
narrative | Explanatory / narrative | motifs/narrative-guides-01.svg | Guide lines; breathing motion. |
navigation | Navigation / header | — | Minimal motion; no sparks behind links. |
principles | Principles / manifesto / sparse | motifs/sparse-frame-01.svg | Almost static; no sparks in asset. |
process | Process / timeline / flow | motifs/trace-flow-01.svg | Routed path + nodes; sparse sparks in asset. |
Below: sample bands using the same asset paths as the product site generator.
Narrative band
Horizontal guide lines — low intensity.
Process band
Routed path with a single spark (SMIL).
Card grid band
Corner frames; calm interior.
CTA band
Converging traces toward a focal point.