note
This rune is part of @refrakt-md/storytelling. Install with npm install @refrakt-md/storytelling and add "@refrakt-md/storytelling" to the plugins array in your refrakt.config.json.
Plot
Story arcs, quests, and narrative structures with progress tracking. List items are parsed as beats with status markers — use checkbox syntax to track progress through a storyline.
Basic usage
List items with checkbox markers become plot beats. Use [x] for complete, [>] for active, [ ] for planned, and [-] for abandoned.
{% plot title="The Quest for the Crown" type="quest" structure="linear" %}
The heroes must recover the lost crown before the solstice.
- [x] **Discovery** — Find the ancient map in the library
- [x] **Departure** — Leave the city under cover of darkness
- [>] **Trial** — Cross the Whispering Wastes
- [ ] **Confrontation** — Face the guardian of the vault
- [-] **Return** — Bring the crown back to the capital
{% /plot %}<section data-field="content-section" data-rune="plot" typeof="CreativeWork" data-rune-fields="{"plotType":"quest","structure":"linear","tags":""}">
<span data-name="title" property="name">The Quest for the Crown</span>
<meta content="quest" property="genre">
<p>The heroes must recover the lost crown before the solstice.</p>
<ol data-name="beats">
<li data-field="beat" data-rune="beat" data-rune-fields="{"status":"complete","id":"","track":"","follows":""}">
<span data-name="label">Discovery</span>
<div data-name="body">
<p>Find the ancient map in the library</p>
</div>
</li>
<li data-field="beat" data-rune="beat" data-rune-fields="{"status":"complete","id":"","track":"","follows":""}">
<span data-name="label">Departure</span>
<div data-name="body">
<p>Leave the city under cover of darkness</p>
</div>
</li>
<li data-field="beat" data-rune="beat" data-rune-fields="{"status":"active","id":"","track":"","follows":""}">
<span data-name="label">Trial</span>
<div data-name="body">
<p>Cross the Whispering Wastes</p>
</div>
</li>
<li data-field="beat" data-rune="beat" data-rune-fields="{"status":"planned","id":"","track":"","follows":""}">
<span data-name="label">Confrontation</span>
<div data-name="body">
<p>Face the guardian of the vault</p>
</div>
</li>
<li data-field="beat" data-rune="beat" data-rune-fields="{"status":"abandoned","id":"","track":"","follows":""}">
<span data-name="label">Return</span>
<div data-name="body">
<p>Bring the crown back to the capital</p>
</div>
</li>
</ol>
</section>questlinear
The Quest for the CrownThe heroes must recover the lost crown before the solstice.
- Discovery
Find the ancient map in the library
- Departure
Leave the city under cover of darkness
- Trial
Cross the Whispering Wastes
- Confrontation
Face the guardian of the vault
- Return
Bring the crown back to the capital
<section data-field="content-section" typeof="CreativeWork" class="rf-plot rf-plot--quest rf-plot--linear" data-plot-type="quest" data-structure="linear" data-tags="" data-elevation="flat" data-rune="plot" data-density="full">
<div data-name="eyebrow" data-zone="eyebrow" data-zone-layout="bar" class="rf-plot__eyebrow">
<span class="rf-badge" data-meta-type="category">quest</span>
<span class="rf-badge" data-meta-type="category" data-align="end">linear</span>
</div>
<span data-name="title" property="name" class="rf-plot__title" data-section="title">The Quest for the Crown</span>
<meta content="quest" property="genre" />
<p>The heroes must recover the lost crown before the solstice.</p>
<ol data-name="beats" class="rf-plot__beats" data-sequence="connected">
<li data-field="beat" class="rf-beat rf-beat--complete" data-status="complete" data-id="" data-track="" data-follows="" data-checked="checked" data-rune="beat" data-density="full">
<span data-name="label" class="rf-beat__label">Discovery</span>
<div data-name="body" class="rf-beat__body">
<p>Find the ancient map in the library</p>
</div>
</li>
<li data-field="beat" class="rf-beat rf-beat--complete" data-status="complete" data-id="" data-track="" data-follows="" data-checked="checked" data-rune="beat" data-density="full">
<span data-name="label" class="rf-beat__label">Departure</span>
<div data-name="body" class="rf-beat__body">
<p>Leave the city under cover of darkness</p>
</div>
</li>
<li data-field="beat" class="rf-beat rf-beat--active" data-status="active" data-id="" data-track="" data-follows="" data-checked="active" data-rune="beat" data-density="full">
<span data-name="label" class="rf-beat__label">Trial</span>
<div data-name="body" class="rf-beat__body">
<p>Cross the Whispering Wastes</p>
</div>
</li>
<li data-field="beat" class="rf-beat rf-beat--planned" data-status="planned" data-id="" data-track="" data-follows="" data-checked="unchecked" data-rune="beat" data-density="full">
<span data-name="label" class="rf-beat__label">Confrontation</span>
<div data-name="body" class="rf-beat__body">
<p>Face the guardian of the vault</p>
</div>
</li>
<li data-field="beat" class="rf-beat rf-beat--abandoned" data-status="abandoned" data-id="" data-track="" data-follows="" data-checked="skipped" data-rune="beat" data-density="full">
<span data-name="label" class="rf-beat__label">Return</span>
<div data-name="body" class="rf-beat__body">
<p>Bring the crown back to the capital</p>
</div>
</li>
</ol>
</section>Plot types
Different narrative structures for various storytelling needs.
{% plot title="The Shadow War" type="campaign" structure="branching" %}
A long-running conflict with multiple factions vying for control.
- [x] **Opening moves** — The assassination of the ambassador
- [>] **Escalation** — Border skirmishes erupt across the north
- [ ] **Alliance** — Unite the free cities against the common threat
- [ ] **Final battle** — Storm the Dark Citadel
{% /plot %}<section data-field="content-section" data-rune="plot" typeof="CreativeWork" data-rune-fields="{"plotType":"campaign","structure":"branching","tags":""}">
<span data-name="title" property="name">The Shadow War</span>
<meta content="campaign" property="genre">
<p>A long-running conflict with multiple factions vying for control.</p>
<ol data-name="beats">
<li data-field="beat" data-rune="beat" data-rune-fields="{"status":"complete","id":"","track":"","follows":""}">
<span data-name="label">Opening moves</span>
<div data-name="body">
<p>The assassination of the ambassador</p>
</div>
</li>
<li data-field="beat" data-rune="beat" data-rune-fields="{"status":"active","id":"","track":"","follows":""}">
<span data-name="label">Escalation</span>
<div data-name="body">
<p>Border skirmishes erupt across the north</p>
</div>
</li>
<li data-field="beat" data-rune="beat" data-rune-fields="{"status":"planned","id":"","track":"","follows":""}">
<span data-name="label">Alliance</span>
<div data-name="body">
<p>Unite the free cities against the common threat</p>
</div>
</li>
<li data-field="beat" data-rune="beat" data-rune-fields="{"status":"planned","id":"","track":"","follows":""}">
<span data-name="label">Final battle</span>
<div data-name="body">
<p>Storm the Dark Citadel</p>
</div>
</li>
</ol>
</section>campaignbranching
The Shadow WarA long-running conflict with multiple factions vying for control.
- Opening moves
The assassination of the ambassador
- Escalation
Border skirmishes erupt across the north
- Alliance
Unite the free cities against the common threat
- Final battle
Storm the Dark Citadel
<section data-field="content-section" typeof="CreativeWork" class="rf-plot rf-plot--campaign rf-plot--branching" data-plot-type="campaign" data-structure="branching" data-tags="" data-elevation="flat" data-rune="plot" data-density="full">
<div data-name="eyebrow" data-zone="eyebrow" data-zone-layout="bar" class="rf-plot__eyebrow">
<span class="rf-badge" data-meta-type="category">campaign</span>
<span class="rf-badge" data-meta-type="category" data-align="end">branching</span>
</div>
<span data-name="title" property="name" class="rf-plot__title" data-section="title">The Shadow War</span>
<meta content="campaign" property="genre" />
<p>A long-running conflict with multiple factions vying for control.</p>
<ol data-name="beats" class="rf-plot__beats">
<li data-field="beat" class="rf-beat rf-beat--complete" data-status="complete" data-id="" data-track="" data-follows="" data-checked="checked" data-rune="beat" data-density="full">
<span data-name="label" class="rf-beat__label">Opening moves</span>
<div data-name="body" class="rf-beat__body">
<p>The assassination of the ambassador</p>
</div>
</li>
<li data-field="beat" class="rf-beat rf-beat--active" data-status="active" data-id="" data-track="" data-follows="" data-checked="active" data-rune="beat" data-density="full">
<span data-name="label" class="rf-beat__label">Escalation</span>
<div data-name="body" class="rf-beat__body">
<p>Border skirmishes erupt across the north</p>
</div>
</li>
<li data-field="beat" class="rf-beat rf-beat--planned" data-status="planned" data-id="" data-track="" data-follows="" data-checked="unchecked" data-rune="beat" data-density="full">
<span data-name="label" class="rf-beat__label">Alliance</span>
<div data-name="body" class="rf-beat__body">
<p>Unite the free cities against the common threat</p>
</div>
</li>
<li data-field="beat" class="rf-beat rf-beat--planned" data-status="planned" data-id="" data-track="" data-follows="" data-checked="unchecked" data-rune="beat" data-density="full">
<span data-name="label" class="rf-beat__label">Final battle</span>
<div data-name="body" class="rf-beat__body">
<p>Storm the Dark Citadel</p>
</div>
</li>
</ol>
</section>Attributes
plot
| Attribute | Type | Required | Description |
|---|---|---|---|
title | string | ✓ | Heading displayed for this plot line. |
type | "arc" | "quest" | "subplot" | "campaign" | "episode" | "act" | "chapter" | — | Narrative scope: arc, quest, subplot, campaign, episode, act, or chapter. |
structure | "linear" | "parallel" | "branching" | "web" | — | How beats connect: linear (sequential), parallel, branching, or web. |
Inherited from the storytelling taxonomy preset
| Attribute | Type | Required | Description |
|---|---|---|---|
tags | string | — | Comma-separated keywords for filtering and cross-referencing. |
Universal attributes
bg
The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.
| Attribute | Type | Required | Description |
|---|---|---|---|
bg | string | — | Background preset applied to this block |
bg-from | string | — | Gradient start colour — a semantic token name (→ var(--rf-color-*)) |
bg-gradient | "to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl" | — | Gradient direction (bounded named set) |
bg-gradient-type | "linear" | "radial" | "conic" | — | Gradient type |
bg-to | string | — | Gradient end colour — a semantic token name |
bg-via | string | — | Optional middle gradient stop — a semantic token name |
scrim | "top" | "bottom" | "left" | "right" | "none" | — | Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim |
scrim-blur | "none" | "sm" | "md" | "lg" | — | Frost scrim blur amount |
scrim-strength | "sm" | "md" | "lg" | — | Gradient scrim strength |
scrim-tone | "dark" | "light" | — | Whether the scrim darkens (for light text) or lightens (for dark text) |
scrim-type | "gradient" | "frost" | — | Scrim treatment: gradient (default) or frost (backdrop blur) |
elevation
The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.
| Attribute | Type | Required | Description |
|---|---|---|---|
elevation | "sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg" | — | Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases |
inset
Internal padding override.
| Attribute | Type | Required | Description |
|---|---|---|---|
inset | "flush" | "tight" | "default" | "loose" | "breathe" | — | Inner padding of this block |
motion
Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.
| Attribute | Type | Required | Description |
|---|---|---|---|
reveal | "none" | "fade" | "slide" | "scale" | "blur" | — | Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography |
stagger | boolean | — | Cascade this block's items in as it reveals (no-op on single-child runes) |
prominence
Header emphasis (SPEC-107). Scales a rune's page-section header; the skin maps it to a type register by attribute, so there is no BEM class.
| Attribute | Type | Required | Description |
|---|---|---|---|
prominence | "quiet" | "normal" | "prominent" | "display" | — | Section-header emphasis (only on page-section-header family runes) |
spacing
Block-level rhythm override.
| Attribute | Type | Required | Description |
|---|---|---|---|
spacing | "flush" | "tight" | "default" | "loose" | "breathe" | — | Vertical spacing above and below this block |
substrate
Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.
| Attribute | Type | Required | Description |
|---|---|---|---|
substrate | "dots" | "grid" | "lines" | "cross" | "checker" | "none" | — | Generated surface pattern |
substrate-fill | "inherit" | "inset" | — | Surface fill the pattern sits on (full colour stays with tint) |
substrate-opacity | "sm" | "md" | "lg" | — | Pattern ink strength |
substrate-size | "sm" | "md" | "lg" | — | Pattern cell size |
substrate-target | "self" | "media" | — | Which surface the pattern fills (overrides the rune/theme default) |
tint
Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.
| Attribute | Type | Required | Description |
|---|---|---|---|
tint | string | — | Color tint preset applied to this block |
tint-mode | "auto" | "dark" | "light" | — | Whether the tint adapts to auto, dark, or light mode |
width
The track a block rune occupies.
| Attribute | Type | Required | Description |
|---|---|---|---|
width | "compact" | "narrow" | "content" | "wide" | "full" | — | Maximum width constraint for this block |
| Not available | Why |
|---|---|
| dropcap, reading | this rune declares no prose body |
| frame | this rune declares neither a `frameTarget` nor a media section |
beat
| Attribute | Type | Required | Description |
|---|---|---|---|
label | string | ✓ | |
status | string | — | |
description | string | — | |
id | string | — | |
track | string | — | |
follows | string | — |
Universal attributes
bg
The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.
| Attribute | Type | Required | Description |
|---|---|---|---|
bg | string | — | Background preset applied to this block |
bg-from | string | — | Gradient start colour — a semantic token name (→ var(--rf-color-*)) |
bg-gradient | "to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl" | — | Gradient direction (bounded named set) |
bg-gradient-type | "linear" | "radial" | "conic" | — | Gradient type |
bg-to | string | — | Gradient end colour — a semantic token name |
bg-via | string | — | Optional middle gradient stop — a semantic token name |
scrim | "top" | "bottom" | "left" | "right" | "none" | — | Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim |
scrim-blur | "none" | "sm" | "md" | "lg" | — | Frost scrim blur amount |
scrim-strength | "sm" | "md" | "lg" | — | Gradient scrim strength |
scrim-tone | "dark" | "light" | — | Whether the scrim darkens (for light text) or lightens (for dark text) |
scrim-type | "gradient" | "frost" | — | Scrim treatment: gradient (default) or frost (backdrop blur) |
elevation
The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.
| Attribute | Type | Required | Description |
|---|---|---|---|
elevation | "sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg" | — | Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases |
inset
Internal padding override.
| Attribute | Type | Required | Description |
|---|---|---|---|
inset | "flush" | "tight" | "default" | "loose" | "breathe" | — | Inner padding of this block |
motion
Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.
| Attribute | Type | Required | Description |
|---|---|---|---|
reveal | "none" | "fade" | "slide" | "scale" | "blur" | — | Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography |
stagger | boolean | — | Cascade this block's items in as it reveals (no-op on single-child runes) |
spacing
Block-level rhythm override.
| Attribute | Type | Required | Description |
|---|---|---|---|
spacing | "flush" | "tight" | "default" | "loose" | "breathe" | — | Vertical spacing above and below this block |
substrate
Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.
| Attribute | Type | Required | Description |
|---|---|---|---|
substrate | "dots" | "grid" | "lines" | "cross" | "checker" | "none" | — | Generated surface pattern |
substrate-fill | "inherit" | "inset" | — | Surface fill the pattern sits on (full colour stays with tint) |
substrate-opacity | "sm" | "md" | "lg" | — | Pattern ink strength |
substrate-size | "sm" | "md" | "lg" | — | Pattern cell size |
substrate-target | "self" | "media" | — | Which surface the pattern fills (overrides the rune/theme default) |
tint
Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.
| Attribute | Type | Required | Description |
|---|---|---|---|
tint | string | — | Color tint preset applied to this block |
tint-mode | "auto" | "dark" | "light" | — | Whether the tint adapts to auto, dark, or light mode |
width
The track a block rune occupies.
| Attribute | Type | Required | Description |
|---|---|---|---|
width | "compact" | "narrow" | "content" | "wide" | "full" | — | Maximum width constraint for this block |
| Not available | Why |
|---|---|
| dropcap, reading | this rune declares no prose body |
| frame | this rune declares neither a `frameTarget` nor a media section |
| prominence | this rune has no page-section header |
Beat markers
| Marker | Status | Description |
|---|---|---|
[x] | Complete | This beat has been resolved |
[>] | Active | Currently in progress |
[ ] | Planned | Not yet started |
[-] | Abandoned | Dropped from the storyline |