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.
Character
Character profiles for worldbuilding and storytelling. Headings within the rune are automatically converted into named sections, and the first image becomes the character portrait.
Basic usage
Headings become character sections, and the first image (if any) is extracted as a portrait.
{% character name="Veshra" role="antagonist" status="alive" aliases="The Bone Witch" tags="magic-user" %}
## Backstory
Raised in the shadow of the Ashen Spire, Veshra discovered her gift for necromancy at a young age.
## Abilities
- Bone conjuration
- Spirit binding
- Plague whisper
{% /character %}<article data-field="content-section" data-rune="character" typeof="Person" data-rune-fields="{"role":"antagonist","status":"alive","aliases":"The Bone Witch","tags":"magic-user"}">
<meta content="antagonist" property="jobTitle">
<span data-name="name" property="name">Veshra</span>
<div data-name="sections">
<div data-field="section" data-rune="character-section">
<span data-name="name">Backstory</span>
<div data-name="body">
<p>Raised in the shadow of the Ashen Spire, Veshra discovered her gift for necromancy at a young age.</p>
</div>
</div>
<div data-field="section" data-rune="character-section">
<span data-name="name">Abilities</span>
<div data-name="body">
<ul>
<li>Bone conjuration</li>
<li>Spirit binding</li>
<li>Plague whisper</li>
</ul>
</div>
</div>
</div>
</article>Backstory
Raised in the shadow of the Ashen Spire, Veshra discovered her gift for necromancy at a young age.
Abilities
- Bone conjuration
- Spirit binding
- Plague whisper
<article data-field="content-section" typeof="Person" class="rf-character rf-character--antagonist rf-character--alive rf-character--The Bone Witch rf-character--magic-user" data-role="antagonist" data-status="alive" data-aliases="The Bone Witch" data-tags="magic-user" data-elevation="flat" data-rune="character" data-density="full">
<div data-name="content" class="rf-character__content">
<header data-name="preamble" class="rf-character__preamble" data-section="preamble">
<span data-name="name" property="name" class="rf-character__name" data-section="title">Veshra</span>
</header>
<dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-character__metadata">
<div data-name="row" data-field="role" class="rf-character__row">
<dt data-meta-label="">Role</dt>
<dd>
<span class="rf-badge" data-meta-type="category">antagonist</span>
</dd>
</div>
<div data-name="row" data-field="status" class="rf-character__row">
<dt data-meta-label="">Status</dt>
<dd>
<span class="rf-badge" data-meta-type="status" data-meta-sentiment="positive">alive</span>
</dd>
</div>
</dl>
<div data-name="sections" class="rf-character__sections">
<div data-field="section" class="rf-character-section" data-rune="character-section" data-density="full">
<span data-name="name" class="rf-character-section__name">Backstory</span>
<div data-name="body" class="rf-character-section__body" data-section="body">
<p>Raised in the shadow of the Ashen Spire, Veshra discovered her gift for necromancy at a young age.</p>
</div>
</div>
<div data-field="section" class="rf-character-section" data-rune="character-section" data-density="full">
<span data-name="name" class="rf-character-section__name">Abilities</span>
<div data-name="body" class="rf-character-section__body" data-section="body">
<ul>
<li>Bone conjuration</li>
<li>Spirit binding</li>
<li>Plague whisper</li>
</ul>
</div>
</div>
</div>
</div>
<meta content="antagonist" property="jobTitle" />
</article>Roles
The role attribute controls visual styling to distinguish character importance.
{% character name="Elena" role="protagonist" status="alive" %}
## Background
The hero of the story — a wandering scholar searching for lost texts.
{% /character %}<article data-field="content-section" data-rune="character" typeof="Person" data-rune-fields="{"role":"protagonist","status":"alive","aliases":"","tags":""}">
<meta content="protagonist" property="jobTitle">
<span data-name="name" property="name">Elena</span>
<div data-name="sections">
<div data-field="section" data-rune="character-section">
<span data-name="name">Background</span>
<div data-name="body">
<p>The hero of the story — a wandering scholar searching for lost texts.</p>
</div>
</div>
</div>
</article>Background
The hero of the story — a wandering scholar searching for lost texts.
<article data-field="content-section" typeof="Person" class="rf-character rf-character--protagonist rf-character--alive" data-role="protagonist" data-status="alive" data-aliases="" data-tags="" data-elevation="flat" data-rune="character" data-density="full">
<div data-name="content" class="rf-character__content">
<header data-name="preamble" class="rf-character__preamble" data-section="preamble">
<span data-name="name" property="name" class="rf-character__name" data-section="title">Elena</span>
</header>
<dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-character__metadata">
<div data-name="row" data-field="role" class="rf-character__row">
<dt data-meta-label="">Role</dt>
<dd>
<span class="rf-badge" data-meta-type="category">protagonist</span>
</dd>
</div>
<div data-name="row" data-field="status" class="rf-character__row">
<dt data-meta-label="">Status</dt>
<dd>
<span class="rf-badge" data-meta-type="status" data-meta-sentiment="positive">alive</span>
</dd>
</div>
</dl>
<div data-name="sections" class="rf-character__sections">
<div data-field="section" class="rf-character-section" data-rune="character-section" data-density="full">
<span data-name="name" class="rf-character-section__name">Background</span>
<div data-name="body" class="rf-character-section__body" data-section="body">
<p>The hero of the story — a wandering scholar searching for lost texts.</p>
</div>
</div>
</div>
</div>
<meta content="protagonist" property="jobTitle" />
</article>Status tracking
Track whether a character is alive, dead, unknown, or missing.
{% character name="Lord Ashford" role="supporting" status="dead" %}
## Legacy
Once the warden of the Eastern March, Lord Ashford fell during the Siege of Thornwall.
{% /character %}<article data-field="content-section" data-rune="character" typeof="Person" data-rune-fields="{"role":"supporting","status":"dead","aliases":"","tags":""}">
<meta content="supporting" property="jobTitle">
<span data-name="name" property="name">Lord Ashford</span>
<div data-name="sections">
<div data-field="section" data-rune="character-section">
<span data-name="name">Legacy</span>
<div data-name="body">
<p>Once the warden of the Eastern March, Lord Ashford fell during the Siege of Thornwall.</p>
</div>
</div>
</div>
</article>Legacy
Once the warden of the Eastern March, Lord Ashford fell during the Siege of Thornwall.
<article data-field="content-section" typeof="Person" class="rf-character rf-character--supporting rf-character--dead" data-role="supporting" data-status="dead" data-aliases="" data-tags="" data-elevation="flat" data-rune="character" data-density="full">
<div data-name="content" class="rf-character__content">
<header data-name="preamble" class="rf-character__preamble" data-section="preamble">
<span data-name="name" property="name" class="rf-character__name" data-section="title">Lord Ashford</span>
</header>
<dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-character__metadata">
<div data-name="row" data-field="role" class="rf-character__row">
<dt data-meta-label="">Role</dt>
<dd>
<span class="rf-badge" data-meta-type="category">supporting</span>
</dd>
</div>
<div data-name="row" data-field="status" class="rf-character__row">
<dt data-meta-label="">Status</dt>
<dd>
<span class="rf-badge" data-meta-type="status" data-meta-sentiment="negative">dead</span>
</dd>
</div>
</dl>
<div data-name="sections" class="rf-character__sections">
<div data-field="section" class="rf-character-section" data-rune="character-section" data-density="full">
<span data-name="name" class="rf-character-section__name">Legacy</span>
<div data-name="body" class="rf-character-section__body" data-section="body">
<p>Once the warden of the Eastern March, Lord Ashford fell during the Siege of Thornwall.</p>
</div>
</div>
</div>
</div>
<meta content="supporting" property="jobTitle" />
</article>Attributes
character
| Attribute | Type | Required | Description |
|---|---|---|---|
name | string | ✓ | Display name shown in the character header. |
role | "protagonist" | "antagonist" | "supporting" | "minor" | — | Narrative importance: protagonist, antagonist, supporting, or minor. |
status | "alive" | "dead" | "unknown" | "missing" | — | Whether the character is alive, dead, unknown, or missing. |
aliases | string | — | Comma-separated alternate names or titles for this character. |
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) |
dropcap
Per-instance drop-cap opt-in (SPEC-108).
| Attribute | Type | Required | Description |
|---|---|---|---|
dropcap | boolean | — | Style the opening letter of a prose body as a drop cap (SPEC-108). Honoured only when the body reads as prose; ignored otherwise. |
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 |
frame
Surface chrome (SPEC-086): a named preset from the theme registry with inline `frame-*` overrides layered on top.
| Attribute | Type | Required | Description |
|---|---|---|---|
frame | string | — | Named frame preset presenting this block's media surface |
frame-anchor | string | — | Crop focal point when the guest is cut (object-position) |
frame-aspect | string | — | Aspect ratio of the framed media, e.g. "16/9" |
frame-displace | "top" | "bottom" | "end" | "bottom-end" | "top-end" | — | Edge/corner the framed guest moves toward |
frame-displace-mode | "peek" | "bleed" | — | How displacement renders: `peek` (default) translates the guest visually inside its frame target; `bleed` uses negative margin on the media zone so following layout pulls up — extends past a section like a hero without leaving a gap above |
frame-offset | "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | — | Displacement distance (non-linear named scale: sm…xl ride the block-spacing tokens, 2xl/3xl/4xl step up to section-spacing for bleed-mode displacements that clear a section edge) |
frame-overflow | "clip" | "bleed" | — | How the frame handles a guest whose content is wider than it: `clip` (default) keeps it inside the rounded frame; `bleed` runs an overflowing guest out to the layout edge on a narrow viewport so it reads as cropped by the screen (a bleed host only — hero/feature) |
frame-oversize | string | — | How far the guest exceeds its slot (scale factor) |
frame-place | string | — | Guest-box alignment in the slot (e.g. "left top") |
frame-shadow | "none" | "sm" | "md" | "lg" | — | Silhouette drop-shadow strength for the framed media |
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) |
reading
Editorial register for body text (SPEC-108). The author picks the register; the theme owns the magnitude.
| Attribute | Type | Required | Description |
|---|---|---|---|
reading | "fine" | "ui" | "prose" | — | Reading register for this block’s body (SPEC-108): fine | ui | prose. The theme owns the editorial treatment. |
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 |
character-section
| Attribute | Type | Required | Description |
|---|---|---|---|
name | 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) |
dropcap
Per-instance drop-cap opt-in (SPEC-108).
| Attribute | Type | Required | Description |
|---|---|---|---|
dropcap | boolean | — | Style the opening letter of a prose body as a drop cap (SPEC-108). Honoured only when the body reads as prose; ignored otherwise. |
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) |
reading
Editorial register for body text (SPEC-108). The author picks the register; the theme owns the magnitude.
| Attribute | Type | Required | Description |
|---|---|---|---|
reading | "fine" | "ui" | "prose" | — | Reading register for this block’s body (SPEC-108): fine | ui | prose. The theme owns the editorial treatment. |
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 |
|---|---|
| frame | this rune declares neither a `frameTarget` nor a media section |
| prominence | this rune has no page-section header |