WORK-350
ID:WORK-350Status:ready

Rebuild index composability section as a bento showcase

Capstone + real-world validation. Replace the current split-feature composability section on the site index (a juxtapose of two sandboxes) with a richer bento grid where each cell is a different live rune composition — the section demonstrates composability by being a composition. It doubles as the hero example atop the new Compositions docs category (WORK-346) and as the dogfood proof that the bento substrate works end to end.

Now that the v0.20.0 surface model has shipped, the showcase can flex the new surface vocabulary too — so the grid demonstrates both composition axes (a guest in a media zone, and the surface treatment around it).

Priority:mediumComplexity:moderateMilestone:v0.20.1Source:SPEC-085
claude/work-346-compositions-docs View source

Criteria completion

Criteria completion: 0 of 7 (0%) checked; tracking started on Jun 11, no incremental history yet0%25%50%75%100%Jun 11Jun 15

Tracking started Jun 11 — check back for trends.

Relationships

Implements 1
Related 14
Branches 7
claude/work-346-compositions-docs current ready
changeset-release/main readyclaude/v0.21.0-release readymain readyclaude/v0.21-registry-sandbox-milestone readyclaude/threejs-sandbox-composition readyclaude/v0.20.1-docs-showcase-plan readyclaude/v0.19-milestone-planning draft
History 3
  1. ce25d58
    Created (ready)by bjornolofandersson
  2. 0499a2b
    Content editedby Claude
    plan: v0.20.1 milestone — surface-model docs & showcase
  3. 4acd9ca
    Content editedby Claude
    plan: aggregate chart layout (WORK-349) + index bento showcase capstone

Proposed cells (tune during build)

  • Anchor (large): the existing juxtapose of two sandboxes (light/dark profile card) — the only live iframes.
  • Cover poster (tall): a media-position="cover" card with a frost scrim (the tequila-sunrise treatment) — the marquee surface-model cell (SPEC-089).
  • Plan chart: {% aggregate type="work,bug,spec,decision,milestone" group="status" layout="chart" %} — our own roadmap, live (WORK-349).
  • Map: a 2-pin map in a cell.
  • Stat (small, tinted): an aggregate count ("100+ runes").
  • Showcase bleed (wide): a mockup (static screenshot) in a showcase, bleeding past the tile corner; or a framed/displaced media cell (frame facets, SPEC-086).
  • Substrate / gradient cell (small): a substrate-patterned or bg-gradient surface (SPEC-087/088).
  • Code/diagram (small): a compact codegroup or diagram.
  • Pullquote (small, tinted dark): the existing testimonial quote.

Acceptance Criteria

  • The index composability section is a bento grid authored with explicit {% bento-cell %} cells (exercises WORK-347), with mixed sizes and a coherent magazine rhythm.
  • One tile charts the real plan roadmap via aggregate layout="chart" (WORK-349).
  • At least one tile uses showcase bleed and at least two use per-cell tint (the SPEC-085 signature compositions).
  • At least one tile uses the surface model — a cover poster cell (and/or framed media / substrate / gradient) — so the showcase reflects the v0.20.0 vocabulary (SPEC-086–089).
  • Live sandbox iframes are limited (anchor cell only; the showcase tile uses a static image) to keep the landing page fast.
  • The section renders correctly in light and dark mode and at mobile widths; no layout/overflow regressions.
  • The grid is referenced as the hero example from the Media guests page (WORK-346).

Approach

Author as site content in site/content/index.md, replacing the current {% feature %} composability block. Depends on the full bento substrate and the aggregate chart layout landing first. Treat it as the acceptance test for the whole composition/bento workstream.

Dependencies

  • Bento substrate: WORK-345, WORK-347, WORK-348
  • Media-zone selector: WORK-339
  • Plan chart: WORK-349

References

  • site/content/index.md (current feature/juxtapose composability section)
  • SPEC-085, WORK-346