Manish-D12/prompt-to-motion

Johnny Harris — investigative video essay

Learned from: Why you're so tired (2024, 19:52), What You Should Know About Joe Rogan (2023, 35:40), Oligarchy is worse than you think (2026, 48:46). Load remotion-best-practices as well when building the composition.

The one-line essence

A curious, slightly self-deprecating guy admits he doesn't understand something, then takes you with him as he figures it out — every abstract idea is turned into a physical object on paper you can watch being drawn, cut, highlighted or tangled.

---

STORY — structure

Long-form (20–50 min), but the skeleton scales down to 2–5 min. Chapters have short, evocative noun names (The Briefcase, The Maze, The Army, The Pyramid, Source Code, Now What; The Modern Caveman, Battleground Daytime).

#	Beat	Share	What happens
1	Cold open: a scene or a feeling	0–5%	Either a story dropped mid-action ("I want to tell you a story. Miami, 1973. An executive from a bank in the Bahamas is flying in to go on a date."), a montage of clips, or a universal feeling backed by data ("Year after year, more of us are quietly asking the internet, why am I so tired?").
2	Personal stake / confession		Why I care, and what I didn't know: "I've been hearing this word a bunch lately. I remember learning about it in school." / "Now listen, I am not a Joe Rogan listener. Well, at least I wasn't before this story."
3	The reframe promise		Reject the obvious answer: "This isn't a video where I'm gonna tell you to just get more sleep… I wanna approach this question a little differently." / "Once you understand it, you start to see it everywhere."
4	Roadmap (optional)		Parts or numbered takeaways, shown as an on-screen list that reappears and updates (1. Joe Hates Boxes 2. Joe Sells Contrarianism …).
5	Sponsor read	~5–20%	At a natural pause, with an explicit return: "With that, let's dive back in to why we are so tired." (Skip for non-YouTube work but keep the "dive back in" re-entry.)
6	Body: anecdote → mechanism → evidence	60–70%	Each chapter opens with a concrete person/scene (Kevin Trudeau's infomercials, Johnny Caveman's morning), reveals the mechanism with a visual metaphor (brain-as-city-full-of-trash, asset-and-owner connected by a string that gets tangled), then backs it with a study/chart/document. End each chapter by adding a line to a running list ("So I'm gonna jot this down on my list").
7	History turn		"To understand this, we have to go back…" — 300,000 years ago, the Gilded Age, the 1787 Convention.
8	Nuance turn		Push back on yourself right after a strong claim: "Okay, wait, but I'm not done. There's nuance to my critique."
9	"Now what?"	last 10%	Plain statement of the stance ("First, let me just state plainly what I see as wrong here"), 2–4 concrete things to do, a modest personal conclusion ("I'm not gonna dramatically change my life because of these findings, but…"), and a forward-looking closing line.
10	Post-credits chat	tail	Casual, off-script: "Hey everyone, thanks for watching. I had a question for anyone still watching…"

Story devices he reaches for:

• A collaborator as co-narrator. A producer (Adam) tells part of the story to Johnny on camera; Johnny reacts ("Whoa, whoa, whoa"). Experts appear as webcam interviews.
• A plot-device artifact. The expert's "short, quick note" email; the leaked list in a briefcase; a research paper held up to camera.
• Self-named characters. "Meet Johnny Caveman." Then put the same character in 3 eras to show change.
• Before/after numbers framed physically: "A group of Americans that would fit inside a double-decker bus has as much money as half the entire population."

VOICE — narration

• Pace ~175–195 wpm, conversational, with real pauses. Sounds talked, not read.
• First person, all the time. "I wanted to understand…", "my brain", "here at my desk at 11:30 AM".
• Verbal tics (use them, sparingly): "Now, listen," · "Okay," · "I mean," · "like" · "honestly" · "Whoa." · "In other words," · "Let me show you…" · "Here's the thing".
• Voice the viewer's objection, then answer it: "Okay, okay, I get it. Modern life is full of decisions. But like, I'm not running from tigers anymore. Shouldn't I be less tired?"
• Admit confusion on camera: "Okay, well, I didn't understand any of that." — then make it simple.
• Analogy for every mechanism, stated as "It's like…": the brain is a city, glutamate is trash, the trash collectors can't keep up.
• Humor as a quick aside, then straight back: "Sorry, I recently watched Top Gun. I'm just feeling really patriotic right now."
• Plain moral stance, owned as his: "I have no respect for it." — immediately balanced by fairness to the other side.
• Sourcing in the narration: "This is brand new research from the Paris Brain Institute… you can check my sources."
• Rhythm: a long, winding sentence, then a 2–4 word punch. "Struck down." / "Three people."

Script template (scales to any length):

COLD OPEN   [Scene in present tense with a place + year]  OR  [universal feeling + one stat].
STAKE       I've [wondered / been hearing about] this for a long time. [What I thought I knew.] [Admission.]
REFRAME     But this isn't a video about [obvious answer]. I want to look at [the bigger thing]. Let me show you.
CHAPTER ×N  [Concrete character or scene] → "It's like…" [analogy] → [study/chart/document] → "So I'm adding this to my list."
HISTORY     To understand why, we have to go back to [era].
NUANCE      Okay, wait — [the strongest counterpoint, said fairly].
NOW WHAT    Let me state plainly what I think. [Stance.] [2–4 things we can do.] [Modest personal takeaway.] [Forward-looking line.]
TAIL        Hey, thanks for watching. [Casual question to the audience.]

VISUAL — what the frames look like

Measured: average shot ~4–5 s across all three (275–616 cuts per video) — far busier than it feels, because cuts alternate between host and graphics.

1. Host on camera (~35–45% of runtime)

• Medium shot, eye-line just off-lens, warm tungsten set full of objects: globes, maps, desk lamps, stacked books, a vintage radio, plants. Teal/orange grade, shallow depth of field.
• Variations: seated on a leather couch, at a cluttered desk, standing with a podcast mic, a tight handheld close-up for emphasis, a "workspace" angle when he says "here at my desk".

2. Paper-collage animation (the signature)

• Backgrounds are 19th-century oil landscapes and vintage illustrations, cut into layers and parallaxed. Characters are photo cutouts with slightly rough edges, moved like puppets.
• Circular vignette inset: a cream disk in a corner showing a profile head with the brain exposed and the active region glowing red, with a tiny small-caps label (PREFRONTAL CORTEX). It stays on screen across shots as a persistent "meter".
• Same scene redrawn per era (cave → 1900s factory home → 2024 bedroom), with the inset tracking the change.
• Vintage-anatomy plates (sepia brain drawings, neuron etchings) for science; molecules shown as small green blobs piling up.

3. Paper-texture explainer graphics

• Off-white, grainy paper (#E9E7E2 with dust specks and a faint ghosted photo of a building/landmark underneath).
• Thick black hand-drawn frames, slightly rotated, often doubled (a second frame offset behind), holding a chart or title in serif.
• Two-color data: brick red #D9483B and teal #2BA6A6 (sometimes mustard #E2B43A), flat fills, no gradients.
• Hand annotations in teal: wobbly circles around the key part of a chart, quick check marks, arrows.
• Objects as metaphors: orange cartoon hands holding cards labeled MONEY / PROPERTY / STOCK, joined by a red string that then scribbles into a tangled mess (the "maze").
• Charts draw themselves: grid appears, legend in small caps (TOP 0.1%'S SHARE OF TOTAL US WEALTH), the line progresses left→right as he talks ("Okay, play the graph… look, look").
• Timelines: a black horizontal axis with decade ticks, a red block marking a period, hand-written note above.

4. Documents & sources

• Scans of real documents (congressional resolutions, newspaper front pages, research papers, court filings), shown full-frame on paper. Everything fades out except the key phrase, which stays in place, or is swept with a yellow highlighter.
• On-screen SOURCES IN DESCRIPTION tag with a paper icon when citing.
• Screen recordings of YouTube, websites, apps, with the UI left in.

5. Interviews & archival

• Remote experts in a vintage CRT-TV bezel (dark rounded-rectangle frame, slight barrel curve), or two bezels side by side for a conversation. Lower-third: name in small caps + book title in quotes on paper.
• Archival news clips with the network bug left on (MSNBC, ABC), old family-video footage, movie clips for jokes. A small italic disclaimer on reconstructions: "*not footage of that specific night".
• Cinematic recreations for cold opens: neon script title over the scene (Miami 1973 in pink neon), moody night lighting, close-ups of props (briefcase, red heels).

6. Type system

• Small-caps serif for chapter cards, chart legends, labels (Old Standard / IM Fell feel).
• Chapter menu: black paper cards stacked at angles on a light background, each listing chapter names in white small caps; the current one is lit, others dimmed.
• Running-list title card: dark background, condensed red caps title (WHY WE'RE SO TIRED), list items fading in beneath, earlier items dimmed.
• Typewriter/courier for quoted text and documents.

Motion

• Gentle: parallax drift, slow push-ins on documents, stop-motion-ish puppet moves (2–3 positions per second for cutouts, not smooth tweens).
• Draw-ons for every line (stroke-dashoffset), wobble on hand-drawn shapes.
• Hard cuts between host and graphics; whip/paper-slide transitions between chapters.
• Film grain and dust over everything graphic.

Remotion recipes

Tokens (theme.ts next to the composition):

import { loadFont as loadSerifSC } from "@remotion/google-fonts/OldStandardTT";
import { loadFont as loadFell } from "@remotion/google-fonts/IMFellEnglishSC";
import { loadFont as loadCondensed } from "@remotion/google-fonts/Oswald";
import { loadFont as loadType } from "@remotion/google-fonts/SpecialElite";

export const { fontFamily: SERIF } = loadSerifSC("normal", { weights: ["400", "700"], subsets: ["latin"] });
export const { fontFamily: FELL } = loadFell("normal", { weights: ["400"], subsets: ["latin"] });
export const { fontFamily: CONDENSED } = loadCondensed("normal", { weights: ["500", "700"], subsets: ["latin"] });
export const { fontFamily: TYPEWRITER } = loadType("normal", { weights: ["400"], subsets: ["latin"] });

export const JH = {
  paper: "#E9E7E2",
  paperShadow: "#CFCBC2",
  ink: "#141414",
  red: "#D9483B",
  teal: "#2BA6A6",
  mustard: "#E2B43A",
  highlighter: "rgba(255, 230, 0, 0.55)",
  cream: "#F3EEE3",   // vignette disk
  night: "#121212",   // title cards
} as const;

export const SMALL_CAPS = { fontVariant: "small-caps", letterSpacing: "0.04em" } as const;
export const PUPPET_FPS = 12; // step cutout motion at 12fps for the stop-motion feel

Building blocks to write (one file each):

• Paper — full-frame JH.paper with an SVG <feTurbulence baseFrequency="0.8" numOctaves="3"> grain at ~8% opacity, random dust specks seeded with random('dust-' + i), an optional ghosted <Img> at 6–10% opacity, multiply blend. Re-seed the grain every 2 frames (Math.floor(frame/2)) so it flickers like film.
• HandFrame — SVG rectangle whose corners are jittered by random() (±6px) and stroked 6–8px black; draw on with strokeDasharray/strokeDashoffset driven by interpolate. double prop renders a second frame offset (14px, 10px) behind. Rotate the whole thing −2°…+2°.
• Scribble — a hand-drawn circle/ellipse (teal) made from a jittered path that overshoots its start; draws on in ~12 frames. Use to circle chart parts and document phrases.
• DrawnChart — grid + small-caps legend + a series path revealed left→right via strokeDashoffset or by clipping with an animated clipPath rect. Two series max (red, teal). Axis labels in SERIF.
• DocumentFocus — an <Img> scan (or typeset text in TYPEWRITER/SERIF) where all lines fade to 15% except a keyed phrase; then a highlighter rect sweeps under the phrase (scaleX 0→1, transformOrigin: left). Slow push-in scale 1 → 1.06 over the shot.
• CRTBezel — wraps a video/<OffthreadVideo>: dark #111 frame, borderRadius: 48, inner boxShadow: inset 0 0 60px rgba(0,0,0,.8), slight perspective barrel via a radial-gradient vignette; lower-third name in SMALL_CAPS on a paper strip.
• Collage — layered <Img> cutouts with per-layer parallax translateX = (frame - start) * depth; puppet characters step their position at PUPPET_FPS (Math.floor(frame / (fps / PUPPET_FPS))).
• Vignette — a cream disk in a corner (borderRadius: 50%), containing a profile image and a glowing region (radial-gradient in JH.red, opacity driven by a prop like activity: 0..1), small-caps label beside it. Persist it across scenes by placing it above the <Series>.
• ChapterStack — 3–4 black cards rotated −6°…+8°, overlapping on paper, each listing chapter names in white SERIF small caps; the active chapter is full opacity, others 35%. Slide the stack in from off-frame.
• RunningList — JH.night card, CONDENSED uppercase red title, items in small caps beneath; previous items at 40% opacity, the newest one types/fades in. Reuse the same component at the end of every chapter.
• NeonTitle — script title with a pink text-shadow glow stack and a 2–3 frame flicker on entry (for cold-open place/year cards).

Timing rules:

• Alternate host ↔ graphic roughly every 4–6 s; never hold a single graphic longer than ~12 s without a draw-on, highlight or push.
• Every claim with a number → a DrawnChart, a physical comparison, or a DocumentFocus on the source.
• Every chapter ends on RunningList; every chapter begins with a ChapterStack or a concrete scene.
• Without host footage, substitute the host beats with full-frame Collage or DocumentFocus shots — keep the alternation rhythm.
• 1920×1080, 24 or 30 fps (24 fits the filmic feel), film grain on all graphic layers.

Do / Don't

• ✅ Start in a scene or a feeling, never with a definition.
• ✅ Say "I" — confess what you didn't know, voice the viewer's objection, state your stance plainly, then give the other side its due.
• ✅ Make abstractions physical: hands, strings, trash in streets, a double-decker bus of billionaires.
• ✅ Paper, grain, ink, two accent colors, small-caps serif. Show the sources.
• ❌ No flat-vector corporate explainer look, no glossy gradients, no neon UI (except the cold-open title).
• ❌ No unattributed stats; no "studies show" without showing the study.
• ❌ Don't end on a summary — end on what we should do or be ready for, then a casual tail.