Vertical Step Card

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Instruction *

  instruction · string

  The step itself, in the imperative — 'Fold the dough over itself'. This is the largest thing in the frame and the only thing a viewer is guaranteed to read, so write the action and leave the caveats to `detail`. Four to eight words sets in two or three lines; the type scale drops automatically past forty-six characters and again past seventy-four, so a long instruction still fits but arrives smaller.

  now: Fold the dough over itself, four times

• Step

  step · number

  Which step this frame is. Clamped into `total`, and it decides which index tab is filled: the tabs above it read as done, the tabs below as still to come.

  now: 2

• Total

  total · number

  How many steps the whole how-to has. Sets the number of index tabs down the left edge and the 'of N' in the step line. Tab height divides the fixed column, so seven tabs are thinner than three rather than taller — the spine never changes length.

  now: 5

• Step label

  stepLabel · string

  The word before the number. 'Step' for a how-to, but 'Part', 'Tip', 'Day' or 'Round' all read naturally in this slot and retarget the component to a different series without touching anything else.

  now: Step

• Kicker

  kicker · string

  Running head at the top of the page — the name of the how-to, not of the step. Set in sentence case beside a small accent dot, with a hairline drawing under it. Omit it and the top of the frame stays bare paper.

  now: Sourdough, from scratch

• Detail

  detail · string

  The quiet second line under the instruction: the caveat, the tell, the thing that makes the step work. One or two sentences. Omit it when the instruction is self-evident.

  now: Wet your hands first. Give the bowl a quarter turn betwee…

• Crease

  crease · boolean

  Run a soft fold down the gutter between the tab spine and the text, so the frame reads as a page rather than a slide. Switch it off for a flatter, more modern sheet.

  now: true

• Brand

  brand · string

  Brand token id — one of the keys of BRANDS. Written for `field`, whose warm off-white and olive are the whole point; `paper` and `press` also work. The dark palettes invert legibly but lose the reason this component exists.

  now: field