WORK-402
Setting up your dashboard 0 entities found · 8/31 branches scanned
ID:WORK-402Status:done

Docs — hero cover reference and animated prism background showcase

The capstone of SPEC-101: document hero-cover and ship the animated prism background as a live, authored example. There is currently no docs example of media-position="cover" on hero at all.

Priority:mediumComplexity:simpleMilestone:v0.21.0Source:SPEC-101
main View source

Criteria completion

Criteria completion: 5 of 5 (100%) checked; history from Jun 11 to Jun 120%25%50%75%100%Jun 11Jun 12

Relationships

Implements 1
Related 6
Branches 2
main current done
claude/threejs-sandbox-backgrounds-env77o readyclaude/spec-101-hero-cover-prism done
History 4
  1. 4bd8dcf
    • ☑ The hero reference page gains a **cover** section: a plain image-cover hero (the one-attribute change from a normal hero), then the animated background — `{% sandbox src="prism-scene" /%}` in the hero's media zone under `media-position="cover"`.
    • ☑ The mechanism note explains the contract stack: cover layout + SPEC-090 posture demotion (inert backdrop) + guest fill — and the motion/perf authoring contract (eager-only, dim-under-scrim, reduced-motion, capped DPR, boot-frame gradient).
    • ☑ The sandbox reference documents `height="fill"` in the attributes table and prose.
    • ☑ `media-guests.md` cross-links the pattern from the "Live program" section.
    • ☑ Pages render correctly in light + dark and at mobile widths; `vite build` green.
    by bjornolofandersson
  2. 27124ea
    Content editedby Claude
    WORK-402: docs — hero cover reference + animated prism background
  3. b979eeb
    Created (ready)by bjornolofandersson
  4. a1580fa
    Content editedby Claude
    SPEC-101: break down into WORK-398..402 for v0.21.0

Acceptance Criteria

  • The hero reference page gains a cover section: a plain image-cover hero (the one-attribute change from a normal hero), then the animated background — {% sandbox src="prism-scene" /%} in the hero's media zone under media-position="cover".
  • The mechanism note explains the contract stack: cover layout + SPEC-090 posture demotion (inert backdrop) + guest fill — and the motion/perf authoring contract (eager-only, dim-under-scrim, reduced-motion, capped DPR, boot-frame gradient).
  • The sandbox reference documents height="fill" in the attributes table and prose.
  • media-guests.md cross-links the pattern from the "Live program" section.
  • Pages render correctly in light + dark and at mobile widths; vite build green.

Dependencies

  • WORK-398 (hero cover host) · WORK-399 (guest fill) · WORK-401 (the prism scene). WORK-400 informs the eager-only guidance.

References

  • SPEC-101 §7 · site/content/runes/sandbox.md, site/content/runes/media-guests.md, the hero reference page

Resolution

Completed: 2026-06-11

Branch: claude/spec-101-hero-cover-prism

What was done

  • site/content/runes/marketing/hero.md — new Cover section: the image-cover hero (one-attribute switch, media-text-valley backdrop), the animated background example ({% sandbox src="prism-scene" /%} in a cover hero with height="lg"), the mechanism note (cover + posture demotion + auto-fill), the authoring contract for animated backdrops (eager-only, design-dim, reduced-motion, budget caps), and a cover-attributes table; the layout-attributes table now lists cover.
  • site/content/runes/sandbox.md — Host-owned height — height="fill" section + attribute-table update.
  • site/content/runes/media-guests.md — the Live program section cross-links the animated-hero-backdrop pattern.

Notes

  • Site build green (191 pages indexed); the built hero page verified to carry the full cover markup chain (rf-hero--cover, data-cover-scope, posture demotion, data-height="fill", overlay scheme). Light/dark/mobile rendering of the live page wants a browser eyeball, as with every visual showcase.