Slide template

For technical talks, built on Reveal.js and Animotion. The rest of this deck shows each slide type and when to use it.

Stanley5249/slides

Show the audience where the talk is going

Words: emphasis, statements, quotes, lists, steps, comparisons, tables, numbers, and math.
Code and motion: source, walkthroughs, and reordering.
Evidence: diagrams, screenshots, and pictures.

Words

A divider opens each section. Its number counts sections, so a talk with one section needs none.

Mark a word by what it does

Bold marks the one word the speaker stresses, such as never in a warning.

Italics mark a term or a title.

Code such as show(step) uses a monospace font.

A link stays inside the sentence, like the design notes, and its icon marks it.

Give one sentence the whole slide when the claim is the point.

Use a statement for a thesis, a quote, or a question for the audience.

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

Antoine de Saint-Exupéry, Wind, Sand and Stars

Reveal a list one point at a time

Each point waits for the presenter’s next keypress.
The audience reads the current point, not the ones after it.
Add class="fragment" to any element to hold it back.

Press the down arrow for a list that dims.

Dim the points already made

Add dim to the list.
Each point fades once the next one arrives.
The current point keeps its full ink.

Lay out a process in the order it happens

Write the slide under src/slides.
Run just ci to check the deck.
Rehearse at projection size.
Present.

Use steps only when the order matters. Otherwise a list is enough.

Put two options side by side

Paragraph

Dense prose asks the audience to read while the speaker talks, and nobody can do both at once.

List

Short lines
One idea each
Read at a glance

Right-align a column of numbers

Tables use horizontal rules only. Add numeric to a cell to right-align its digits at equal widths.

Step	Used for	Size
Title	The first slide	76
Heading	Every other slide	44
Content	Prose, lists, and tables	24
Label	Captions and the counter	18

1280 × 720

Give a number its own slide when the talk depends on it. This one is the stage size every slide is designed at, before Reveal scales it to the screen.

Set math the way a paper would

s = \min\left(\frac{W}{1280},\ \frac{H}{720}\right)

Reveal scales the stage by $s$ , where $W$ and $H$ are the width and height left in the window after its margin. The smaller ratio wins, so the whole slide always fits.

Code and motion

Code and shapes change on the presenter’s keypress, one step at a time.

Show a block of code

The code below is a whole slide: a slide.svelte in a numbered folder under src/slides. The deck plays them in numeric order, so leave gaps for the slides you add later.

Step through code

x = 0

Move items to their new order

1234

Each item slides from its old place to its new one, so the audience sees what moved instead of hunting for the difference.

Evidence

Diagrams, screenshots, and pictures show what the words claim.

Draw diagrams in the deck's colors

The diagram uses the same color roles as the surrounding slide. Mermaid reads those roles from the document when it renders.

Select the diagram to inspect it in the viewer.

Rendering diagram…

Write, check, fix, and present.

Zoom into a wide diagram

The slide shows the whole diagram as a preview. Select it to open a larger view you can drag around.

Rendering diagram…

Sixteen stages across, one click away.

Show a diagram that fails to render

Rendering diagram…

A failed diagram displays its full error instead of leaving an empty space that could pass unnoticed.

The visible panel makes the problem clear before the talk begins.

Use screenshots as evidence, not decoration

Shot pairs the image with alternative text and an optional caption. Select the image to inspect it in the same viewer as a diagram.

The screenshot needs no extra frame because its content is the focus.

Replace this with a capture of the app you are showing.

Show a missing screenshot

When an image is missing, its slot remains visible and reports the path that failed to load.

The deck still builds, but the unfinished work cannot hide.

Let a picture fill the stage

Pass image to the slide and set the words on a scrim, so they stay readable over any picture. This one is Earthrise, taken from Apollo 8 in 1968 and in the public domain.

Start a deck from here

docs/design.md gives each rule and its reason.
docs/components documents Link, Mermaid, Shot, Tex, and Zoom.
just ci checks the deck before a talk.

Press the down arrow for a backup slide.

Keep backup slides below the closing slide

A vertical stack holds answers to likely questions. The main path skips it, and the down arrow reaches it when someone asks.