refrakt.md

Docs

Runes

Themes

Extend

Project

Storytelling›Storyboard
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.

Storyboard

Comic/storyboard layout. Images become panels, following paragraphs become captions.

Basic usage

Each image starts a new panel. Text after the image becomes that panel's caption.

{% storyboard columns=3 %}
![Dawn](https://picsum.photos/seed/dawn/600/400)

The journey begins at first light.

![Forest](https://picsum.photos/seed/forest/600/400)

An unexpected path through the trees.

![Summit](https://picsum.photos/seed/summit/600/400)

The view from the top changes everything.
{% /storyboard %}
<div data-rune="storyboard" data-rune-fields="{&quot;variant&quot;:&quot;clean&quot;,&quot;columns&quot;:&quot;3&quot;}">
  <div data-name="panels">
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/dawn/600/400" alt="Dawn" data-name="image">
        </p>
        <p>The journey begins at first light.</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/forest/600/400" alt="Forest" data-name="image">
        </p>
        <p>An unexpected path through the trees.</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/summit/600/400" alt="Summit" data-name="image">
        </p>
        <p>The view from the top changes everything.</p>
      </div>
    </div>
  </div>
</div>

Dawn

The journey begins at first light.

Forest

An unexpected path through the trees.

Summit

The view from the top changes everything.

<div class="rf-storyboard rf-storyboard--clean rf-storyboard--3" data-variant="clean" data-columns="3" data-elevation="flush" data-rune="storyboard" data-density="full" style="--sb-columns: 3">
  <div data-name="panels" class="rf-storyboard__panels">
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/dawn/600/400" alt="Dawn" data-name="image" class="rf-storyboard-panel__image" data-media="cover" />
        </p>
        <p>The journey begins at first light.</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/forest/600/400" alt="Forest" data-name="image" class="rf-storyboard-panel__image" data-media="cover" />
        </p>
        <p>An unexpected path through the trees.</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/summit/600/400" alt="Summit" data-name="image" class="rf-storyboard-panel__image" data-media="cover" />
        </p>
        <p>The view from the top changes everything.</p>
      </div>
    </div>
  </div>
</div>

Comic style

Thick borders and slightly tilted panels give a comic book feel.

{% storyboard columns=3 variant="comic" %}
![Hero](https://picsum.photos/seed/hero/600/400)

Our hero sets out on an adventure.

![Challenge](https://picsum.photos/seed/storm/600/400)

A storm blocks the way forward!

![Victory](https://picsum.photos/seed/sunset/600/400)

Against all odds, a new dawn rises.
{% /storyboard %}
<div data-rune="storyboard" data-rune-fields="{&quot;variant&quot;:&quot;comic&quot;,&quot;columns&quot;:&quot;3&quot;}">
  <div data-name="panels">
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/hero/600/400" alt="Hero" data-name="image">
        </p>
        <p>Our hero sets out on an adventure.</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/storm/600/400" alt="Challenge" data-name="image">
        </p>
        <p>A storm blocks the way forward!</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/sunset/600/400" alt="Victory" data-name="image">
        </p>
        <p>Against all odds, a new dawn rises.</p>
      </div>
    </div>
  </div>
</div>

Hero

Our hero sets out on an adventure.

Challenge

A storm blocks the way forward!

Victory

Against all odds, a new dawn rises.

<div class="rf-storyboard rf-storyboard--comic rf-storyboard--3" data-variant="comic" data-columns="3" data-elevation="flush" data-rune="storyboard" data-density="full" style="--sb-columns: 3">
  <div data-name="panels" class="rf-storyboard__panels">
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/hero/600/400" alt="Hero" data-name="image" class="rf-storyboard-panel__image" data-media="cover" />
        </p>
        <p>Our hero sets out on an adventure.</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/storm/600/400" alt="Challenge" data-name="image" class="rf-storyboard-panel__image" data-media="cover" />
        </p>
        <p>A storm blocks the way forward!</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/sunset/600/400" alt="Victory" data-name="image" class="rf-storyboard-panel__image" data-media="cover" />
        </p>
        <p>Against all odds, a new dawn rises.</p>
      </div>
    </div>
  </div>
</div>

Polaroid style

White-framed panels with drop shadows, like pinned photos.

{% storyboard columns=2 variant="polaroid" %}
![Coast](https://picsum.photos/seed/coast/600/400)

Summer by the sea

![Mountains](https://picsum.photos/seed/alpine/600/400)

Autumn in the mountains

![City](https://picsum.photos/seed/city/600/400)

Winter in the city

![Garden](https://picsum.photos/seed/garden/600/400)

Spring blooms again
{% /storyboard %}
<div data-rune="storyboard" data-rune-fields="{&quot;variant&quot;:&quot;polaroid&quot;,&quot;columns&quot;:&quot;2&quot;}">
  <div data-name="panels">
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/coast/600/400" alt="Coast" data-name="image">
        </p>
        <p>Summer by the sea</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/alpine/600/400" alt="Mountains" data-name="image">
        </p>
        <p>Autumn in the mountains</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/city/600/400" alt="City" data-name="image">
        </p>
        <p>Winter in the city</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/garden/600/400" alt="Garden" data-name="image">
        </p>
        <p>Spring blooms again</p>
      </div>
    </div>
  </div>
</div>

Coast

Summer by the sea

Mountains

Autumn in the mountains

City

Winter in the city

Garden

Spring blooms again

<div class="rf-storyboard rf-storyboard--polaroid rf-storyboard--2" data-variant="polaroid" data-columns="2" data-elevation="flush" data-rune="storyboard" data-density="full" style="--sb-columns: 2">
  <div data-name="panels" class="rf-storyboard__panels">
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/coast/600/400" alt="Coast" data-name="image" class="rf-storyboard-panel__image" data-media="cover" />
        </p>
        <p>Summer by the sea</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/alpine/600/400" alt="Mountains" data-name="image" class="rf-storyboard-panel__image" data-media="cover" />
        </p>
        <p>Autumn in the mountains</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/city/600/400" alt="City" data-name="image" class="rf-storyboard-panel__image" data-media="cover" />
        </p>
        <p>Winter in the city</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/garden/600/400" alt="Garden" data-name="image" class="rf-storyboard-panel__image" data-media="cover" />
        </p>
        <p>Spring blooms again</p>
      </div>
    </div>
  </div>
</div>

Attributes

AttributeTypeRequiredDescription
columnsnumber—Number of panel columns in the grid layout.
variant"comic" | "clean" | "polaroid"—Visual style: comic (speech bubbles), clean (minimal), or polaroid (photo frame).

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.

AttributeTypeRequiredDescription
bgstring—Background preset applied to this block
bg-fromstring—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-tostring—Gradient end colour — a semantic token name
bg-viastring—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.

AttributeTypeRequiredDescription
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.

AttributeTypeRequiredDescription
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.

AttributeTypeRequiredDescription
reveal"none" | "fade" | "slide" | "scale" | "blur"—Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography
staggerboolean—Cascade this block's items in as it reveals (no-op on single-child runes)
spacing

Block-level rhythm override.

AttributeTypeRequiredDescription
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.

AttributeTypeRequiredDescription
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.

AttributeTypeRequiredDescription
tintstring—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.

AttributeTypeRequiredDescription
width"compact" | "narrow" | "content" | "wide" | "full"—Maximum width constraint for this block
Not availableWhy
dropcap, readingthis rune declares no prose body
framethis rune declares neither a `frameTarget` nor a media section
prominencethis rune has no page-section header