The complete path: blank project → written story → framed shots → performance → a published, narrated slideshow. Twenty minutes the first time; much faster after.
1Start a project
Open Story Cards. Click the black spine on the left to open the project drawer, then + (top-left).
The Project Manifest opens automatically. Fill in what you know — title, subtitle, logline, theme — and rename the placeholder characters (these become selectable speakers everywhere). Add locations; they'll appear as one-tap suggestions later. Set a cover image — it backgrounds your project's spine and the shelf card. All of it is editable later via the book icon → Project manifest…
Preferences live behind the gear on the spine: light/dark, vertical/horizontal layout, Overview (storyboard look, image backgrounds) vs Focus (clean writing board), accent color, reading pace (wpm).
2Write the cards
Each card is a scene: number → title → duration & word count → scene action → Script → On-screen.
Type the title, then the one-line scene action (what happens in frame).
Click ✎ edit script to open the script drawer. + add line offers your cast (with avatars), the Narrator, or a Soundscape note (music/SFX — displayed in italics, never read aloud). Click a line's name to reassign its speaker; characters you use appear as avatars under the title.
Duration is automatic from word count at your wpm. Drag the seconds number to override; scroll it to nudge.
Hover a card's top edge for tools: drag-reorder, AI draft, lock, perform from here, dictate (mic), delete. Hover the seam between cards and click the column to insert a scene. Click a card's number to collapse it.
3Give every card an image
In the On-screen section click choose image. Type what you want — your words become the image's label — and photos appear as you type (real photography via Pexels; the photographer is credited automatically). Click a photo and it's chosen — no confirm step.
Paste an image URL to use it directly, click the upload button, or drag & drop a file anywhere on the picker. Images already in your project show first so you can reuse them.
In Overview mode the image becomes the card's backdrop — your deck reads as a storyboard.
4Cut a Kuleshov moment
One beat, several shots: his face → the empty bench → his face again, closer.
With one image set, click + add shot to build the sequence. Drag shots onto each other to reorder.
Click any shot to edit it: micro-VO (the line spoken over that shot — these replace the card's script during playback, advancing with each cut) and seconds (shot timings sum to the card's duration).
For the A–B–A′ return: open shot A → Frame · stickers… → Frame → drag to the focal point, zoom in → Add as new shot. Same photo, tighter framing, zero copies.
5Motion and marks
In the Frame modal, pick each shot's motion: Push in (lands exactly on your framing), Pull out, Pan, or Still. Global Ken Burns on/off is in preferences.
Stickers tab: drop emoji or type text (broadcast-style captions); drag to place, select to resize.
Draw tab: circle a detail in six colors — strokes are vector and stay crisp everywhere.
The shot editor's Text overlay field prints bold type on the image itself (The 6:40 uses it for "TUESDAY").
6Perform it
Click the ◉ tool on any card (or book menu → Lock all → perform). A teleprompter stage plays: shots behind the words, micro-VO advancing on each cut, a timing bar keeping pace.
Space/→ next · ← back · P play/pause · Esc exit. Cards slide like a carousel; Kuleshov cuts are hard jumps.
7Export
Book icon → three exports:
Export slideshow (.html) — the publishable artifact. One self-contained file: click-through, auto-read (🔊), autoplay (▶), photo credits end card. Send it to anyone.
Export document (.doc) — a formatted screenplay for Word/Pages/Docs.
Export project JSON (for AI) — tight scene instructions for a video-generation model; also re-importable.
Save to file… is your backup; Open backup file… restores it (that's also how you open The 6:40's project file).
8Publish to the shelf
Export the slideshow; make a folder stories/<your-slug>/ in the shelf repo and save it as index.html.
Copy the OG <meta> block from The 6:40's file into yours (swap title, logline, cover) so links unfurl nicely.
Copy and edit meta.json; add a card for it on the gallery page.
These four steps are exactly what the future in-app Publish button will do in one click.
9Replace device TTS with Google TTS
The 🔊 button uses the viewer's device voice — quality varies. For a consistent, high-quality narrator, pre-generate the audio once with Google's Gemini TTS and bake it into the story. The player automatically prefers real audio over device TTS.
export GEMINI_API_KEY="your-key"
python3 tools/narrate.py stories/the-640/index.html
# pick a different voice:
python3 tools/narrate.py stories/the-640/index.html --voice Charon
It writes audio/step-NN.wav next to the story and patches each step. Redeploy and every viewer hears the same narrator, even offline.
Cost ≈ $0.015 per minute of audio — about a cent for The 6:40. Voices: Kore, Charon, Puck, Fenrir, Aoede.
10Record your own narration
List the steps and their lines: python3 tools/attach-audio.py stories/<slug>/index.html --list
Record one take per step — Voice Memos or QuickTime (File → New Audio Recording) both work. Perform mode is your teleprompter: play the story and read along.
Name the files step-00.m4a, step-01.m4a… to match the list, and drop them in the story's audio/ folder.
Attach and redeploy: python3 tools/attach-audio.py stories/<slug>/index.html
Steps without a recording fall back to device TTS — you can voice just the title card and let TTS carry the rest, or silence a step by leaving it out and muting 🔊.