Content Elements

Elements are what appears on screen. The basic syntax is show followed by an optional type and a quoted value.

Text

The default element type. show "Hello" is equivalent to show text "Hello".

text
show "Hello World"
  size: title
  enter: rise
  color: primary

Numbers

Animated counters that count up (or down) from a starting value to the displayed value.

text
show number "12,847"
  label: "Active Users"
  count-from: 0
  enter: pop

The label appears as a subtitle below the number. The count-from value sets the animation starting point.

Images

Reference uploaded assets or file paths.

text
show image "product-screenshot.png"
  enter: fade
  fit: fill
Fit Mode Behavior
fill Fills the container, may crop
fit Fits within container, may letterbox
bleed Extends beyond safe zone

Logos

Like images, but sized smaller and contained within safe margins.

text
show logo "brand.svg"
  position: center
  size: large

Shapes

Decorative geometric primitives rendered as SVG.

Shape Result
circle Filled circle
square Filled rectangle (corner radius varies by mood)
ring Hollow circle with thick stroke
line Horizontal line
triangle Filled triangle
pentagon Filled pentagon
hexagon Filled hexagon
octagon Filled octagon

Shapes are typically used as background decoration behind text:

text
show shape "circle"
  layer: back
  size: hero
  position: center
  opacity: 0.15
  color: accent
with show "Main Message"
  size: display

Charts

Animated bar charts with data and labels.

text
show chart bar
  data: [3200, 4800, 5900, 8400]
  labels: ["Q2", "Q3", "Q4", "Q1"]
  color: accent
  size: display
  enter: rise

Charts are mood-styled — colors, typography, and animation adapt to the current mood.

Element Modifiers

All modifiers are optional. Workshop provides mood-appropriate defaults.

Modifier Values Description
size caption, body, subhead, title, display, hero Visual weight. Default: title for text, hero for numbers
color primary, accent, muted, contrast, or hex Color. Default: primary for text, accent for shapes
enter fade, rise, pop, bounce, etc. Entrance animation
exit Same as enter Exit animation (auto-picked if omitted)
position center, upper-left, lower-third, etc. Placement on canvas
align left, center, right Text alignment
weight light, regular, medium, heavy, black Font weight
emphasis Any substring Highlights a word in accent color
layer back, middle, front Z-ordering
opacity 0-1 Element transparency
max-width narrow (50%), medium (70%), wide (90%) Text wrapping width
case upper, lower, title, sentence Text case transform
style Style name Apply a defined style
label String Subtitle for number elements
count-from Number Starting value for number animation
data Array of numbers Chart data values
labels Array of strings Chart axis labels
fit fill, fit, bleed Image/video fit mode

Position Values

Position Location
center Dead center (default)
upper-left Top-left quadrant
upper-right Top-right quadrant
lower-left Bottom-left quadrant
lower-right Bottom-right quadrant
upper-third Upper third
lower-third Lower third
left Left side, vertically centered
right Right side, vertically centered

Next Steps