Water Cycle

About this style

The idea that water circulates between sea, sky and land is ancient, but it became measured science in the 1670s, when Pierre Perrault and then Edme Mariotte showed that rain falling on the Seine basin was more than enough to feed the river. Edmond Halley soon added estimates of evaporation from the Mediterranean. Textbook diagrams of the cycle settled on a side view of one landscape, with sea, cloud, mountain, river and groundwater joined by arrows for evaporation, condensation, precipitation and runoff. Schools, museums and weather services still use that layout because it puts each process where it happens.

Make a 10-second illustrated explainer of the water cycle: one side-view landscape where every step happens in its real place, and one coral drop you can follow all the way round.

<inputs>
If I don't give you something, use the default and don't ask.
- Series: Tidewell Science, lesson 04 (fictional).
- Title: "The water cycle"
- Steps, each a title and one line: 1 Evaporation, "The sun warms the sea and water rises as vapor." · 2 Condensation, "Vapor cools into droplets that gather as cloud." · 3 Precipitation, "Heavy droplets fall as rain, and as snow up high." · 4 Runoff, "Rivers and groundwater carry it back to the sea."
- Closing line: "The same water, over and over."
- Length: 10 seconds.
</inputs>

<direction>
- Look: a clean textbook landscape in flat illustration: big simple shapes, three or four tones per object with hard edges between them, smooth vertical gradients only in the sky and the sea, and a static 2% paper grain over everything. Bright daylight from the first frame. Nothing is outlined except the process arrows.
- Palette: sky #BFE2F0 at the top to #F3F0E4 at the horizon; sun #FFC23D with two flat halo rings, #FFD97A and #FFEBB3; sea #2C86AE at the surface to #164F72 at depth, with a #8FD0E6 band along the shore; sand #E8D3A4; hills #93C46C, #74AD58 and #568F45; rock #8D90A6 with shadow faces #6B6E87; snow #FFFFFF with #DCE6F0 shadows; soil strata #C2915F, #A3754A and #82593A over bedrock #5E4636; groundwater #4FA3C8 at 55%; river #3C9AC6 with highlights #BFE8F7; cloud #FFFFFF with an underside darkening from #D5E3EC to #93A9BA; rain #3C8FC0; the drop coral #FF6A4B, the only warm accent besides the sun; text #17324A, secondary #4D667A.
- Landscape, in stage pixels: sea level at y 700. The sea fills x 0–960 and meets a beach at 960–1040; its cut face runs down to a sea floor sloping from y 740 at the beach to y 1000 at the left edge. Rolling hills rise from the beach into one mountain, peak at (1600, 330), lit from the upper left so its right faces sit in shadow, with a jagged snow cap above y 430. A river leaves a spring at (1500, 560), winds through the hills past a farmhouse and a row of pines, and widens to a mouth at (1000, 705). Under the land a cutaway shows the strata from the ground line down, with a groundwater band (y 820–870 under the mountain) sloping down to meet the sea floor. The sun sits at (860, 170), radius 56, its rings out to 100.
- Water moves like water. Vapor: wisps of small translucent white dots (2–5px, 30–70%) rising from the sea between x 520 and 900 at 70–100px/s on gently swaying paths, fading as they climb. Cloud: a union of 14–18 overlapping circles that gather from small puffs into one cumulus centered near (1300, 330), its top never above y 240; as it fattens, its underside darkens. Rain: short streaks (3 × 28px, slanting 8°) falling at 900px/s from the cloud's underside only, each leaving a small splash where it lands. Snow: 4px flakes settling on the peak at 60px/s. River: highlight dashes sliding downstream at 140px/s. Groundwater: faint chevrons drifting toward the sea at 30px/s. The sea surface carries two layers of low waves (amplitude 4px).
- The drop: a coral teardrop (24px tall) waits at the sea surface at (640, 700). It rises as a coral vapor dot among the wisps, rides into the cloud, falls as a coral raindrop beside the spring, then runs down the river and slips back into the sea. Behind it a coral dotted trail (4px dots, 12px apart) stays drawn, so by the end it traces the whole loop.
- Steps: four white cards (radius 16, 20px padding, 340px wide), each with a 44px #17324A disc holding the white step number beside the title in Lexend 600, 30px, and the line beneath in Lexend 400, 22px, secondary. Card 1 at x 120–460 from y 340; card 2 at x 1060–1400 from y 70; card 3 at x 1460–1800 from y 70; card 4 at x 1120–1460 from y 880, on the soil. Beside each process, a short curved arrow (#17324A, 5px, round caps, solid 18px head, 160–260px long): up from the sea beside the wisps, rightward into the cloud's left side, down from the cloud's underside, and along the soil just under the ground line toward the sea.
- Type: kicker "TIDEWELL SCIENCE · 04" in Lexend 600, 20px, tracked 0.14em, coral; title Lexend 700, 64px, #17324A, top-left at (120, 96); closing line Lexend 500, 30px, beneath the title.
- Easing: landscape layers rise 30px into place over 0.8s on cubic-bezier(0.16, 1, 0.3, 1); cards rise 16px and scale 0.94 → 1 as they fade in over 0.45s on cubic-bezier(0.22, 1, 0.36, 1), the number disc 80ms before the text; arrows draw by stroke-dashoffset over 0.7s on cubic-bezier(0.65, 0, 0.35, 1). Nothing bounces.
- Premium: every process in the place it really happens, water that moves like water, one drop to follow through an uncluttered landscape. Cheap: clip-art clouds, a ring of arrows over a stock scene, a smiling raindrop.
Banned: faces on the sun, clouds or drops; rainbows; lightning; glow or lens flares; outlines on the landscape; rain anywhere but under the cloud; water flowing uphill; a second accent color; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.2s: the landscape builds back to front: sky, sun and its rings, mountain, hills, beach, sea; the cutaway opens downward from the ground line to show the strata; the kicker and title rise in.
- 1.2–3.0s: evaporation. Wisps rise from the sea under the sun; the coral drop lifts off and climbs among them; card 1 and its arrow at 1.4s.
- 3.0–4.6s: condensation. Puffs drift together into a tall cumulus over the hills; the coral dot joins it and the underside darkens; card 2 and its arrow at 3.2s.
- 4.6–6.4s: precipitation. Rain falls on the hills and the mountain's flank, snow settles on the peak; the coral raindrop lands beside the spring; card 3 and its arrow at 4.8s.
- 6.4–8.2s: runoff. The river's highlights quicken, chevrons flow through the groundwater to the sea, and the coral dot runs down the river into the sea where it began; card 4 and its arrow at 6.6s; the rain thins and stops by 7.6s.
- 8.2–9.0s: the dotted trail closes its loop; the closing line rises in under the title.
- 9.0–10.0s: hold: only the waves and the river's highlights move, slowly.
For other lengths, stretch the four step beats equally; 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: inline SVG, setting attributes and transforms from seek; no other libraries (no three.js: this style is flat).
- Draw the grain once at load into a canvas laid over the SVG with mix-blend-mode: multiply.
- Every vapor dot, raindrop, flake, highlight and chevron has a seeded start time, speed and lifetime, so its position is a closed-form function of t; the drop follows one precomputed path sampled by arc length.
</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 vapor rises only over the sea, rain falls only from the cloud's underside, the river runs downhill into the sea, the coral drop is visible in every frame from 1.2s on, and no card covers the process it names or the drop's path. 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…