Manish-D12/prompt-to-motion

Fireship — "X in 100 Seconds"

Learned from: React in 100 Seconds (2020, 2:08), JavaScript in 100 Seconds (2022, 2:36), Python in 100 Seconds (2021, 2:23). Load remotion-best-practices as well when building the composition.

The one-line essence

Maximum information per second, delivered deadpan, on a dark canvas where something new appears every 1–2 seconds — and a dry joke every ~15 seconds so the density never feels like a lecture.

---

STORY — structure

"100 seconds" is a brand, not a limit: real runtime is 125–155 s, ~450–540 words. The skeleton is nearly identical across all three:

#	Beat	Time	What happens
1	Definition cold open	0–10s	First word is the subject's name, then a definition. No hello, no hook question. "Python, a high-level interpreted programming language famous for its zen-like code."
2	Origin + joke	10–25s	Who made it, when, one wry fact. (JS made "in just one week"; named to sound like "that sexy new Java language"; Python named after Monty Python, "which is why you'll find spam and eggs instead of foo and bar".)
3	Why it matters / where it's used	25–50s	Rapid list of domains, each with a logo or framework. Often ends with an ironic law: "anything that can be built with JavaScript will be built with JavaScript."
4	How it works internally	45–65s	One mechanism, one diagram (JIT pipeline, event loop, interpreter).
5	"To get started…"	60–130s	The longest part. Literal hands-on: "create a file ending in .py" → build ONE tiny example line by line, introducing a concept per line (variable → function → loop → class / component → props → state → event).
6	Ecosystem burst	last 20s of body	Machine-gun Q&A of libraries: "need a static site? you have Gatsby. need SSR? you have Next…"
7	Sign-off	last 10–15s	Fixed formula: "This has been X in 100 seconds. Hit the like button and subscribe if you want to see more short videos like this… thanks for watching, and I will see you in the next one."

Rules:

• One continuous example threads beats 5–6; don't jump between unrelated snippets.
• Never explain a term for longer than one sentence. Name it, show it, move on.
• No "in this video we'll cover". No recap. The sign-off is the ending.

VOICE — narration

• Pace: ~200–230 wpm, almost no pauses. Narrate faster than feels comfortable, then let the visuals carry the load.
• Jargon stack, then plainspeak. Open with a deliberately absurd pile of adjectives ("high-level, single-threaded, garbage-collected, interpreted or just-in-time compiled, prototype-based, multi-paradigm, dynamic language with a non-blocking event loop"), then spend the rest of the video making each word make sense.
• Deadpan irony about the industry, never about the viewer: "the genius marketing people of the time", "an experienced Pythonista will say your code is not pythonic", "it's so easy a caveman could do it".
• Puns on the subject's name are allowed once: "if the value changes, React will react."
• Imperative second person in the tutorial beat: "create a variable by…", "define a function with the def keyword, then indent…".
• Concrete nouns over abstractions: "grab the first button", not "select a DOM element".
• Sentences are short and stack with "then", "now", "but", "instead". No "basically", no "so, um".
• One joke per beat, max. Jokes are throwaway clauses, not set-ups.

Script template:

[NAME], a [5–12 stacked technical adjectives] [category] [famous for / made famous for] [one thing].
It was created in [year] by [person] [wry origin fact].
Today it's [status] … it's most well known for [domain] because [reason]. However, [ironic universal-law line].
[Mechanism in 2–3 sentences, one visual].
To get started, [create a file ending in .ext]. [6–10 sentences building one example, one concept each].
[Ecosystem: "need X? you have Y." ×4–6].
This has been [NAME] in 100 seconds. Hit the like button and subscribe if you want to see more short videos like this. Thanks for watching, and I will see you in the next one.

VISUAL — what the frames look like

Measured: hard scene cuts every 7–13 s (avg), but the canvas mutates every 1–2 s — the "cut" is usually a new element popping onto the same dark stage, not a new shot.

Stage

• Near-black background, flat, no texture: #16181D–#1E2128. Occasionally a full-bleed photo/space shot for the cold open.
• Content sits centered, small, with lots of dark margin. Nothing touches the edges except gag inserts.

Code panel (the workhorse, ~50% of screen time)

• VS Code Dark+ style panel, slightly lighter than the stage (#262A33), no window chrome or just a tab strip. Small text (code reads at ~20–24px on 1080p — it's for recognition, not reading).
• Code is typed in live, cursor visible, selection/highlight on the token being discussed; a 💡 lightbulb or 👆 pointer emoji marks the important token.
• When explaining a part, duplicate labels appear under tokens (READ / WRITE under count, setCount).

Labels / callouts

• Heavy, squared, uppercase display sans, often italic-skewed: WHAT IS A COMPONENT?, STATIC SITE?, READABILITY.
• Sit on solid color slabs (no rounded corners, ~6px padding): cyan #61DAFB, JS yellow #F7DF1E, purple #B66DFF, mint #7CFC9A, or white slab with black text. Color = the subject's brand color when possible.
• Mixed-size lockups: there's a (light, white) / COMPONENT (slab) / for that (light).

Objects & gags

• Logos as flat icons that pop in, side by side ([JS] LIBRARY for building [⚛], [f] 2013 [⚛]).
• Cutout photos with a thick white sticker outline (Guido van Rossum, Monty Python DVD), plus a vertical timeline ruler on the left with year labels.
• Meme/movie inserts: 1–2 s of live action in a small inset or full frame (the "caveman" clip, a TIME "Person of the Year" cover with the logo).
• Emoji as actors: 🤔 + WHERE?, 👆 pointing, ✅ checklist rows (☑ IO INTENSIVE JOBS).
• Simple diagrams: icon → label → icon pipelines ([JS file] COMPILER [binary] EXECUTION [laptop]), a thick ring with a dot orbiting (event loop), dashed orbit rings with satellites (Python ecosystem), bar-race chart (TIOBE index).
• Screenshots (GitHub awesome-list) shown flat, with b-roll beside them.

Motion

• Pops, not fades: scale 0 → 1.1 → 1 in ~6–8 frames, slight rotation wobble on labels.
• Hard cuts between beats. No crossfades, no slow pushes.
• Typing at ~25–40 chars/s, synced to the word being spoken.

Remotion recipes

Tokens (put in a theme.ts next to the composition, matching the project's existing pattern):

import { loadFont as loadDisplay } from "@remotion/google-fonts/RussoOne";
import { loadFont as loadMono } from "@remotion/google-fonts/JetBrainsMono";
import { loadFont as loadBody } from "@remotion/google-fonts/Inter";

export const { fontFamily: DISPLAY } = loadDisplay("normal", { weights: ["400"], subsets: ["latin"] });
export const { fontFamily: MONO } = loadMono("normal", { weights: ["400"], subsets: ["latin"] });
export const { fontFamily: BODY } = loadBody("normal", { weights: ["300", "700"], subsets: ["latin"] });

export const FS = {
  stage: "#181A1F",
  panel: "#262A33",
  code: { keyword: "#C586C0", fn: "#DCDCAA", string: "#CE9178", tag: "#569CD6", text: "#D4D4D4", comment: "#6A9955" },
  slab: { cyan: "#61DAFB", yellow: "#F7DF1E", purple: "#B66DFF", mint: "#7CFC9A", white: "#FFFFFF" },
} as const;

export const POP_FRAMES = 7;   // element pop-in
export const BEAT_FRAMES = 45; // ~1.5s @30fps: max time before something new appears

Building blocks to write (one file each):

• Slab — {text, color, skew?}: uppercase DISPLAY text on a solid rect. Enter with spring({ frame, fps, config: { damping: 12, stiffness: 200 } }) driving scale and a ±3° rotate that settles to 0 (or skewX(-8deg) when skew).
• CodePanel — {lines, startFrame, cps}: reveal characters with Math.floor(interpolate(frame, ...))-based slicing (never CSS animation), blinking caret frame % 30 < 15, optional highlight: {line, from, to} drawing a #264F78 selection behind tokens. Tokenize with a tiny regex colorizer using FS.code.
• Pop — wrapper that scales a child 0→1.1→1 over POP_FRAMES. Use for logos, emoji, stickers.
• Sticker — <Img> with a white outline via filter: drop-shadow(0 0 0 #fff) stacked 4× (or an SVG feMorphology dilate) for the cutout look.
• OrbitDiagram — center logo, 2–3 dashed <circle>s rotating at different speeds (rotate = frame * 0.4), satellites positioned with cos/sin, a Slab label at left that swaps per satellite.
• LoopRing — thick stroked circle, a white dot traveling around it (angle = (frame / 60) * 2π), Slab in the center.
• Timeline — vertical ruler with tick marks on the left edge, year labels popping as narration hits them.

Timing rules:

• Sequence by narration, not by scene: every noun the narrator says that can be shown, gets shown within ±5 frames.
• If a stretch exceeds BEAT_FRAMES with nothing new, add a highlight, a slab, or an emoji.
• Use <Series> with hard cuts between beats; reserve @remotion/transitions for nothing (Fireship doesn't crossfade).
• 1920×1080, 30 fps, 125–155 s.

Do / Don't

• ✅ Start on the subject's name. End on "I will see you in the next one."
• ✅ One running code example. One diagram for internals. One ecosystem burst.
• ✅ Dark, flat, small, centered; saturated slabs are the only loud color.
• ❌ No intro music sting, no host on camera, no lower-thirds, no gradients on the stage.
• ❌ No slow fades, no camera pushes, no ambient particles.
• ❌ Don't explain anything for two sentences in a row.