Slide Morph

Slide Morph

The bar: a sequence of single ideas, each readable from the back of the room in three seconds, whose headlines alone tell the story, with every figure from the brief on a slide and none invented, a look that belongs to this subject rather than to "a deck about X", and 2–4 Morph moments placed on the turns of the story. Morph is emphasis, like the accent: a deck where everything moves has no moments.

The frame (use it, don't rebuild it)

read_skill_file("slide-morph", "references/starter.html") is the base of the file: tokens, a 1920×1080 12-column frame with overflow:hidden, a fixed type scale, all 12 layout classes, an icon sprite, one example slide per layout (slides 04→05 are a complete chart build, 06→07 a carry) and the presenter <script>. Copy its <head>, <style>, sprite and script; change the TOKENS block, <title>, Fonts <link>, and add your style rules as section 6. Everything that follows assumes this CSS.

Optional depth, open what you need, each once:

• references/layouts.md: per-layout character budgets, skeletons and mistakes; the bar-chart recipe with precomputed positions; the diagram kit (fill/stroke classes, arrow marker, .ko halos).
• references/styles.md: six tested style families (tokens, font pairs, style blocks) and a contrast-checked hue table.
• references/morph.md: the three patterns (carry, build, zoom) with markup, and where moments usually sit in a pitch, talk or QBR.

Contract (the checker depends on it)

• One self-contained HTML file. Each slide is <section class="slide LAYOUT"> at 1920×1080, stacked vertically, with <aside class="notes"> inside it (30–90 words the speaker says). No frameworks. The only JavaScript is the starter's presenter <script>, unchanged, as the last thing in <body> (P presents in Chrome; the checker looks for it).
• LAYOUT is one of title section statement big-number stats chart compare cards process visual quote closing; modifier inverse. title first, closing last.
• Fonts from one Google Fonts <link>; everything else inline. Images are inline SVG; never invent image URLs (use .slot with [Photo: …]). No emoji icons.
• Output the whole file in one ```html block in the reply that follows your reads, then 2–4 lines: the look you chose, the layout sequence, the morph moments, any placeholder to replace, and that P in Chrome presents the deck. Don't end a reply on a plan.

What is measured, and the traps

• Overflow, overlap, text < 20px, contrast below AA, near-miss alignment, crowding (> 60 words or > 5 list items). The frame prevents all of these as long as you add text, not CSS: no style="", no font-size, no <br> in headings, no absolute positioning, negative margins or transforms. The budgets in layouts.md were tested in wide fonts; past them, text overflows. Aim for ≤ 40 visible words (55 on data slides, spent on labels and comparisons).
• Invented numbers. Every figure on a slide must be given by the brief or honestly derivable (a sum, a difference, a % change, a share). Shorten without losing precision: 3,250 → 3.25k, never 3k; decimals stay.
• Brief coverage. Every figure in the brief's tables and bullets should be on a slide (notes don't count). This is where strong decks quietly lose: a tidy story drops the inconvenient row. Show series in full, tables cell by cell; chart or split rather than cut.
• SVG: viewBox, no width/height, everything inside the viewBox, text ≥ 26 units. Compute bar heights (h = value / max × 420 on the 1104×600 recipe); bars drawn by eye are visibly wrong.
• Hidden in plain sight: the footer and slide counter live in the 128px bottom padding; .visual .figure bleeds to the edges by design; inverse swaps tokens, so a slide-level accent must contrast with --inv-bg too.

How Morph works, and what the check flags

Between two adjacent slides, elements sharing a data-morph key glide to their new place and size, recolour, and count when both are numbers; everything else cross-fades. Inside two keyed chart <svg>s, parts with the same key tween one by one, a new keyed rect grows from its baseline, and other new parts fade in. You only write keys; never style="", scripts or view-transition-name.

A pair is classified from its keys, and only three shapes work:

• carry: .num → .num with identical text, or two numbers of the same quantity (it counts up).
• build: figure <svg> → figure <svg>, same key, same viewBox and same max, with every bar and value label keyed on both (a part keyed on the first slide and missing on the second is flagged as vanishing). The one place a layout may repeat.
• zoom: svg.icon → the next slide's figure <svg>.

Flagged: two figure <svg>s keyed alike with no keyed parts (a plain cross-fade: a title shape keyed into the next chart is this); keys on text blocks (headings, paragraphs, cards); a key used twice on one slide; a key with no partner on an adjacent slide; more than 3 keys in a pair; fewer than 2 or more than 4 moments. Each slide must still stand alone within its budget.

Craft (your judgement)

• Headlines are full-sentence takeaways with a verb; a number is shown as a number or a chart, not a sentence; a lone number gets its comparison. One <em> and one accent element per slide: accent is emphasis.
• Vary layouts (no repeats in a row except a build, 6+ in 8–12 slides) and put something visual on at least every third slide; a well-drawn diagram in visual usually beats a fourth chart. If the brief lists slides one by one, make exactly those.
• The look. Name the cliché for this topic (green leaves for energy, navy for finance) and avoid its hue unless it is the brand colour. Pick a family from styles.md that suits the room and the content, or derive your own tokens from one, keeping its contrast and never touching sizes, line-heights or the frame. Take the accent from an object in the subject's world, via the hue table (ACCENT on light, ACCENT_DARK on dark). Dark stage is wrong for dim projectors and long rooms.
• You may add rules as .slide.LAYOUT .thing{…} in section 6 for a slide that needs it, never changing sizes or padding.

Before delivering, check the brief figure by figure against the slides, every number on the slides against the brief, and each morph pair against the three shapes above.