What if the Sun vanished explainer

<inputs>
Ask me for: one topic as a "what if" question (default: "What if the Sun vanished?"), the length (default 30 seconds), and whether I have an ElevenLabs key (if not, use a free local voice).
</inputs>

<direction>
A Kurzgesagt-style animated explainer at 1920x1080, 30fps, drawn entirely in code: one 2D canvas plus one WebGL canvas for planets.
Space: a vertical gradient #081d2c to #102348, five huge parallax nebula blobs (teal rgb 24,150,160 at 20%, blue 40,95,195 at 16%, coral 220,95,110 at 10%, indigo 60,70,175 at 15%), three star layers at parallax depths .12/.35/.6 that twinkle, 40% of the near stars drawn as 4-point sparkles.
The Sun: radius 300px, half off the left edge. A radial gradient #fff7dc to #ffc857 to #ff8f4a with an offset highlight, additive halo rings at 1.23/1.48/1.76/2.1x the radius, 18 faint rotating ray wedges, 28 drifting glowing granules on its surface.
Earth: an orthographic sphere in a fragment shader, 4x supersampled, from a 2048x1024 map painted from longitude/latitude polygons: land #5fc47a, forest #48ad6b, desert #f5c75f, rainforest #3a9d62, ice #f1f8ff, ocean gradient #4dc7eb to #1a66b8, white capsule clouds. Tilt .26 rad, spin .55 degrees per second. Day/night uses smoothstep(-.12, .24, N·L) with the light direction recomputed from Sun to Earth every frame. Navy night side with ~380 warm city lights, a coral band on the terminator, a cyan rim, ocean specular, an atmosphere halo that is stronger on the lit side.
A small astronaut mascot (~180px) built from rounded rectangles: suit #f3f7fb, orange #ff8f4a boots, a visor gradient #1f5a73 to #0a1c2c with glowing cyan eyes that look at whatever matters, a blinking antenna light, an idle bob, squash and stretch on every pose.
Type: Fredoka 600/700 only. Captions in caps with 3-6px letter spacing in teal #8fd8e6, gold #ffd98a or white, sitting in rounded pills of rgb(6,20,40) at 62%. Every line of text rises 1.3x its own height through a clip on an ease-out-quint.
Finish: a vignette to rgba(4,4,20,.45) and a 6% film grain re-randomized 24 times per second.
Banned: outlines, flares or loops on the Sun's edge, static infographic strips, full stops in on-screen text, text that fades in whole, AI images or AI video, Kurzgesagt's own characters, bird or music.
</direction>

<structure>
30 seconds, every line of narration gets a camera move or a transformation, nothing ever holds still.
Tight on the Sun at 2.25x (0s) → on the word "vanished" it swells 6% for 0.22s, collapses in 0.33s, then a white flash and a shockwave ring (1s) → pull back to 1x revealing Earth still lit and the astronaut staring at the empty spot (1.6-3s) → on "eight" an 8:20 countdown slams in from 1.7x to 1x and starts ticking, a "LAST LIGHT" label rides the edge of the growing dark disc (3.2s) → dive to 2.3x on Earth with light streaks flowing in (5.6s) → on "you" a YOU pin drops (7s) → on "left" a photon lands on the pin with "THIS LIGHT LEFT THE SUN / 8 MIN 20 SEC AGO" (7.5s) → on "play" the pin morphs into a play button, "YOU PRESSED PLAY / 15 SEC AGO" (8.8s) → one pull-back from 2.4x to a 0.3x orbit view, "LAST LIGHT" and "GRAVITY" riding the ring (9.6-12.5s) → on "nothing" a dotted circle at the empty centre (13.4s) → on "hits" the darkness sweeps Earth in 0.7s, city lights pop on, the countdown turns gold at 0:00 (15.8s) → on "black" the background fades almost to black (17.4s) → Jupiter appears, "STILL SHINING FOR 1 HOUR+" (17.9s) → zoom out, a dashed tangent line, "30 KM/S" as Earth flies straight off (20.8s) → a thermometer counts 15 to -70°C while frost grows from the poles (22.8s) → a 0.8s rewind on a separate story clock (24.3s) → sunglasses drop onto the astronaut (25.2s) → a photon tagged "8:20 OLD", then the title (27.7s).
For any other topic, keep the same shape: the event happens on its word, pull back to show scale, dive in to make it personal ("you"), pull back out, the consequence with a live counter, an escalation, a funny beat with the mascot, a callback and the title.
</structure>

<build>
1. One HTML file. Every frame is a pure function of time: https://window.seek/(t) draws frame t. No timers, no CSS animation.
2. Camera moves on easeInOutCubic, zoom is interpolated in log space, every pop is a damped spring (damping .42-.5, frequency 12-16).
3. Voice: ElevenLabs eleven_v4 with a designed voice (calm, warm, curious male, late 30s, crisp, light neutral European English), stability .5, similarity .75, generated with timestamps. Without a key, use kokoro-onnx locally and get word times with faster-whisper. Every animation event fires on its word. About 165 words per minute, 0.24s between sentences, a 0.36s beat before the big reveal.
4. The darkness front: any pixel within the front's radius from the Sun turns to night with a 30px soft edge. The front moves at ~47px/s and ramps to 700px/s near Earth.
5. Keep two clocks: ambient time for twinkle, spin and bob, and a separate story clock for events, so a rewind stays consistent.
6. Render with Playwright in headless Edge with the GPU: seek every frame at 30fps and blend 2 subframes (shutter 0.6) for motion blur, then encode with libx264 at CRF 16 for the master and CRF 20 for delivery.
7. Sound: a calm royalty-free space music bed 7dB under the voice, timed so its natural ending lands on the title, swelling 5dB under the title. One downloaded royalty-free sound effect per event kind (collapse, impact, pull-back whoosh, countdown tick, dive, pin tap, photon land, play click, light hit, reveal, frost, rewind), each peak-aligned to its frame and 4-10dB under the voice. Master with gain plus a limiter to -14 LUFS, -2.2dB true peak.
</build>

<gotchas>
Make the WebGL globe canvas at least 2 x radius x zoom x 1.18 pixels or the sphere clips flat in close-ups. Never draw prominences on the Sun's edge, they read as white hooks. Never pad the voice to fit the visuals, tighten the read instead. Speed the darkness front up near Earth or it takes 13 seconds to cross the planet. Show me a contact sheet of every beat before rendering.
</gotchas>

<start>
Ask me the inputs, write the narration with the beat each word triggers, show it to me, then build and render the video.
</start>

Source: the original post. Kept in its original language, unedited.

Tools the creator mentioned

More explainers

• 0:32

  Interactive camera focus lens lab

  3.6M views

• 0:39

  Tesla Roadster flight explainer animation

  2.5M views

• 0:35

  Interactive Raptor 3 rocket engine explainer

  1.2M views

• 5:15

  AI documentary about superintelligence

  915.9K views

• 1:01

  Interactive Arduino learning app

  897.5K views

• 0:56

  Pixel art neural network training animation

  578.6K views

Related articles

• DeepLearning.AI Complete Course Guide: 120 Courses, Taught by the Authors Themselves — 6 Goal-Based Learning Paths

  DeepLearning.AI now has 120 courses — more than the previous eight major tech companies combined. What really sets it apart, though, is something no one else can offer: the courses are taught directly by the people who built the models and tools. This guide breaks down course selections across 6 goal-based learning paths.

• The Complete Map of Free AI Learning: 10 Official Platforms, $0 Total Cost

  Anthropic, OpenAI, Google, NVIDIA, Microsoft, AWS, Meta, IBM, DeepLearning.AI, Hugging Face — every official AI course from all 10 platforms is free. This is the master index: one comparison table + learning paths by role.

• Microsoft Learn AI Certifications: The Big Tech Company That Gives Out Certs Most Generously — One Skill, One Badge

  Microsoft is the most cert-friendly major tech company in the AI space — one skill gets you one certificate. The Microsoft Learn AI framework has four tiers, but most people only need the first two. This post breaks it down tier by tier, with direct official links and tips to avoid common pitfalls.

• Same Name, Different Game: Comparing Two SEO Audit Skills and Which to Use

  The Claude Code Skills ecosystem is growing fast — fast enough that naming collisions are starting to happen. Two skills both called seo-audit exist, and they take completely different approaches. Here's a side-by-side breakdown and recommendation.