Layouts

Layouts arrange elements in structured formations within a scene. Workshop handles margins, gutters, and per-cell animation stagger automatically.

Grid Layout

Arrange elements in a grid with the layout: grid directive.

text
Scene "Stats" intent: proof
  layout: grid 2x2
  cell 1: show number "24,300"
    label: "Active Users"
    count-from: 0
    enter: pop
  cell 2: show number "99.97%"
    label: "Uptime"
    enter: pop
  cell 3: show number "$148"
    label: "Avg Contract"
    enter: pop
  cell 4: show number "4.8"
    label: "NPS Score"
    enter: pop

Available grids: 2x1, 2x2, 3x1. The grid handles cell sizing, gutters, and entrance stagger so elements animate in sequence rather than all at once.

Without cell N: prefixes, elements fill cells in order:

text
Scene "Stats"
  layout: grid 2x2
  show number "99.9%"
    label: "Uptime"
  show number "50ms"
    label: "Latency"
  show number "1M+"
    label: "Users"
  show number "24/7"
    label: "Support"

Split Layout

Divide the scene into two columns.

text
Scene "Feature"
  layout: split
  show "Connect your stack in 60 seconds."
    size: title
    align: left
  with show shape "square"
    position: right
    color: accent
    opacity: 0.2

Custom Ratio

Control the column proportions:

text
Scene "Feature"
  layout: split 60-40

The first number is the left column width, the second is the right. Default is 50-50.

When to Use Layouts

Grid works best for metrics dashboards, feature comparisons, and any content with parallel structure. The staggered animation gives each cell its own moment.

Split works best for text-plus-media arrangements — copy on one side, an image or shape on the other.

For simple stacked content (one element after another, centered), you do not need a layout at all. The default behavior handles it.

Next Steps