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.
Bond
Relationships and connections between characters or entities. Content within the rune describes the nature and history of the relationship.
Basic usage
Define a relationship between two entities with a type and status.
{% bond from="Aragorn" to="Legolas" type="fellowship" status="active" %}
Forged during the Council of Elrond, their bond was tested through the War of the Ring. Despite their different backgrounds, they developed a deep mutual respect.
{% /bond %}<div data-rune="bond" data-rune-fields="{"bondType":"fellowship","status":"active","bidirectional":"true"}">
<span data-name="from">Aragorn</span>
<div data-name="connector">
<span data-name="arrow"></span>
</div>
<span data-name="to">Legolas</span>
<div data-name="body">
<p>Forged during the Council of Elrond, their bond was tested through the War of the Ring. Despite their different backgrounds, they developed a deep mutual respect.</p>
</div>
</div>Forged during the Council of Elrond, their bond was tested through the War of the Ring. Despite their different backgrounds, they developed a deep mutual respect.
<div class="rf-bond rf-bond--fellowship rf-bond--active rf-bond--true" data-bond-type="fellowship" data-status="active" data-bidirectional="true" data-elevation="flat" data-rune="bond" data-density="full">
<span data-name="from" class="rf-bond__from">Aragorn</span>
<div data-name="connector" class="rf-bond__connector">
<span data-name="arrow" class="rf-bond__arrow"></span>
</div>
<span data-name="to" class="rf-bond__to">Legolas</span>
<div data-name="body" class="rf-bond__body" data-section="body">
<p>Forged during the Council of Elrond, their bond was tested through the War of the Ring. Despite their different backgrounds, they developed a deep mutual respect.</p>
</div>
</div>One-directional bonds
Set bidirectional to false for one-way relationships like mentorship or unrequited feelings.
{% bond from="Gandalf" to="Frodo" type="mentorship" status="active" bidirectional=false %}
Gandalf chose Frodo as the ring-bearer, guiding him with wisdom and trust throughout the quest.
{% /bond %}<div data-rune="bond" data-rune-fields="{"bondType":"mentorship","status":"active","bidirectional":"false"}">
<span data-name="from">Gandalf</span>
<div data-name="connector">
<span data-name="arrow"></span>
</div>
<span data-name="to">Frodo</span>
<div data-name="body">
<p>Gandalf chose Frodo as the ring-bearer, guiding him with wisdom and trust throughout the quest.</p>
</div>
</div>Gandalf chose Frodo as the ring-bearer, guiding him with wisdom and trust throughout the quest.
<div class="rf-bond rf-bond--mentorship rf-bond--active rf-bond--false" data-bond-type="mentorship" data-status="active" data-bidirectional="false" data-elevation="flat" data-rune="bond" data-density="full">
<span data-name="from" class="rf-bond__from">Gandalf</span>
<div data-name="connector" class="rf-bond__connector">
<span data-name="arrow" class="rf-bond__arrow"></span>
</div>
<span data-name="to" class="rf-bond__to">Frodo</span>
<div data-name="body" class="rf-bond__body" data-section="body">
<p>Gandalf chose Frodo as the ring-bearer, guiding him with wisdom and trust throughout the quest.</p>
</div>
</div>In the relationship graph
Every bond is also an edge in the site's relationship graph, with its type as the edge kind (bond when it has none). relationships lists it on both characters' pages, or only on the from side when bidirectional is false. from and to may name a character by any of its aliases. A bond whose from or to names no character, realm, faction, lore or plot is reported as a build warning and left out of the graph.
Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
from | string | ✓ | Name of the first character or entity in this bond. |
to | string | ✓ | Name of the second character or entity in this bond. |
type | string | — | Kind of relationship (e.g. ally, rival, mentor, sibling). |
status | string | — | Current state of the bond (e.g. active, broken, strained). |
bidirectional | boolean | — | Enable/disable mutual connection between both entities. |
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 |