/**
* EVENT LOOP ORBIT
* -----------------------------------------------------------------------------
* Blocking vs non-blocking I/O, told as an orbit. Four requests are scheduled by
* a real 12-line scheduler (not hand-placed keyframes), so the sync lane and the
* async lane are guaranteed to be arithmetically honest on screen.
*
* Techniques worth stealing:
* - `schedule()` returns start/end milliseconds; every card, ring arc and clock
* reads from that one source of truth.
* - Pending promises ride a polar orbit: angle = base + elapsed * speed.
* - The ring progress is an SVG circle with strokeDasharray = circumference.
*
* Beat sheet (900 frames @ 30fps = 30s, seamless loop)
* Hook 0-65 one blocking call freezes the whole thread
* Setup 66-239 sync lane: four requests, strictly one after another
* Build 240-464 async lane: all four fire at once and start orbiting
* Payoff 465-659 they resolve out of order, fastest first
* Detail 660-809 4.8s vs 2.1s, same CPU, same code path
* Loop 810-899 the thread parks and the hook returns
*/
import React from 'react'
import {
AbsoluteFill,
Composition,
Easing,
interpolate,
registerRoot,
useCurrentFrame,
} from 'remotion'
export const WIDTH = 1080
export const HEIGHT = 1920
export const FPS = 30
export const DURATION_IN_FRAMES = 900
const BG = '#070B14'
const PANEL = 'rgba(255,255,255,0.035)'
const WHITE = '#EAF2FA'
const MUTED = '#6B7C93'
const CYAN = '#4CC9F0'
const AMBER = '#FFB703'
const RED = '#EF476F'
const GREEN = '#06D6A0'
const VIOLET = '#A78BFA'
const SANS = 'Inter, "Helvetica Neue", Arial, sans-serif'
const MONO = 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace'
const CLAMP = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const
const progress = (frame: number, from: number, to: number, easing = Easing.linear) =>
interpolate(frame, [from, to], [0, 1], { ...CLAMP, easing })
/* ----------------------------------------------------------------- scheduler */
type Request = { label: string; ms: number; color: string }
const REQUESTS: Request[] = [
{ label: 'GET /user', ms: 1200, color: CYAN },
{ label: 'GET /cart', ms: 800, color: AMBER },
{ label: 'GET /feed', ms: 2100, color: VIOLET },
{ label: 'GET /ads', ms: 700, color: GREEN },
]
type Slot = { start: number; end: number }
/** Sequential: each request waits for the previous one. Parallel: all at zero. */
function schedule(mode: 'sync' | 'async'): { slots: Slot[]; total: number } {
if (mode === 'async') {
const slots = REQUESTS.map((request) => ({ start: 0, end: request.ms }))
return { slots, total: Math.max(...slots.map((slot) => slot.end)) }
}
let cursor = 0
const slots = REQUESTS.map((request) => {
const slot = { start: cursor, end: cursor + request.ms }
cursor = slot.end
return slot
})
return { slots, total: cursor }
}
const SYNC = schedule('sync')
const ASYNC = schedule('async')
const formatSeconds = (ms: number) => `${(ms / 1000).toFixed(2)}s`
/* -------------------------------------------------------------------- pieces */
const Backdrop: React.FC<{ frame: number; accent: string }> = ({ frame, accent }) => (
)
const Header: React.FC<{ title: string; note: string; accent: string; local: number }> = ({
title,
note,
accent,
local,
}) => {
const enter = progress(local, 0, 14, Easing.out(Easing.cubic))
return (
<>
{title}
{note}
)
}
const RequestCard: React.FC<{
request: Request
slot: Slot
elapsed: number
index: number
top: number
appear: number
}> = ({ request, slot, elapsed, index, top, appear }) => {
const state = elapsed >= slot.end ? 'done' : elapsed >= slot.start ? 'running' : 'queued'
const fill =
state === 'queued'
? 0
: Math.min(1, (elapsed - slot.start) / Math.max(1, slot.end - slot.start))
const color = state === 'queued' ? MUTED : request.color
return (
{request.label}
{state === 'done' ? `✓ ${formatSeconds(slot.end)}` : state === 'running' ? '…' : 'queued'}
{`t+${formatSeconds(slot.start)} → ${formatSeconds(slot.end)}`}
)
}
const OrbitRing: React.FC<{ elapsed: number; total: number; frame: number }> = ({
elapsed,
total,
frame,
}) => {
const centreX = WIDTH / 2
const centreY = 1108
const radius = 196
const circumference = 2 * Math.PI * radius
const done = Math.min(1, elapsed / total)
return (
<>
EVENT LOOP
{formatSeconds(Math.min(elapsed, total))}
{REQUESTS.map((request, index) => {
const slot = ASYNC.slots[index]
const resolved = elapsed >= slot.end
const angle =
-Math.PI / 2 + index * (Math.PI / 2) + (frame * 0.026) * (resolved ? 0.2 : 1)
const orbitRadius = resolved ? 92 : radius
const x = centreX + Math.cos(angle) * orbitRadius
const y = centreY + Math.sin(angle) * orbitRadius
const size = resolved ? 30 : 44
return (
)
})}
)
}
const BlockedHook: React.FC<{ frame: number }> = ({ frame }) => {
const shake = frame > 20 ? Math.sin(frame * 1.5) * (frame > 46 ? 0 : 4) : 0
const fade = 1 - progress(frame, 52, 66, Easing.in(Easing.cubic))
return (
ONE LINE
FROZE THE APP
const data = fetchSync(url)
UI THREAD · NOT RESPONDING
)
}
const Verdict: React.FC<{ frame: number }> = ({ frame }) => {
const rows = [
{ label: 'SYNCHRONOUS', ms: SYNC.total, color: RED },
{ label: 'ASYNCHRONOUS', ms: ASYNC.total, color: GREEN },
]
const longest = Math.max(...rows.map((row) => row.ms))
return (
<>
{rows.map((row, index) => {
const grow = progress(frame, 690 + index * 26, 760 + index * 26, Easing.out(Easing.cubic))
const width = 760 * (row.ms / longest) * grow
return (
{row.label}
{formatSeconds(row.ms)}
)
})}
Same CPU. Same requests.{' '}
{`${(SYNC.total / ASYNC.total).toFixed(1)}x faster.`}
)
}
const Guides: React.FC = () => (
)
/* ---------------------------------------------------------------- composition */
export const EventLoopOrbit: React.FC<{ showGuides?: boolean }> = ({ showGuides = false }) => {
const frame = useCurrentFrame()
const syncElapsed = interpolate(frame, [80, 232], [0, SYNC.total], CLAMP)
const asyncElapsed = interpolate(frame, [258, 640], [0, ASYNC.total * 1.02], CLAMP)
const accent =
frame < 66 ? RED : frame < 240 ? AMBER : frame < 660 ? GREEN : frame < 810 ? CYAN : VIOLET
const loopFade = progress(frame, 886, 899, Easing.in(Easing.quad))
return (
{frame < 66 ? : null}
{frame >= 66 && frame < 240 ? (
<>
{REQUESTS.map((request, index) => (
))}
{formatSeconds(syncElapsed)}
TOTAL WALL CLOCK
) : null}
{frame >= 240 && frame < 660 ? (
<>
{REQUESTS.map((request, index) => {
const resolved = asyncElapsed >= ASYNC.slots[index].end
return (
{request.label}
{resolved ? formatSeconds(ASYNC.slots[index].end) : 'pending'}
)
})}
) : null}
{frame >= 660 && frame < 810 ? (
<>
) : null}
{frame >= 810 ? (
DON’T BLOCK
THE LOOP
) : null}
{showGuides ? : null}
)
}
export const Root: React.FC = () => (
)
registerRoot(Root)
export default EventLoopOrbit