Flat Vector Science Explainer

About this style

Flat vector explainers grew up with online video and motion-graphics tools: simple geometric shapes, saturated color and minimal detail that stay readable on a phone screen. The strongest work pairs a cute, rounded visual language with strict accuracy, so the charm earns attention and the precision earns trust. Science communicators, nonprofits and tech brands use the style to make complex ideas feel approachable.

<inputs>
You're making a flat vector science explainer. I may supply any of these; if I don't give you something, use the default and don't ask.
- Question: "Why do we have seasons?"
- Key idea: Earth's 23.4° tilt changes how steeply sunlight hits the ground.
- Closing line: "Same sun. Different angle."
- Palette: as below.
- Length: 10 seconds.
</inputs>

<direction>
Backdrop: radial gradient, #1B2B63 center to #0C1433 edges. Sun #FFC93C with a #FF8A3D rim; ocean #2E9BF0; land #45D07B; ice #EAF6FF; highlight #FF5C8A; secondary #3EE0D0; text #FFFFFF, muted #AFC0FF.
Shapes are geometric and rounded (circles, capsules, rounded rects with radius ≥12px) with no outlines. Every object gets two-tone shading: a hard-edged lighter crescent toward the sun, a darker one away from it. Long shadows are polygons extruded at 45° away from the light, filled with a gradient from rgba(5,8,30,0.30) to transparent; those are the only gradients on objects. Add 3% film grain.
Type: "Nunito" 900 title (72px); "Nunito" 700 labels (26px) in pill tags, 16px side padding.
Motion: entrances are springs, not fades. Scale from 0 with s(p) = 1 − e^(−7p)·cos(11p), p in seconds since the entrance, settling in about 0.5s. Camera moves take 1.2–1.8s with easeInOutCubic; stars parallax at 0.3×, the orbit at 0.6×, the foreground 1×. Nothing is ever dead still: stars twinkle on seeded phases, the sun's rays turn 6°/s, clouds drift 8px/s.
Precision is the charm. The axis points one direction in space all the way round the orbit, the tilt is exactly 23.4°, and both light beams are equal width so only their angle differs. One idea per shot, one focal point, lots of negative space. Cheap imitations get cute and stop being right.
Banned: outlines (except the dotted orbit and the axis line), realistic textures or Earth maps, blurred drop shadows, bevels, neon glow, emoji, more than six hues on screen.
</direction>

<structure>
- 0–1.2s: stars fade in; the sun springs in; the title pops word by word (80ms stagger).
- 1.2–3.0s: Earth springs onto a dotted elliptical orbit; its tilted axis draws; an arc sweeps out to a "23.4°" pill.
- 3.0–5.4s: Earth travels half an orbit (easeInOutSine), its axis never turning; pills: "June: north leans in", then "December: north leans away".
- 5.4–8.0s: the camera pushes in 2.4× to a ground cutaway: two equal beams, steep onto a small bright patch, shallow onto a wide dim one; a tiny tree in each, leafy versus bare and snowy.
- 8.0–9.0s: the closing line springs in on a pill.
- 9.0–10s: hold, ambient motion only.
Other lengths: scale beats proportionally; end on at least 1s of hold.
</structure>

<build>
One self-contained index.html (inline CSS and JS; Google Fonts via <link> are fine), a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Draw in SVG and move the camera with a group transform; three.js isn't needed.
window.seek(t) (t in seconds) sets every visual from t alone, clamping past the end to the last frame. No CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames. Star phases come from a fixed-seed PRNG and grain from one keyed to the frame; never Math.random.
With no ?render in the URL, call seek from requestAnimationFrame so it plays in a browser; with ?render, don't start that loop.
</build>

<check>
Before showing me, step through one frame per second (0–10s) and look at each. Fix overlaps, clipped or cramped text and anything off-style: the axis angle identical at every orbit position, pills never touching shapes, beams exactly equal width. Confirm 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…

Monoline Icon Explainer

Made by us

A three-step product explainer told with monoline icons: round-capped strokes draw themselves on, then morph point by p…