Slide recipes

This page has six slides that you can copy into a project. Use a recipe when you need a common slide, such as a derivation or a code block.

Sync a subtitle to the voice
Show a derivation line by line
Show a chat before and after
Show code one line per phrase
Compare two columns
Wait for a screenshot to load

Before you start

Each recipe is one section, shown as four files: script.md, decktalk.toml, cues.json, and deck/index.html. The recipes use section numbers 7 to 12, which the scaffold does not use. Each <style> block defines the classes that its recipe needs. The recipes also use the scaffold’s .slide and .eyebrow classes and its color and font variables. To add a recipe to a project, follow these steps:

Paste the script.md lines after the last section of the script.
Paste the [[section]] table after the last [[section]] in decktalk.toml.
Paste the cues.json entry inside the sections object.
Paste the <style> and <script> blocks into deck/index.html, after the decktalk-runtime.js tag.
If the section number is already in use, change it in all four files.

Sync a subtitle to the voice

An element with data-sync shows its words one at a time, as the voice says them. The scaffold’s edit section uses it for its caption.

## 7. The idea

Write the script. [beat] Build the video. [beat] Every picture waits for its word.

[[section]]
number = 7
page = "deck/index.html"
scene = 7

"7": { "cues": [
  { "cue": "7.1a", "on": "Write the script" },
  { "cue": "7.1b", "on": "Build the video" },
  { "cue": "7.1c", "on": "Every picture" }
] }

<style>
  .stack { position: absolute; left: 120px; top: 360px; display: flex; flex-direction: column; gap: 32px; }
  .stack > * { margin: 0; }
  .line { font: 450 48px/1.4 var(--sans); color: var(--ink); }
</style>
<script>
DeckTalk.scene(7, { name: "The idea", steps: [
  { id: "7.1", hold: 10, cues: { "7.1a": 1, "7.1b": 3.5, "7.1c": 6 }, render: () => `
    <div class="slide">
      <p class="eyebrow">The idea</p>
      <div class="stack">
        <p class="line" data-cue="7.1a" data-sync>Write the script.</p>
        <p class="line" data-cue="7.1b" data-sync>Build the video.</p>
        <p class="line" data-cue="7.1c" data-sync>Every picture waits for its word.</p>
      </div>
    </div>` },
]});
</script>

The cue makes each line appear, and its words appear one at a time from there. The text must match the script word for word. If a line differs by one word, it appears whole, and the page warns data-sync text not found in the spoken words. To check the slide at one cue, open ?step=7.1&cue=7.1b, which hides the line for 7.1c.

Show a derivation line by line

Each line of the derivation is its own element with its own cue. data-display typesets it as display math, and the answer uses pop so it stands out. The scaffold’s deck/index.html loads KaTeX.

Inside the backticks of render, write every backslash twice. A single backslash breaks the TeX or blanks the page (data-tex).

## 8. The derivative of x squared

Start with the definition of the derivative, the limit of a difference quotient. [beat]
Expand the square, and the x squared terms cancel. [beat] Only two x is left.

[[section]]
number = 8
page = "deck/index.html"
scene = 8

"8": { "cues": [
  { "cue": "8.1a", "on": "definition" },
  { "cue": "8.1b", "on": "Expand" },
  { "cue": "8.1c", "on": "Only two x", "offset": 0.2 }
] }

<style>
  .derivation { position: absolute; left: 120px; top: 300px; display: flex; flex-direction: column; gap: 56px; }
  .math { margin: 0; font-size: 58px; color: var(--ink); }
  .math .katex-display { margin: 0; text-align: left; }
  .answer { color: var(--accent); }
</style>
<script>
DeckTalk.scene(8, { name: "The derivative of x squared", steps: [
  { id: "8.1", hold: 14, cues: { "8.1a": 1, "8.1b": 5, "8.1c": 9 }, render: () => `
    <div class="slide">
      <div class="derivation">
        <p class="math" data-cue="8.1a" data-display
           data-tex="\\frac{d}{dx}\\,x^2 = \\lim_{h \\to 0} \\frac{(x+h)^2 - x^2}{h}">d/dx x^2 = lim (x+h)^2 - x^2 / h</p>
        <p class="math" data-cue="8.1b" data-display
           data-tex="= \\lim_{h \\to 0} \\frac{2xh + h^2}{h} = \\lim_{h \\to 0} (2x + h)">= lim (2xh + h^2) / h = lim (2x + h)</p>
        <p class="math answer" data-cue="8.1c" data-fx="pop" data-display
           data-tex="\\frac{d}{dx}\\,x^2 = 2x">d/dx x^2 = 2x</p>
      </div>
    </div>` },
]});
</script>

The plain text inside each element shows when KaTeX is absent, so write it as a readable fallback.

Show a chat before and after

The question types in with data-type, and the reply fades in one line at a time. The bubble and its first line share a cue, so the bubble’s background appears when its text starts. The second step is the “after”, and its cue 9.2 mounts it.

## 9. Before and after

Watch a vague prompt first. [beat] Write about photosynthesis. [beat] The reply is true,
and it is flat. [beat] One line says what it is. [beat] Another line says where it happens.

[Step 9.2.]

Now ask for what you actually want. [beat] Explain it to a ninth grader, in three
sentences. [beat] Same model, better prompt.

[[section]]
number = 9
page = "deck/index.html"
scene = 9

"9": { "cues": [
  { "cue": "9.1ask", "on": "Write about" },
  { "cue": "9.1r1", "on": "One line" },
  { "cue": "9.1r2", "on": "another line" },
  { "cue": "9.2", "on": "Now ask" },
  { "cue": "9.2ask", "on": "Explain it" },
  { "cue": "9.2reply", "on": "Same model" }
] }

<style>
  .chat { position: absolute; left: 120px; top: 300px; width: 1680px; display: flex; flex-direction: column; gap: 32px; }
  .bubble { max-width: 1100px; padding: 28px 40px; border-radius: 24px; font: 450 36px/1.4 var(--sans); }
  .bubble p { margin: 0 0 12px; }
  .ask { align-self: flex-end; background: var(--accent); color: var(--ground); }
  .reply { align-self: flex-start; background: var(--block); color: var(--ink); }
</style>
<script>
DeckTalk.scene(9, { name: "Before and after", steps: [
  { id: "9.1", hold: 12, cues: { "9.1ask": 1, "9.1r1": 5, "9.1r2": 7 }, render: () => `
    <div class="slide">
      <p class="eyebrow">Before</p>
      <div class="chat">
        <div class="bubble ask" data-cue="9.1ask" data-type="40" data-fx="fade">Write about photosynthesis.</div>
        <div class="bubble reply" data-cue="9.1r1" data-fx="fade">
          <p data-cue="9.1r1" data-fx="fade">Photosynthesis is the process by which plants convert light into energy.</p>
          <p data-cue="9.1r2" data-fx="fade">It takes place in the chloroplasts.</p>
        </div>
      </div>
    </div>` },
  { id: "9.2", hold: 12, cues: { "9.2ask": 1, "9.2reply": 6 }, render: () => `
    <div class="slide">
      <p class="eyebrow">After</p>
      <div class="chat">
        <div class="bubble ask" data-cue="9.2ask" data-type="30" data-fx="fade">Explain photosynthesis to a ninth grader in three sentences.</div>
        <div class="bubble reply" data-cue="9.2reply" data-fx="pop">
          <p>Plants catch sunlight and use it to turn water and air into sugar.</p>
        </div>
      </div>
    </div>` },
]});
</script>

Show code one line per phrase

Each line of code is a block element with its own cue. The container keeps the indentation with white-space: pre and a monospace font. The lines use fade, because the motion of rise looks wrong on code.

## 10. Three commands

Three commands run the whole thing. [beat] Initialize a project. [beat] Build it
silently, with no key. [beat] Then build it with your voice.

[[section]]
number = 10
page = "deck/index.html"
scene = 10

"10": { "cues": [
  { "cue": "10.1a", "on": "Initialize" },
  { "cue": "10.1b", "on": "silently" },
  { "cue": "10.1c", "on": "your voice" }
] }

<style>
  .code { position: absolute; left: 120px; top: 360px; font: 500 40px/1.5 var(--mono); white-space: pre; color: var(--ink); background: var(--block); border-radius: 24px; padding: 40px 56px; }
  .code .cmt { color: var(--mute); }
</style>
<script>
DeckTalk.scene(10, { name: "Three commands", steps: [
  { id: "10.1", hold: 10, cues: { "10.1a": 1, "10.1b": 4, "10.1c": 7 }, render: () => `
    <div class="slide">
      <div class="code"><div data-cue="10.1a" data-fx="fade">decktalk init my-lesson</div><div data-cue="10.1b" data-fx="fade">decktalk build --silent   <span class="cmt"># no key</span></div><div data-cue="10.1c" data-fx="fade">decktalk build</div></div>
    </div>` },
]});
</script>

Keep the lines on one physical line inside the render template. With white-space: pre, the page would otherwise show the template’s own indentation.

Compare two columns

Two columns appear left and then right, and each column has one cue. The <style> block lays them out with flex.

## 11. Two ways to time a reveal

On the left, a timeline editor. Every reveal is a number of seconds, and every edit moves them
by hand. [beat] On the right, the words. Every reveal is a phrase, and it moves with the
sentence.

[[section]]
number = 11
page = "deck/index.html"
scene = 11

"11": { "cues": [
  { "cue": "11.1left", "on": "timeline editor" },
  { "cue": "11.1right", "on": "the words" }
] }

<style>
  .cols { position: absolute; left: 120px; right: 120px; top: 300px; display: flex; gap: 48px; }
  .pane { flex: 1; background: var(--block); border-radius: 24px; padding: 48px; min-height: 520px; }
  .pane h2 { margin: 0 0 24px; font: 600 56px/1.1 var(--tight); letter-spacing: -.02em; color: var(--ink); }
  .pane .line { margin: 0 0 16px; font: 450 36px/1.4 var(--sans); color: var(--ink); }
  .pane .caption { margin: 0; font: 450 30px/1.4 var(--sans); color: var(--mute); }
  .pane .accent { color: var(--accent); }
</style>
<script>
DeckTalk.scene(11, { name: "Two ways to time a reveal", steps: [
  { id: "11.1", hold: 12, cues: { "11.1left": 1, "11.1right": 6 }, render: () => `
    <div class="slide">
      <div class="cols">
        <div class="pane" data-cue="11.1left">
          <h2>A timeline editor</h2>
          <p class="line">Every reveal is a number of seconds.</p>
          <p class="caption">Every edit moves them by hand.</p>
        </div>
        <div class="pane" data-cue="11.1right">
          <h2 class="accent">The words</h2>
          <p class="line">Every reveal is a phrase.</p>
          <p class="caption">It moves with the sentence.</p>
        </div>
      </div>
    </div>` },
]});
</script>

Wait for a screenshot to load

The recorder starts the clock only after window.__sceneReady resolves. This recipe adds the decode of a large image to that wait, so the image is ready before narration t=0. The recipe extends the runtime’s own wait, so the KaTeX wait still applies.

## 12. The status report

Here is the status report after a build. [beat] Every section shows a recording and a
cut, and the captions and chapters sit beside the video.

[[section]]
number = 12
page = "deck/index.html"
scene = 12

"12": { "cues": [
  { "cue": "12.1shot", "on": "status report" },
  { "cue": "12.1note", "on": "captions" }
] }

<style>
  .shot { position: absolute; left: 260px; top: 140px; width: 1400px; border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
  .note { position: absolute; left: 260px; top: 960px; margin: 0; font: 450 30px/1.4 var(--sans); color: var(--mute); }
</style>
<script>
DeckTalk.scene(12, { name: "The status report", steps: [
  { id: "12.1", hold: 10, cues: { "12.1shot": 0.5, "12.1note": 5 }, render: () => `
    <div class="slide">
      <img class="shot" src="../media/status.png" alt="" data-cue="12.1shot" data-fx="fade">
      <p class="note" data-cue="12.1note">Captions and chapters sit beside the video.</p>
    </div>` },
]});

// Narration t=0 also waits until the screenshot has decoded.
document.addEventListener("DOMContentLoaded", () => {
  const shot = new Image();
  shot.src = "../media/status.png";
  const decoded = shot.decode().catch(() => {});
  window.__sceneReady = Promise.all([window.__sceneReady, decoded]).then(([ready]) => ready);
});
</script>

The listener runs after the runtime’s own DOMContentLoaded listener, so window.__sceneReady already holds the runtime’s Promise. window.__sceneReady explains the default wait.

Size a slide and choose reveal effects: Design a slide
Look up every attribute: Runtime
Write phrases that time well: Writing for the ear

Get started

Guides

Concepts

Reference

Help

Before you start

Sync a subtitle to the voice

Show a derivation line by line

Show a chat before and after

Show code one line per phrase

Compare two columns

Wait for a screenshot to load

Next

​Before you start

​Sync a subtitle to the voice

​Show a derivation line by line

​Show a chat before and after

​Show code one line per phrase

​Compare two columns

​Wait for a screenshot to load

​Next

Before you start

Sync a subtitle to the voice

Show a derivation line by line

Show a chat before and after

Show code one line per phrase

Compare two columns

Wait for a screenshot to load

Next