Solar Eclipse

About this style

A total solar eclipse happens when the Moon passes directly between the Sun and Earth and its dark inner shadow, the umbra, touches the ground, while the wider penumbra around it brings only a partial eclipse. The Sun is about 400 times wider than the Moon and about 400 times farther away, so the two discs look almost the same size in the sky. The path of totality is at most about 270 km wide, and inside it the sky darkens to dusk and the Sun's corona shows for a few minutes. Textbooks and planetariums explain it with deliberately not-to-scale diagrams of the two shadow cones.

Make a 10-second 3D explainer of a total solar eclipse: the Sun, Moon and Earth line up, the Moon's umbra and penumbra cones reach Earth, and a view from the ground goes dark into totality.

<inputs>
If I don't give you something, use the default and don't ask.
- Series: Thornwick Planetarium · Sky Notes (fictional).
- Title: "Anatomy of a total eclipse"
- Place: Kessra, a fictional town inside the path of totality.
- Captions: "The Moon passes between the Sun and Earth." · "Under the umbra the eclipse is total; under the penumbra, partial." · "In Kessra, day turns to dusk for 2 min 41 s."
- Clock: 10:58, when the inset opens, to 11:17, when totality begins.
- Length: 10 seconds.
</inputs>

<direction>
- Look: a planetarium diagram: real 3D bodies, crisp hairline geometry and calm labels, lit so every body reads clearly from the first frame. Background #070B1A with a soft #111A33 lift behind the bodies and a sparse seeded starfield (600 points, 1–2px, 40–80%).
- Palette: Sun core #FFF3D1 to limb #FFB347; Earth ocean #2D6CC4, polar caps #E8F0F8, graticule #A9CBF2 at 25%, atmosphere rim #8CC8FF; Moon #A7A49E with darker maria #77746F; umbra #04060D at 80%; penumbra #34467A at 28%; diagram lines #E9EEF8 at 60%; accent #FF8A3D for the town pin and the inset ring; labels #E9EEF8, secondary #93A0BD.
- Scene, deliberately not to scale and labelled so: Sun radius 2.0 at (−7, 0, 0); Moon radius 0.4 at the origin when aligned; Earth radius 1.2 at (2.5, 0, 0), so the umbra's tip, about 1.75 units behind the Moon, just reaches past Earth's near surface (1.3 units behind the Moon) as a dark spot about 0.2 units across inside a penumbra about 0.85 units in radius. Build the cones from the true tangents (the outer common tangents of Sun and Moon for the converging umbra, the inner ones for the diverging penumbra), drawn as 1.5px dashed lines from the Sun's limb to Earth, with translucent cone surfaces behind the Moon (depthWrite false) and slightly brighter edges.
- Earth is a diagram globe, not a map: ocean blue, polar caps, a faint 15° graticule, no continents, a Fresnel atmosphere rim. Its ShaderMaterial computes, per pixel, the fraction of the Sun's disc the Moon hides as seen from that surface point (the overlap of two discs from their angular radii and separation) and darkens the day side by it, so the umbra and penumbra on the globe always match the cones. The Moon is a sphere with maria and craters from a CanvasTexture generated in code; it travels a thin dashed orbit around Earth in the same plane, sliding into the Sun–Earth line and creeping on so the dark spot drifts across Earth's day side.
- Light: the Sun is an emissive sphere with a limb-darkening shader and a soft halo sprite (1.6 × its radius, 25%), plus a DirectionalLight from its direction at intensity 3.0. A HemisphereLight (#8FA8D8 over #0B1022, 0.35) keeps the night sides of Earth and Moon a readable deep blue, never black. ACESFilmic tone mapping, sRGB output.
- Camera: fov 32, about 14° above the orbital plane and turned 25° toward the Sun's side of square-on, so Earth shows mostly its day face and the cones read in perspective. At first the Sun is cropped by the left edge (its center just off-frame, its limb reaching about x 220), the Moon sits near x 1000 and Earth, about 380px across, near x 1400. From 4.6s it trucks and pulls back over 1.0s on easeInOutSine until Earth, now about 300px across, sits near x 820, making room for the inset. Nothing shakes.
- The view from Kessra: an accent pin on Earth, where the umbra's center will be at 7.4s, grows a leader that opens a circular inset 600px across at (1490, 560) in a 2px accent ring. Inside, a 2D canvas paints Kessra's sky over a low silhouette of fictional hills, rooftops, a water tower and trees: a limb-darkened Sun (radius 56px) and a slightly larger Moon (58px) whose center slides linearly toward the Sun's, so obscuration o is the true overlap of the two discs, 0.75 at 10:58 rising to 1 at 11:17. Sky brightness falls as 1 − o⁶, from day blue (#6FA8DC overhead, #BFD9EE at the horizon) to dusk #18213F with a 360° sunset glow on the horizon (#F29A5B into #6B4E7A), the silhouettes darkening with it. Before totality the Moon shows only where it covers the Sun. At totality it is a black disc and the corona fades in over 0.8s: about 240 seeded tapered streamers (0.5–2.5 Sun radii, longest near the solar equator) in #F4F1FF at 5–12%, a bright inner ring and four small pink prominences (#FF5C8A); two planets appear as steady points. "View from Kessra" sits above the inset in Space Grotesk 600, 24px; a readout below it in Space Mono 400, 22px ticks from "10:58 · 75% covered" to "11:17 · Totality".
- Type (HTML over the canvas): kicker "THORNWICK PLANETARIUM · SKY NOTES" in Space Grotesk 600, 20px, tracked 0.14em, accent; title Spectral 500, 64px, #E9EEF8, top-left at (120, 96); body labels (Sun, Moon, Earth, Umbra, Penumbra) in Space Grotesk 500, 22px, on 1px leaders; "Not to scale" in Space Grotesk 500, 20px, secondary, near the Sun; captions in Space Grotesk 500, 28px, at (120, 960), one at a time.
- Easing: bodies and labels fade up with a 10px rise over 0.5s on cubic-bezier(0.22, 1, 0.36, 1); the Moon and camera on easeInOutSine; the cones grow from the Moon toward Earth over 0.9s on cubic-bezier(0.65, 0, 0.35, 1).
- Safety and restraint: the sky darkens smoothly and never flashes; no diamond-ring burst, and average brightness inside the inset never changes by more than 20% within any 0.33s.
- Premium: geometry that is correct for its model, a shadow on the globe that matches its cones, and a ground view whose sky darkens the way a real eclipse does. Cheap: a black circle sliding over a yellow one, lens flares and a white flash.
Banned: claims of true scale, real continents or map data, lens flares, bloom over everything, white or full-frame flashes, a diamond-ring burst, black unlit night sides, a shadow spot that doesn't match the cones, faces on any body, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.2s: the Sun, Earth and Moon fade up in place, lit, the Moon well before alignment on its dashed orbit; the kicker and title rise in; the body labels attach.
- 1.2–3.0s: the Moon slides along its orbit into the Sun–Earth line; a dotted alignment line draws from the Sun through the Moon to Earth; caption 1.
- 3.0–4.6s: the tangent lines draw; the penumbra cone grows toward Earth, then the umbra inside it; their shadow falls onto the globe; the Umbra and Penumbra labels; caption 2.
- 4.6–5.6s: the camera trucks left; the Kessra pin appears in the shadow's path and its leader opens the inset, which scales up from the pin over 0.8s on cubic-bezier(0.22, 1, 0.36, 1), already showing a fat crescent Sun at 75%.
- 5.6–7.4s: the crescent thins; the inset's sky deepens and the horizon glow rises; on the globe the umbra spot creeps onto the pin.
- 7.4–8.4s: totality: the Moon covers the Sun, the corona fades in over 0.8s, two planets appear; the readout reaches "11:17 · Totality"; caption 3.
- 8.4–10.0s: hold: the corona stays still; only the stars twinkle, under 1 Hz.
For other lengths, stretch the partial phase in the inset; keep at least 1s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- The inset is its own 2D canvas inside a circular clip-path, repainted every seek.
- The Moon's position, the cone geometry, the camera and the obscuration are closed-form functions of t; the corona streamers and the starfield are generated once at load from a seeded PRNG.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check every body is clearly lit in the first frame, the umbra converges and the penumbra diverges from true tangents, the dark spot on the globe sits exactly where the umbra meets it and reaches the pin at 7.4s, the inset's sky darkens smoothly with no flash, the readout agrees with the overlap, and the inset clears the globe and the captions. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Blueprint Technical Drawing

Made by us

A cyanotype-blue engineering sheet that drafts itself: centerlines, compass-swept gears, hatching and dimension lines a…

Material Container Transform

Made by us

A recipe app demonstrates Material-style motion: a card expands into a full screen, tabs switch on a shared axis, a FAB…

Isometric Hairline

Made by us

A tidy isometric line-art explainer: constant 2px strokes, white faces and one vermilion accent as a parcel travels fro…

Flat Vector Science Explainer

Made by us

A bright, rounded science explainer on a deep-space backdrop: springy geometric shapes, two-tone shading and soft long…