A section divider where the rule runs off the frame edge, the index counts into place and the title masks up
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
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.
Chapter number. Rendered zero-padded ('3' becomes '03') and counted into place.
now: 3
Section title. Two to five words holds the line; longer titles wrap and drop a size.
now: The Grammar of Time
How many chapters there are, shown as a small 'of 07' under the index. Omit if the run length is unknown.
now: 7
Small uppercase mono label above the rule, e.g. 'Chapter', 'Part', 'Section'. Omit for a barer card.
now: Chapter
One supporting sentence under the title. Keep it to a single line of thought. This is a divider, not a slide.
now: Two beautiful scenes back to back still look wrong if the…
Show tick marks for the whole run at the right end of the rule. Needs `total`, and is skipped above 12 chapters.
now: true
Brand token id, one of the keys of BRANDS.
now: slate
No Tailwind, no CSS, no asset files. Inline styles only.
A full-frame chapter divider, left-weighted and editorial: a big mono index number in the accent colour that counts into place, a hairline rule that draws across and runs off the right edge of the frame, and the section title masking up beside the number in the display face. Small 'of 07' underneath.