# Will Francis: Diagram-led explainer

A calm, diagram-led explanation. Persistent cards, animated controls and a small presenter window turn each spoken idea into something you can follow.

Version 1.0.0. Reviewed 2026-10-16.

## Use for
Long-form explainers, Systems and frameworks, Concepts with cause and effect.

## Structure & pacing

Give the argument a visible structure.

Observed: The source announces three horizons, returns to the same category cards at chapter changes, and repeatedly expands an active checklist item into a concrete mechanism. Full presenter shots punctuate the graphic sections.

- Read the full script and map its argument before drawing. Identify the specific subject, the governing framework, evidence, mechanism, examples and useful action.
- Introduce two to four stable categories only when the argument actually has them. Reuse the same objects at each chapter transition.
- Map concrete nouns to persistent objects and verbs to changes in those objects. A new sentence does not automatically need a new scene.
- For each beat write: narration, starting state, explanatory action, settled state and reason to cut. Hold the settled state while the explanation continues.
- Return to the presenter at a rhetorical turn, qualification or personal judgement. Do not cut on an arbitrary two-second cadence.
- Finish by resolving the initial framework. Retain uncertainties and distinguish a conceptual model from measured evidence.

Starting settings (chosen production guidance, not extracted values): Chosen starting point: 0.5–0.6 s entrances, 0.15–0.2 s stagger, explanatory action beginning around 0.8–1.2 s and usually resolving around 2.5 s, followed by a narration-led hold. The 7 s specimen beats are a gallery playback choice, not source timing.

## Colour & footage

Keep the quiet editorial stage and Will’s identity.

Observed: The source uses a warm outer ground, a large near-white inset stage, muted olive selection states, a narrow high-contrast serif and thin grey ghost-card layers. A small rounded presenter window sits at the right. Its camera scene has a neutral grey background.

- Keep the source’s spatial hierarchy: explanation dominant, presenter secondary, clear empty space around the mechanism. Preserve the right-hand anchor through graphic changes.
- Use Will’s #F6F4EE paper, #111111 ink, #FFB401 active state and supplied supporting accents. Use Sentient rather than guessing the source font.
- Use the current 800 × 800 explainer template inside the wider edit stage. Its hard ink shadows and chunky drawings are an intentional brand adaptation of the source’s softer cards.
- In a 16:9 edit, begin with the presenter around 9–12% of frame width and a portrait crop. For vertical video, move the diagram to a large square panel and recompose the presenter area.
- Keep natural skin tones and Will’s real studio. There is no recovered source LUT. Never add a rainbow strip.

Starting settings (chosen production guidance, not extracted values): The gallery wrapper is 16:9 with an 800 × 800 diagram fitted proportionally and a right-side portrait crop. The square diagram has 24–40 px edge clearance. Presenter dimensions and colour values here are chosen adaptation values, not source measurements.

## Captions

Let the voice carry the argument and labels name the objects.

Observed: Sampled source frames use large serif concept words, smaller functional labels, occasional black or olive emphasis pills, source excerpts and sparse text. They do not show a continuous burned-in verbatim subtitle rail.

- Write short labels that identify an object or variable. Do not paste the narration onto the diagram.
- Use Sentient for the square diagram’s words, following the current explainer skill. Use Inter for gallery controls and genuine interface detail outside that diagram.
- If the finished edit needs subtitles, use Avenir Next Bold and place them consistently outside the diagram’s important content. This is Will’s added caption system, not a recovered source feature.
- Choose a phrase for emphasis only when it directs attention or qualifies a relationship. Avoid decorative labels above every heading.
- Keep direct source quotations brief and attributed; the downloadable study paraphrases the source argument.

Starting settings (chosen production guidance, not extracted values): Square diagram: at least 54 px after fitting at 800 × 800, roughly eight words per scene. Video subtitles: start at Will’s 42 px at 1920 × 1080; adjust for delivery size, two lines maximum. The gallery is silent and displays example narration below the canvas.

## Graphics & evidence

Make the mechanism move, then let it settle.

Observed: The reference contains travelling checklist highlights, a temperature control, filling containers, banking/cash conversion, a typed terminal, task/context aggregation, repeated evaluation cards, paired value bars, a capability curve, linked belief/difficulty controls and human networks.

- Build one object vocabulary per video. The task document, folder, person and chapter card must remain recognisable each time they return.
- Checklist: keep row geometry fixed, move one active fill, then add completion marks. Folder: reveal task cards and context, gather them into a container, then introduce the result.
- Control: animate an input and its output on the same timeline. Never move a slider without a meaningful corresponding change.
- Chart: establish axes and comparison first, draw the data or conceptual shape, then attach the annotation. Identify conceptual graphics as illustrations.
- Comparison: hold both cards still while the values or contents change. Preserve the same scale if there is real numerical data.
- Network: introduce a central person, add relevant neighbours, then draw paths. Reveal arrowheads after shafts and hide zero-length round-cap dots.
- Evidence: use the real screenshot, a deliberate crop and one targeted callout. Never manufacture a source page or make the reference’s personal evaluation results look like Will’s.
- Build from the explainer template. Inspect intermediate frames, replay and reduced motion; freeze outgoing child animation during the opaque crossfade.

Starting settings (chosen production guidance, not extracted values): Use the included nine-scene HTML as the editable mechanism library. The source’s soft shadow/ghost stack is documented in the analysis; Will’s current square-diagram surface uses 2.5 px ink borders and roughly 10 px hard shadows. Do not infer frame-exact source keyframes.

## Sound & transitions

Make the voice the timing reference.

Observed: The transcript is a conversational monologue with qualifications, examples and occasional direct questions. Visual frames establish presenter cuts and graphic passages. The available walkthrough does not reliably identify music, effects or measured mix levels.

- Edit around Will’s recorded clauses. Preserve meaningful qualifications; remove only empty repetitions and interruptions that obscure the explanation.
- Use a clean presenter cut at a change of rhetorical mode. For diagram changes, use the current template’s short opaque crossfade and slight rise.
- Keep moving parts quiet unless a restrained tick or click helps make a specific state change perceptible. Do not invent an effects pattern and attribute it to the reference.
- Choose any music from the actual brief and licensed assets. The specimen includes no soundtrack or synthetic voice.
- Check narration sync against the explanatory action, and ensure the viewer can read the completed diagram before the next cut.

Starting settings (chosen production guidance, not extracted values): Chosen delivery starting point for a finished narrated edit: around −16 LUFS integrated, true peak at or below −1 dBTP. These are production suggestions, not measured source settings. This gallery specimen is silent.

## Sources and evidence limits

Full caption transcript and vidIQ visual walkthrough, checked against all 18 YouTube storyboard sheets and selected frames in the source player. Chapter times come from the source description; smaller visual ranges are approximate. Exact font names, easing curves, frame timings and audio settings were not recovered.

- [Nick Saraev · How to Survive the Next 2 Years of AI](https://www.youtube.com/watch?v=X1ObmRAgp5A). Published 15 October 2026. 13:19 reference. Full script and visual grammar studied. Storyboard sheets and selected player frames checked on 16 October. Source creator footage, audio, images and claims are not included in the specimen.
  00:23 category focus · 01:37 persistent checklist · 05:20 evaluation folder · 06:11 comparisons · 10:56 linked controls · 12:17 human network

## Example brief

Use the Will Francis Diagram-led explainer style, adapted from Nick Saraev’s How to Survive the Next 2 Years of AI. Read the complete recipe, source-study.md and current Will Francis brand guide. Read my whole script, map its argument and build a shot plan linking each narration beat to an object, a meaningful state change and a held result. Keep the stable light stage, small right-hand presenter, recurring category cards and checklist, concrete file/control/chart/network mechanisms, and presenter cuts at rhetorical turns. Use my footage, Sentient, signature yellow and the current 800 × 800 explainer-slideshow template. Follow the included example and verification guidance. Keep forecasts separate from evidence and never reuse the source’s personal results as mine. Plan the final audio and caption timing from my recording. No rainbow strip.

# Shared brand rules

Read /Users/willfrancis/Library/CloudStorage/Dropbox/Claude/brand-will-francis/BRAND.md before asset creation.

- Keep Will’s voice, natural skin tones and recognisable studio.
- Use Sentient for headings, Inter for interface text and Avenir Next Bold for subtitles.
- Use authentic screenshots and source footage. Never fabricate a product result or performance metric.
- For narrated HTML diagrams, use the current explainer-slideshow skill, its 800 × 800 template and verification scripts.
- Keep source creator footage, music and identity out of the downloadable pack.
- Never add a rainbow strip to a video or motion specimen.
- Keep source observations separate from chosen adaptation settings. Never transplant the reference’s forecasts or personal results.

If the folder is unavailable, ask for the brand materials. The current narrated HTML explainer skill at /Users/willfrancis/.codex/skills/explainer-slideshow/SKILL.md overrides older slide rules. Separate raster covers use GPT image generation with supplied brand references.