Spatial collection playground

Try the options

Choose a collection layout. The code below reflects the same state as the preview. Supplied posters keep the cards readable without WebGPU.

View Card size Card tone Media aspect Background Background size

Live preview

FORM STUDIES

Column

FORM STUDIES

Orb

FORM STUDIES

Ring

FORM STUDIES

Cube

FORM STUDIES

Torus Knot

Use this configuration

Example.svelte

svelte

<SpatialCardGridSection
  section={{ id: "collection-grid", title: "Collection", background: { color: "standard", size: "standard" } }}
  list={items}
  cardSize="m"
  cardTone="muted"
  mediaAspect="3/2"
/>