Kids' science explainer — HTML/GSAP prompt (moon phases with a shadow disc)

<direction> An 8-second kids' science explainer as a single self-contained HTML page driven by GSAP (1280x720, 30fps, seek-driven). House style: near-black #0a0a0a background, panels #141414, borders #2a2a2a, text #ffffff/#c9c9c9, ONE accent #ff5c1a, Arial/Helvetica bold, no webfonts. One big moon, one shadow disc, 4 phases, kid-short sentences — and a simplification note on screen, because accuracy matters more with kids, not less. Shapes only: no photos, no mascots, no second colour palette. No gradients, no stock photos, no real brand logos, no lorem ipsum, no purple/blue tech gradient. </direction> <structure> 0.0-1.7s — Kicker "KIDS EDUCATION EXPLAINER — THE MOON". Title: "WHY DOES THE MOON CHANGE SHAPE?" The moon (light disc with crater circles) sits left, fully covered by the shadow disc: PHASE 1, NEW MOON — "The sun lights the side facing away from us." 1.7-3.6s — The shadow slides right until only a thin lit sliver remains on the left: PHASE 2, CRESCENT — "A sliver of the lit side peeks into view." 3.6-5.5s — Shadow covers exactly the right half: PHASE 3, HALF MOON — "We see exactly half of the lit side." 5.5-8.0s — Shadow leaves the disc entirely: PHASE 4, FULL MOON. The moral lands: "THE MOON NEVER CHANGES — ONLY OUR VIEW OF IT DOES.". Footer throughout: "SIMPLIFIED FOR KIDS — THE REAL CYCLE TAKES ABOUT A MONTH". </structure> <build> One paused GSAP timeline on window.__timelines["main"]. The shadow is a background-coloured disc inside the moon's overflow:hidden circle; phases are x positions (covered ≈ 0, crescent ≈ 60, half = radius, gone > diameter). Phase text cards crossfade on the right at each move. Craters are an inline SVG under the shadow layer. </build> <gotchas> - Get the geometry right before animating: a shadow at the wrong offset shows a gibbous moon labelled "crescent" (caught and fixed during authoring — the crescent offset must leave only ~20% lit). - The shadow disc must be the page background colour, not grey — grey reads as a second object, not as darkness. - Sentences stay under 12 words for the kids' formats; the phase name does the teaching, the sentence does the colour. </gotchas> Before you finish: step through the timeline at five points and fix anything that overlaps, clips the frame, or drifts off the beat grid.