Slides in Typst tend to end one of two ways. The PDF route gives you one page
per step and nothing ever moves. Typst’s own HTML export hands the arrangement
to the browser, which loses the very thing I use Typst for.
I tried a third route, and a package came out of it.
Every slide is typeset by Typst and written into the HTML as SVG. What you see
in the browser is Typst’s layout, to the point, the same one the PDF shows.
Only then does anything move: whatever should stir is announced in the source,
and a small runtime animates it with the Web Animations API. One source file
gives you three things. The talk as a single self-contained .html, a slide
set as PDF with one page per slide rather than per step, and a handout with
notes or ruled lines beside the slides.
What a deck looks like
#import "@preview/typstage:0.1.0": *
#show: presentation.with(
theme: themes.lesson,
title: [Completing the Square],
transition: "fade",
)
= Why bother
== Two quadratics that look alike
#side-by-side(
card(title: [This one factors])[$x^2 + 5x + 6 = (x+2)(x+3)$],
card(title: [This one does not])[$x^2 + 6x + 2$, and no integer pair works.],
)
#pause
So we stop guessing and rewrite the term instead.
== Step 1: put the missing corner in
#align(center, morph(<term>, $x^2 + 6x + 9 - 9 + 2 = 0$))
== Step 2: now it reads as a square
#align(center, morph(<term>, $(x + 3)^2 - 7 = 0$))
That is a whole deck. = opens a section slide, == a slide, #pause cuts a
slide into steps, and nothing carries a step number because steps count
themselves.
The one worth explaining is morph. Give the same name to something on two
adjacent slides and it flies from the one place to the other, matching glyph to
glyph. In the deck above the room sees 9 - 9 fold into the square and the 2
walk out to become the -7. It is the same term rewritten, and the motion says
so better than a new line ever could.
You can just click through it
Seventeen decks, written as talks somebody might actually give rather than as
feature demos:
Arrow keys step through, o gives an overview, f full screen, n opens the
speaker view in a second window, ? shows the key map. Every file there is a
single self-contained HTML. Save one and it still works offline.
Where it lives
Manual in English and
German. MIT, needs Typst 0.15.
Submitted to Universe; until it lands there, clone it into your local package
directory.
What would help me most
Two things I cannot find out alone.
Put a morph on two adjacent slides in your own writing. morph pairs
glyphs by their shape, and I have only ever fed it Latin letters and maths. I
have no idea what it does with Greek, Cyrillic, CJK or an Arabic line, and I
would rather be told than guess. A screenshot of a glyph landing somewhere it
has no business being is exactly the report I want.
Build something big. One SVG per slide is the whole design, and it has a
cost I cannot judge from my own decks. A twelve-slide text deck of mine is
1.1 MB; the tour, at 37 slides with images, a video and a GeoGebra applet,
is 4.3 MB. If you have a deck of a hundred slides, I would like three numbers:
the size of the HTML file, how long the browser takes to show the first slide,
and whether stepping still feels immediate at slide 80.
