> ## Documentation Index
> Fetch the complete documentation index at: https://docs.decktalk.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Slide recipes
> Copy six common slides into a project, each with its script lines, section table, cues, and scene.
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](#sync-a-subtitle-to-the-voice)
* [Show a derivation line by line](#show-a-derivation-line-by-line)
* [Show a chat before and after](#show-a-chat-before-and-after)
* [Show code one line per phrase](#show-code-one-line-per-phrase)
* [Compare two columns](#compare-two-columns)
* [Wait for a screenshot to load](#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 starter does not use. Each
`
```
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-text="spoken" text not found in the spoken words`. To check the slide at one cue, open
`?slide=7.1&after=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-tex-display` typesets it as
display math, and the answer uses `pop` so it stands out. The starter's `deck/index.html` loads
KaTeX from the copy `decktalk init` put beside it.
Inside the backticks of a `render` function, write every backslash twice, because a single
backslash breaks the TeX or blanks the page. In markup a backslash is written once, which is the
reason this recipe is a `` ([`data-tex`](/reference/runtime#data-tex)).
```md script.md theme={null}
## 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.
```
```toml decktalk.toml theme={null}
[[section]]
number = 8
page = "deck/index.html"
scene = 8
```
```json cues.json theme={null}
"8": { "cues": [
{ "cue": "8.1a", "on": "definition" },
{ "cue": "8.1b", "on": "Expand" },
{ "cue": "8.1c", "on": "Only two x", "offset": 0.2 }
] }
```
```html deck/index.html theme={null}
(d/dx) of x^2 = the limit as h goes to 0 of ((x+h)^2 - x^2) / h
= the limit of (2xh + h^2) / h = the limit of (2x + h)
(d/dx) of x^2 = 2x
```
The plain text inside each element shows when KaTeX is absent, so write it as a readable fallback.
In markup a backslash is written once. A slide built by a `render` function is a JavaScript string,
where every backslash has to be written twice, which is the reason to prefer a ``.
## Show a chat before and after
The question types in with `data-text="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
slide is the "after", and its cue `9.2` mounts it.
```md script.md theme={null}
## 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.
[Slide 9.2.]
Now ask for what you actually want. [beat] Explain it to a ninth grader, in three
sentences. [beat] Same model, better prompt.
```
```toml decktalk.toml theme={null}
[[section]]
number = 9
page = "deck/index.html"
scene = 9
```
```json cues.json theme={null}
"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" }
] }
```
```html deck/index.html theme={null}
```
## 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.
```md script.md theme={null}
## 10. Three commands
Three commands run the whole thing. [beat] Initialize a project. [beat] Build it
without voice, with no key. [beat] Then build it with your voice.
```
```toml decktalk.toml theme={null}
[[section]]
number = 10
page = "deck/index.html"
scene = 10
```
```json cues.json theme={null}
"10": { "cues": [
{ "cue": "10.1a", "on": "Initialize" },
{ "cue": "10.1b", "on": "without voice" },
{ "cue": "10.1c", "on": "your voice" }
] }
```
```html deck/index.html theme={null}
```
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 `
```
## Wait for a screenshot to load
The recorder starts the clock only after `window.__decktalk.ready` resolves. This recipe hands the
decode of a large image to `DeckTalk.waitFor`, so the image is ready before narration t=0. `waitFor`
adds a condition to the runtime's own wait rather than replacing it, so the KaTeX wait still applies.
```md script.md theme={null}
## 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.
```
```toml decktalk.toml theme={null}
[[section]]
number = 12
page = "deck/index.html"
scene = 12
```
```json cues.json theme={null}
"12": { "cues": [
{ "cue": "12.1screenshot", "on": "status report" },
{ "cue": "12.1note", "on": "captions" }
] }
```
```html deck/index.html theme={null}
```
`DeckTalk.waitFor` takes a Promise and holds narration t=0 until it settles. A Promise that rejects,
or one that has not settled after five seconds, becomes a page warning and the recording goes ahead,
so a missing image never hangs a build. [`window.__decktalk.ready`](/reference/runtime#window-__decktalk-ready)
explains the default wait.
## Next
* **Size a slide and choose reveal effects:** [Design a slide](/guides/design-a-slide)
* **Look up every attribute:** [Runtime](/reference/runtime#data-attributes)
* **Write phrases that time well:** [Writing for the ear](/guides/writing-for-the-ear)