+ {/* Title bar */}
+
+);
diff --git a/video/src/declarations.d.ts b/video/src/declarations.d.ts
new file mode 100644
index 0000000..3bc2543
--- /dev/null
+++ b/video/src/declarations.d.ts
@@ -0,0 +1,4 @@
+declare module "*.svg" {
+ const src: string;
+ export default src;
+}
diff --git a/video/src/index.tsx b/video/src/index.tsx
new file mode 100644
index 0000000..f31c790
--- /dev/null
+++ b/video/src/index.tsx
@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);
diff --git a/video/src/scenes/BackendScene.tsx b/video/src/scenes/BackendScene.tsx
new file mode 100644
index 0000000..84fa0ec
--- /dev/null
+++ b/video/src/scenes/BackendScene.tsx
@@ -0,0 +1,921 @@
+import React from "react";
+import {
+ AbsoluteFill,
+ interpolate,
+ spring,
+ useCurrentFrame,
+ useVideoConfig,
+} from "remotion";
+
+const CODE_FONT =
+ "'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace";
+
+const cl = {
+ extrapolateLeft: "clamp" as const,
+ extrapolateRight: "clamp" as const,
+};
+
+// ── Animation helper (pure — no hooks) ───────────────────────────────────────
+function ent(localFrame: number, start: number, fps: number) {
+ const p = spring({
+ fps,
+ frame: Math.max(0, localFrame - start),
+ config: { damping: 14, stiffness: 120, mass: 0.5 },
+ from: 0,
+ to: 1,
+ });
+ return {
+ opacity: interpolate(p, [0, 0.4], [0, 1], { extrapolateRight: "clamp" }),
+ y: interpolate(p, [0, 1], [20, 0]),
+ scale: interpolate(p, [0, 1], [0.84, 1]),
+ };
+}
+
+// ── Shared: act header ───────────────────────────────────────────────────────
+const ActHeader: React.FC<{
+ eyebrow: string;
+ headline: React.ReactNode;
+ localFrame: number;
+ fps: number;
+}> = ({ eyebrow, headline, localFrame, fps }) => {
+ const eyebrowOpacity = interpolate(localFrame, [0, 12], [0, 1], cl);
+ const e = ent(localFrame, 8, fps);
+ return (
+
+
+
+
+
+
+ {/* Code area */}
+
+ {/* Line number gutter */}
+
+
+ {Array.from({ length: lineCount }, (_, i) => (
+
+
+ {/* Code content */}
+
+ {i + 1}
+
+ ))}
+
+ {children}
+
+
+
+ );
+};
+
+// ══════════════════════════════════════════════════════════════════════════════
+// ACT 1 — The Backend (localFrame = frame, peak 10–90)
+// ══════════════════════════════════════════════════════════════════════════════
+
+const BACKENDS = [
+ ["Postgres", "MySQL", "SQLite"],
+ ["Redis", "AMQP", "PGMQ"],
+ ["NATS", "RSMQ", "Cron"],
+];
+
+const RESPONSIBILITIES = ["Poll tasks", "Heartbeat", "Middleware"];
+
+const FlowDashArrow: React.FC<{ localFrame: number; visible: boolean }> = ({
+ localFrame,
+ visible,
+}) => {
+ if (!visible) return null;
+ const DASH = 14,
+ GAP = 7;
+ const offset = -((localFrame * 2) % (DASH + GAP));
+ return (
+
+ );
+};
+
+const Act1: React.FC<{
+ localFrame: number;
+ fps: number;
+ opacity: number;
+}> = ({ localFrame, fps, opacity }) => {
+ const app = ent(localFrame, 22, fps);
+ const backend = ent(localFrame, 38, fps);
+ const store = ent(localFrame, 54, fps);
+
+ return (
+
+ {eyebrow}
+
+
+ {headline}
+
+
+ {/* Your App */}
+ 30} />
+
+ {/* Backend — highlighted center */}
+ 46} />
+
+ {/* Task Store */}
+
+
+ {/* Backend implementations grid */}
+
+ Your App
+
+
+
+
+
+
+ Backend
+
+ {/* Responsibility badges */}
+
+ {RESPONSIBILITIES.map((r, i) => (
+
+
+ {r}
+
+ ))}
+
+ Task Store
+
+
+ {BACKENDS.map((row, ri) => (
+
+
+ {row.map((name, ci) => {
+ const idx = ri * 3 + ci;
+ return (
+
+ ))}
+
+ {name}
+
+ );
+ })}
+
+ {PUSH_METHODS.map((m) => {
+ const e = ent(localFrame, m.startLocal, fps);
+ return (
+
+
+
+ );
+ })}
+
+ {m.method}
+
+
+ {m.desc}
+
+
+ {m.detail}
+
+
+ {EXPOSE_TRAITS.map((t) => {
+ const e = ent(localFrame, t.startLocal, fps);
+ return (
+
+
+
+
+ );
+ })}
+
+ {t.name}
+
+
+ {t.desc}
+
+
+ Satisfy all six traits — get{" "}
+
+ Expose
+ {" "}
+ for free.
+
+
+ {/* Pool */}
+
+
+ {/* Divider */}
+
+
+ {/* Codecs */}
+
+ Single Connection Pool
+
+
+ {/* Down arrow + make_shared label */}
+
+
+
+
+ {/* Typed backends */}
+
+ .make_shared()
+
+
+ {WORKER_LABELS.map((label, i) => (
+
+
+
+ {label}
+
+ ))}
+
+ Fewer connections. Less overhead.
+
+
+ Codecs
+
+
+
+ {CODECS.map((c) => {
+ const e = ent(localFrame, c.startLocal, fps);
+ return (
+
+
+
+ );
+ })}
+
+ {c.name}
+
+
+ {c.tag}
+
+
+ {c.feature}
+
+
+ {label}
+
+ );
+};
+
+export const CTAScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ // Wordmark
+ const wordmarkScale = spring({
+ fps,
+ frame: Math.max(0, frame - 5),
+ config: { damping: 14, stiffness: 100, mass: 0.5 },
+ from: 0.4,
+ to: 1,
+ });
+ const wordmarkOpacity = interpolate(frame, [5, 22], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ // Tagline
+ const taglineOpacity = interpolate(frame, [15, 28], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+ const taglineY = interpolate(frame, [15, 28], [12, 0], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ // CTA pill
+ const pillOpacity = interpolate(frame, [25, 38], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+ const pillY = interpolate(frame, [25, 38], [14, 0], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ return (
+
+ Apalis
+
+
+ {/* Tagline */}
+
+ Process background tasks with confidence
+
+
+ {/* CTA pill */}
+
+ apalis.dev →
+
+
+ {/* Ecosystem badges */}
+
+ {BADGES.map((b) => (
+
+
+ {/* Code portion */}
+
+ );
+};
+
+// ── Extractor cards ──────────────────────────────────────────────────────────
+
+type Extractor = {
+ label: string;
+ desc: string;
+ color: string;
+ startFrame: number;
+};
+
+const EXTRACTORS: Extractor[] = [
+ {
+ label: "Data
+
+ {" "}
+
+
+ {name}
+ :
+
+ {type}
+ ,
+
+
+ {/* Annotation badge */}
+
+ {annotation}
+
+
+
+ );
+};
+
+// ── Scene ─────────────────────────────────────────────────────────────────────
+
+export const DependencyInjectionScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ // Eyebrow label
+ const eyebrowOpacity = interpolate(frame, [0, 12], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ // Headline
+ const titleProgress = spring({
+ fps,
+ frame: Math.max(0, frame - 8),
+ config: { damping: 14, stiffness: 100, mass: 0.5 },
+ from: 0,
+ to: 1,
+ });
+ const titleY = interpolate(titleProgress, [0, 1], [24, 0]);
+ const titleOpacity = interpolate(titleProgress, [0, 0.4], [0, 1], {
+ extrapolateRight: "clamp",
+ });
+
+ // Code card container
+ const cardProgress = spring({
+ fps,
+ frame: Math.max(0, frame - 20),
+ config: { damping: 16, stiffness: 80, mass: 0.6 },
+ from: 0,
+ to: 1,
+ });
+ const cardOpacity = interpolate(cardProgress, [0, 0.5], [0, 1], {
+ extrapolateRight: "clamp",
+ });
+
+ // "async fn process(" opening line
+ const fnLineOpacity = interpolate(frame, [22, 34], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ // Closing ") -> Result<…>" line
+ const closingOpacity = interpolate(frame, [100, 112], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ // Tagline
+ const taglineOpacity = interpolate(frame, [155, 168], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ return (
+
+ {label}
+
+
+ {desc}
+
+
+ Dependency Injection
+
+
+ {/* Headline */}
+
+ Extractors.
+ Not boilerplate.
+
+
+ {/* Code card */}
+
+ async fn
+ process
+ (
+
+
+ {/* Parameters — animated one by one */}
+ {PARAMS.map((p) => (
+
+ {") -> "}
+ Result
+ {"<(), Error>"}
+
+
+ {EXTRACTORS.map((e) => (
+
+
+ {/* Tagline */}
+
+ Any type. Auto-injected. Zero glue code.
+
+
+ {/* Circle */}
+
+ );
+};
+
+// ── Retry arrow between attempts ─────────────────────────────────────────────
+
+const RetryArrow: React.FC<{ frame: number; visibleAfter: number }> = ({
+ frame,
+ visibleAfter,
+}) => {
+ const opacity = interpolate(frame, [visibleAfter, visibleAfter + 10], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+ const DASH = 14;
+ const GAP = 7;
+ const offset = -((frame * 2) % (DASH + GAP));
+
+ return (
+
+ {isFail ? "✕" : "✓"}
+
+
+ {/* Label */}
+
+ {label}
+
+
+
+
+ );
+};
+
+// ── Code line ────────────────────────────────────────────────────────────────
+
+type Token = { text: string; color: string };
+
+type CodeLineData = {
+ tokens: Token[];
+ startFrame: number;
+};
+
+const CODE_LINES: CodeLineData[] = [
+ {
+ tokens: [
+ { text: "WorkerBuilder", color: "#60a5fa" },
+ { text: "::", color: "rgba(255,255,255,0.3)" },
+ { text: "new", color: "#1d9e75" },
+ { text: "(", color: "rgba(255,255,255,0.35)" },
+ { text: '"email_worker"', color: "#f97316" },
+ { text: ")", color: "rgba(255,255,255,0.35)" },
+ ],
+ startFrame: 96,
+ },
+ {
+ tokens: [
+ { text: " .", color: "rgba(255,255,255,0.35)" },
+ { text: "catch_panic", color: "#a78bfa" },
+ { text: "()", color: "rgba(255,255,255,0.35)" },
+ ],
+ startFrame: 110,
+ },
+ {
+ tokens: [
+ { text: " .", color: "rgba(255,255,255,0.35)" },
+ { text: "layer", color: "rgba(255,255,255,0.7)" },
+ { text: "(", color: "rgba(255,255,255,0.35)" },
+ { text: "RetryLayer", color: "#60a5fa" },
+ { text: "::", color: "rgba(255,255,255,0.3)" },
+ { text: "new", color: "#1d9e75" },
+ { text: "(", color: "rgba(255,255,255,0.35)" },
+ { text: "RetryPolicy", color: "#60a5fa" },
+ { text: "::", color: "rgba(255,255,255,0.3)" },
+ { text: "retries", color: "#1d9e75" },
+ { text: "(", color: "rgba(255,255,255,0.35)" },
+ { text: "3", color: "#f97316" },
+ { text: ")))", color: "rgba(255,255,255,0.35)" },
+ ],
+ startFrame: 124,
+ },
+ {
+ tokens: [
+ { text: " .", color: "rgba(255,255,255,0.35)" },
+ { text: "build", color: "rgba(255,255,255,0.7)" },
+ { text: "(", color: "rgba(255,255,255,0.35)" },
+ { text: "handle_email", color: "#ffffff" },
+ { text: ")", color: "rgba(255,255,255,0.35)" },
+ ],
+ startFrame: 138,
+ },
+];
+
+const AnimatedCodeLine: React.FC
+ retry
+
+
+ {tokens.map((t, i) => (
+
+ {t.text}
+
+ ))}
+
+ );
+};
+
+// ── Feature cards ────────────────────────────────────────────────────────────
+
+type Feature = {
+ label: string;
+ desc: string;
+ color: string;
+ startFrame: number;
+};
+
+const FEATURES: Feature[] = [
+ {
+ label: "RetryLayer",
+ desc: "exponential backoff · configurable retries",
+ color: "#1d9e75",
+ startFrame: 150,
+ },
+ {
+ label: "CatchPanicLayer",
+ desc: "panics become errors, not crashes",
+ color: "#f97316",
+ startFrame: 162,
+ },
+];
+
+const FeatureCard: React.FC
+
+ );
+};
+
+// ── Scene ─────────────────────────────────────────────────────────────────────
+
+export const ErrorHandlingScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ // Eyebrow
+ const eyebrowOpacity = interpolate(frame, [0, 12], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ // Headline
+ const titleProgress = spring({
+ fps,
+ frame: Math.max(0, frame - 8),
+ config: { damping: 14, stiffness: 100, mass: 0.5 },
+ from: 0,
+ to: 1,
+ });
+ const titleY = interpolate(titleProgress, [0, 1], [24, 0]);
+ const titleOpacity = interpolate(titleProgress, [0, 0.4], [0, 1], {
+ extrapolateRight: "clamp",
+ });
+
+ // Code card container
+ const cardProgress = spring({
+ fps,
+ frame: Math.max(0, frame - 90),
+ config: { damping: 16, stiffness: 80, mass: 0.6 },
+ from: 0,
+ to: 1,
+ });
+ const cardOpacity = interpolate(cardProgress, [0, 0.5], [0, 1], {
+ extrapolateRight: "clamp",
+ });
+ const cardY = interpolate(cardProgress, [0, 1], [20, 0]);
+
+ // Tagline
+ const taglineOpacity = interpolate(frame, [168, 178], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ return (
+
+ {label}
+
+
+ {desc}
+
+
+ Error Handling
+
+
+ {/* Headline */}
+
+ Panic-safe.
+ Retry-smart.
+
+
+ {/* Retry flow */}
+
+ {ATTEMPTS.map((a, i) => (
+
+
+ ))}
+
+
+ {/* Code card */}
+
+ {FEATURES.map((f) => (
+
+
+ {/* Tagline */}
+
+ "No crash, no lost work — just automatic recovery."
+
+
+ {/* Wordmark — 120px white */}
+
+
+ Apalis
+
+
+ {/* Line 2 — Cycling phrase */}
+
+ {/* Exiting phrase */}
+ {showExit && (
+
+
+ {/* Line 3 — "with confidence" */}
+
+ {prev.text}
+
+ )}
+ {/* Entering phrase */}
+
+ {current.text}
+
+
+ with confidence
+
+
+ {children}
+
+);
+
+export const HookScene: React.FC = () => {
+ const frame = useCurrentFrame();
+
+ // Shake animation for error badge
+ const shakeOffset =
+ frame >= 65 && frame < 82
+ ? interpolate(
+ (frame - 65) % 8,
+ [0, 2, 4, 6, 8],
+ [0, -6, 6, -3, 0],
+ { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+ )
+ : 0;
+
+ // Blinking cursor
+ const cursorOpacity =
+ frame >= 80 ? (Math.floor((frame - 80) / 15) % 2 === 0 ? 1 : 0) : 0;
+
+ // Spinner rotations
+ const spinner2Rotation = frame >= 25 ? (frame - 25) * 9 : 0;
+ const spinner3Rotation = frame >= 40 ? (frame - 40) * 9 : 0;
+
+ // Caption
+ const captionOpacity = fadeIn(frame, 90, 16);
+ const captionY = slideUp(frame, 90, 16);
+
+ // Panel fade
+ const panelOpacity = fadeIn(frame, 0, 10);
+
+ return (
+
+ {/* Traffic-light dots */}
+
+ ▶
+ POST /api/orders
+ 200 OK · 3ms
+
+
+ {/* Line 2 — frame 25 */}
+
+ ▶ scheduling email delivery...
+
+ ⟳
+
+
+
+ {/* Line 3 — frame 40 */}
+
+ ▶ generating invoice PDF...
+
+ ⟳
+
+
+
+ {/* Line 4 — frame 65 — error badge with shake */}
+
+ 500 Internal Server Error
+
+
+
+
+ {/* ── Caption ── */}
+
+
+
+
+
+
+ {/* Line 1 — frame 10 */}
+
+
+ ✕ timeout 30s — job failed silently
+
+
+
+ {/* Line 5 — frame 80 */}
+
+ You've built the API. Orders are flying in. But somewhere behind the
+ scenes… things are quietly breaking.
+
+
+
+ );
+};
+
+// ══════════════════════════════════════════════════════════════════════════════
+// ACT 1 — Hub overview (localFrame = frame, peak 10–100)
+// ══════════════════════════════════════════════════════════════════════════════
+
+// Positions in 1920×1080 space
+const HUB_CX = 960;
+const HUB_CY = 620;
+const HUB_NODE_HALF_W = 70; // node box half-width
+const HUB_NODE_HALF_H = 78; // node box half-height (logo + label)
+const HUB_CENTER_HALF_W = 90;
+const HUB_CENTER_HALF_H = 44;
+
+type HubNodeData = {
+ id: string;
+ label: string;
+ logo: React.ReactNode;
+ color: string;
+ x: number;
+ y: number;
+ startLocal: number;
+};
+
+const HUB_NODES: HubNodeData[] = [
+ { id: "tracing", label: "Tracing", logo:
+ {eyebrow}
+
+
+ {headline}
+
+
+
+
+ {/* SVG overlay for connecting lines */}
+
+
+ {/* Center Apalis node */}
+
+ Integrations
+
+
+ Observe
+ everything.
+
+
+
+ apalis
+
+
+
+ {/* Integration nodes */}
+ {HUB_NODES.map((node) => {
+ const e = ent(localFrame, node.startLocal, fps);
+ return (
+
+ {node.logo}
+
+ );
+ })}
+
+ {/* Tagline */}
+
+ {node.label}
+
+
+ Composable Tower middleware layers — add what you need.
+
+
+ {tokens.map((t, i) => {t.text})}
+
+ );
+};
+
+type CapturePill = { label: string; color: string; startLocal: number };
+
+const Pill: React.FC
+ {label}
+
+ );
+};
+
+// ── Helper to build a WorkerBuilder snippet ───────────────────────────────────
+type LayerLine = { tokens: Token[] };
+
+function builderSnippet(layers: LayerLine[]): SnippetLineData[] {
+ const op = (t: string): Token => ({ text: t, color: "rgba(255,255,255,0.32)" });
+ const ty = (t: string): Token => ({ text: t, color: "#60a5fa" });
+ const fn_ = (t: string): Token => ({ text: t, color: "#1d9e75" });
+ const str = (t: string): Token => ({ text: t, color: "#f97316" });
+ const plain = (t: string): Token => ({ text: t, color: "rgba(255,255,255,0.75)" });
+
+ const lines: SnippetLineData[] = [
+ { tokens: [ty("WorkerBuilder"), op("::"), fn_("new"), op("("), str('"worker"'), op(")")], startLocal: 22 },
+ { tokens: [plain(" ."), fn_("backend"), op("("), plain("backend"), op(")")], startLocal: 34 },
+ ...layers.map((l, i) => ({ tokens: l.tokens, startLocal: 46 + i * 13 })),
+ { tokens: [plain(" ."), fn_("build"), op("("), plain("handler"), op(")")], startLocal: 46 + layers.length * 13 },
+ ];
+ return lines;
+}
+
+// ── ACT 2 — Tracing ──────────────────────────────────────────────────────────
+
+const TRACING_LINES = builderSnippet([
+ { tokens: [
+ { text: " .", color: "rgba(255,255,255,0.75)" },
+ { text: "layer", color: "rgba(255,255,255,0.75)" },
+ { text: "(", color: "rgba(255,255,255,0.32)" },
+ { text: "TraceLayer", color: "#60a5fa" },
+ { text: "::", color: "rgba(255,255,255,0.32)" },
+ { text: "new", color: "#1d9e75" },
+ { text: "()", color: "rgba(255,255,255,0.32)" },
+ ]},
+ { tokens: [
+ { text: " .make_span_with(", color: "rgba(255,255,255,0.32)" },
+ { text: "ContextualTaskSpan", color: "#a78bfa" },
+ { text: "::new()))", color: "rgba(255,255,255,0.32)" },
+ ]},
+]);
+
+const TRACING_PILLS: CapturePill[] = [
+ { label: "task_id", color: "#5dcaa5", startLocal: 70 },
+ { label: "attempt", color: "#5dcaa5", startLocal: 82 },
+ { label: "queue_name", color: "#5dcaa5", startLocal: 94 },
+ { label: "W3C TraceContext", color: "#60a5fa", startLocal: 106 },
+];
+
+const Act2: React.FC<{ localFrame: number; fps: number; opacity: number }> = ({
+ localFrame, fps, opacity,
+}) => (
+
+
+
+ {/* Code card */}
+
+ {logo}
+
+
+ {eyebrow}
+
+ { const e2 = ent(localFrame, 10, fps); return { opacity: e2.opacity, transform: `translateY(${e2.y}px)` }; })(),
+ fontSize: 48,
+ fontWeight: 800,
+ textAlign: "center",
+ lineHeight: 1.2,
+ letterSpacing: "-1px",
+ userSelect: "none",
+ }}>
+ {headline}
+
+
+
+
+ {pillsLabel}
+
+
+ {pills.map((p) => (
+
+
+ {line.map((tok, j) =>
+ tok.hl ? (
+
+ {tok.text}
+
+ ) : (
+ {tok.text}
+ )
+ )}
+
+ );
+}
+
+// ── Scene ─────────────────────────────────────────────────────────────────────
+
+export const IntroApalisScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ // Wordmark
+ const wordmarkScale = spring({
+ fps,
+ frame: Math.max(0, frame - 5),
+ config: { damping: 14, stiffness: 100, mass: 0.5 },
+ from: 0.4,
+ to: 1,
+ });
+ const wordmarkOpacity = interpolate(frame, [5, 20], [0, 1], cl);
+
+ // Tagline
+ const taglineOpacity = interpolate(frame, [12, 26], [0, 1], cl);
+
+ // Current active snippet index (for progress dots)
+ const activeIdx =
+ frame < 90 ? 0 :
+ frame < 165 ? 1 :
+ frame < 240 ? 2 :
+ frame < 310 ? 3 : 4;
+
+ return (
+
+
+ {/* Wordmark */}
+
+
+ {/* ── Code area: snippet title + code block ── */}
+
+ Apalis
+
+
+ {/* Tagline */}
+
+ Process background tasks with confidence
+
+
+ {/* Progress dots */}
+
+ {SNIPPETS.map((s, i) => (
+
+ ))}
+
+
+ {SNIPPETS.map((snippet, idx) => {
+ const op = snippetOpacity(frame, snippet.window);
+ if (op <= 0) return null;
+ const y = snippetY(frame, snippet.window);
+
+ return (
+
+
+ {/* Snippet label + title */}
+
+ {snippet.lines.map((line, i) => renderLine(line, i))}
+
+
+ );
+ })}
+
+ {/* Spacer to hold layout height (tallest snippet = 16 lines) */}
+
+
+
+ {/* Code block */}
+
+ {snippet.label}
+
+
+ {snippet.title}
+
+
+
+ {Array.from({ length: 16 }).map((_, i) => (
+
+
+ {"x"}
+ ))}
+
+ {/* Icon box */}
+
+ );
+};
+
+// ── Middleware badge ──────────────────────────────────────────────────────────
+const MiddlewareBadge: React.FC<{
+ label: string;
+ startFrame: number;
+ frame: number;
+ fps: number;
+}> = ({ label, startFrame, frame, fps }) => {
+ const progress = spring({
+ fps,
+ frame: Math.max(0, frame - startFrame),
+ config: { damping: 14, stiffness: 120, mass: 0.5 },
+ from: 0,
+ to: 1,
+ });
+ const translateY = interpolate(progress, [0, 1], [24, 0]);
+ const opacity = interpolate(progress, [0, 0.4], [0, 1], { extrapolateRight: "clamp" });
+
+ return (
+
+ {icon}
+
+
+ {/* Labels */}
+
+
+
+ {title}
+
+
+ {label}
+
+
+ {label}
+
+ );
+};
+
+// ── Flowing dashed arrow ──────────────────────────────────────────────────────
+const FlowArrow: React.FC<{ frame: number; visible: boolean }> = ({ frame, visible }) => {
+ if (!visible) return null;
+ const DASH = 16;
+ const GAP = 8;
+ const offset = -((frame * 2) % (DASH + GAP));
+
+ return (
+
+ );
+};
+
+// ── Scene ─────────────────────────────────────────────────────────────────────
+export const PipelineScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const arrowVisible = (nodeStartFrame: number) => frame > nodeStartFrame + 15;
+
+ return (
+
+ {NODES.map((node, i) => (
+
+
+ ))}
+
+
+ {/* Middleware badges */}
+
+ {MIDDLEWARE.map((m) => (
+
+
+ {/* Icon */}
+
+ );
+};
+
+export const ProblemScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ // Request wall
+ const wallOpacity = interpolate(frame, [50, 62], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+ const wallY = interpolate(frame, [50, 62], [20, 0], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ // Quote
+ const quoteOpacity = interpolate(frame, [70, 82], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+ const quoteY = interpolate(frame, [70, 82], [12, 0], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ return (
+
+ 
+
+
+ {/* Label + status */}
+
+
+
+ {label}
+
+
+ {status}
+
+
+ {CARDS.map((c) => (
+
+
+ {/* Request wall */}
+
+
+
+ {/* Quote */}
+
+
+
+ Request lifecycle wall
+
+
+ Too slow · Too risky · No retry
+
+
+ 500
+
+
+ "These tasks don't belong in your request lifecycle — they're too slow,
+ too risky, and too important to just hope they work."
+
+
+ {/* Icon container */}
+
+ );
+};
+
+// ─── Title line helper ─────────────────────────────────────────────────────
+const TitleLine: React.FC<{
+ children: React.ReactNode;
+ startFrame: number;
+ fps: number;
+ frame: number;
+}> = ({ children, startFrame, fps, frame }) => {
+ const progress = spring({
+ fps,
+ frame: Math.max(0, frame - startFrame),
+ config: { damping: 14, stiffness: 120, mass: 0.5 },
+ from: 0,
+ to: 1,
+ });
+ const translateY = interpolate(progress, [0, 1], [24, 0]);
+ const opacity = interpolate(progress, [0, 0.3], [0, 1], {
+ extrapolateRight: "clamp",
+ });
+ return (
+
+
+
+ {/* Label */}
+
+ {name}
+
+
+ {children}
+
+ );
+};
+
+// ─── Scene ─────────────────────────────────────────────────────────────────
+export const TitleScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const eyebrowOpacity = interpolate(frame, [0, 12], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ const dividerReveal = interpolate(frame, [28, 48], [0, LINE_W], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ const subtitleOpacity = interpolate(frame, [36, 50], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+ const subtitleY = interpolate(frame, [36, 50], [12, 0], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ return (
+
+
+
+ {/* Title */}
+
+
+
+ What is Apalis
+ ,
+
+
+ and When Should You Use It?
+
+
+
+ {/* Dashed divider */}
+
+
+ {/* Subtitle */}
+
+ Background job processing for Rust
+
+
+ {/* Icon container */}
+
+ );
+};
+
+// ── Scene ─────────────────────────────────────────────────────────────────────
+export const UseCasesScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const headingProgress = spring({
+ fps,
+ frame: Math.max(0, frame),
+ config: { damping: 14, stiffness: 100, mass: 0.5 },
+ from: 0,
+ to: 1,
+ });
+ const headingOpacity = interpolate(headingProgress, [0, 0.4], [0, 1], {
+ extrapolateRight: "clamp",
+ });
+ const headingY = interpolate(headingProgress, [0, 1], [16, 0]);
+
+ return (
+
+
+
+
+ {/* Text */}
+
+
+
+ {title}
+
+ {subtitle ? (
+
+ {subtitle}
+
+ ) : null}
+
+ Use
+ Apalis
+ when you need to…
+
+
+ {/* Card grid — 2 + 2 + 1 */}
+
+ {/* Row 1 */}
+
+
+
+ {/* Row 2 */}
+
+
+ {/* Full-width row 3 */}
+
+
+
+ {label}
+
+ );
+};
+
+export const WhoItsForScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ // "Built for Rust" label
+ const labelOpacity = interpolate(frame, [0, 12], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ // Main title
+ const titleProgress = spring({
+ fps,
+ frame: Math.max(0, frame - 8),
+ config: { damping: 14, stiffness: 100, mass: 0.5 },
+ from: 0,
+ to: 1,
+ });
+ const titleY = interpolate(titleProgress, [0, 1], [28, 0]);
+ const titleOpacity = interpolate(titleProgress, [0, 0.4], [0, 1], {
+ extrapolateRight: "clamp",
+ });
+
+ // Quote
+ const quoteOpacity = interpolate(frame, [86, 100], [0, 1], {
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+
+ return (
+
+ Built for Rust
+
+
+ {/* Title */}
+
+
+
+ {/* Framework pills */}
+ No macros. No boilerplate.
+ Just async functions doing real work.
+
+ {PILLS.map((p) => (
+
+
+ {/* Quote */}
+
+ "If you're building in Rust, Apalis fits right in."
+
+
+
+ );
+};
+
+// ── Animated dashed horizontal arrow ─────────────────────────────────────────
+const DashArrow: React.FC<{ localFrame: number; startAt: number }> = ({
+ localFrame,
+ startAt,
+}) => {
+ const opacity = interpolate(localFrame, [startAt, startAt + 12], [0, 0.85], cl);
+ if (opacity === 0) return null;
+ const DASH = 14,
+ GAP = 7;
+ const offset = -((localFrame * 2) % (DASH + GAP));
+ return (
+
+ );
+};
+
+// ══════════════════════════════════════════════════════════════════════════════
+// ACT 1 — Sequential Workflows (localFrame = frame, 0–220)
+// Shows a live pipeline: Input → and_then → filter_map → and_then → Done
+// ══════════════════════════════════════════════════════════════════════════════
+
+const PIPELINE: Array<{
+ label: string;
+ sub: string;
+ typeNote: string;
+ color: string;
+ startAt: number;
+ isEdge?: boolean;
+}> = [
+ {
+ label: "10",
+ sub: "start value",
+ typeNote: "usize",
+ color: "rgba(255,255,255,0.55)",
+ startAt: 28,
+ isEdge: true,
+ },
+ {
+ label: ".and_then()",
+ sub: "collect into Vec",
+ typeNote: "usize → Vec
+ {eyebrow}
+
+
+ {headline}
+
+
+ {PIPELINE.map((step, i) => {
+ const e = ent(localFrame, step.startAt, fps);
+ return (
+
+
+ );
+ })}
+
+
+
+
+ {i < PIPELINE.length - 1 && (
+
+ {step.label}
+
+
+ {step.sub}
+
+
+ {step.typeNote}
+
+
+ Each step receives and transforms the previous output —{" "}
+
+ type-checked at compile time
+
+ .
+
+
+ {COMBINATORS.map((c) => {
+ const e = ent(localFrame, c.startAt, fps);
+ return (
+
+
+
+ );
+ })}
+
+ .{c.name}()
+
+
+ {c.input}
+
+
+ {c.purpose}
+
+
+ {text}
+
+ );
+ const sub = (text: string) => (
+ {text}
+ );
+
+ return (
+
+ {/* SVG arrow layer */}
+
+
+ {/* Input node */}
+
+ );
+};
+
+const Act3: React.FC<{ localFrame: number; fps: number; opacity: number }> = ({
+ localFrame,
+ fps,
+ opacity,
+}) => {
+ const taglineOpacity = interpolate(localFrame, [114, 132], [0, 1], cl);
+ return (
+
+ {label("u32 input", "rgba(255,255,255,0.6)")}
+ {sub("42, 43, 44")}
+
+
+ {/* Parallel nodes */}
+
+ {label("get_name()", "#1d9e75")}
+ {sub("→ String")}
+
+
+ {label("get_age()", "#60a5fa")}
+ {sub("→ usize")}
+
+
+ {label("get_address()", "#a78bfa")}
+ {sub("→ usize")}
+
+
+ {/* Collector node */}
+
+ {label("collector()", "#f97316")}
+ {sub("(String, usize, usize) → usize")}
+
+
+ Independent nodes run{" "}
+
+ concurrently
+
+ . Dependent nodes wait for all inputs to complete.
+
+
+ {/* Left: validate() + DOT graph */}
+
+
+ {/* validate() */}
+
+
+ {/* Right: when to use */}
+
+
+
+ {/* DOT output */}
+
+ dag_flow.validate()?
+
+
+ Checks the graph is acyclic, all dependencies reference registered
+ nodes, and valid entry points exist.
+
+
+
+
+ DOT output · Graphviz
+
+
+ {DOT_GRAPH}
+
+
+ {/* Sequential */}
+
+
+
+
+ {/* DAG */}
+
+ Use Sequential when…
+
+ {SEQ_WHEN.map((item, i) => (
+
+ · {item}
+
+ ))}
+
+
+
+ Use DAG when…
+
+ {DAG_WHEN.map((item, i) => (
+
+ · {item}
+
+ ))}
+