Photosynthesis

About this style

Photosynthesis uses light to turn water and carbon dioxide into sugar, releasing oxygen; in plants it happens in chloroplasts, packed most densely in the leaf's palisade cells. Jan Ingenhousz showed in 1779 that plants give off oxygen only in light, and Melvin Calvin's team mapped the carbon-fixing cycle that now bears his name, work recognized with the 1961 Nobel Prize in Chemistry. The continuous zoom through scales owes much to Powers of Ten, the 1977 film by Charles and Ray Eames, and is a favorite device of biology explainers and museum films.

Make a 10-second photosynthesis explainer as one continuous zoom: from a sunlit leaf into its cells and down to a single chloroplast, where light, water and carbon dioxide go in and sugar and oxygen come out.

<inputs>
If I don't give you something, use the default and don't ask.
- Series: Sprigwood Science, lesson 07 (fictional).
- Title: "How a leaf makes sugar from light"
- Levels and captions: Leaf, "Sunlight lands on the leaf." · Leaf cross-section, "Carbon dioxide gets in through pores; water arrives through veins." · Palisade cell, "Each cell holds dozens of chloroplasts." · Chloroplast, "Light splits water and releases oxygen; the energy turns carbon dioxide into sugar."
- Equation: 6CO₂ + 6H₂O + light → C₆H₁₂O₆ + 6O₂
- Length: 10 seconds.
</inputs>

<direction>
- Look: a bright botanical poster in flat illustration: shapes in two or three greens each, crisp 1.5px darker-green linework on walls and membranes, and color-coded particles for each substance. Warm daylight at the top level, fresh greens all the way down, every level evenly lit and readable.
- Palette: sky #FFE9A3 to #FFF7DE; sun #FFC23A with flat wedge rays; leaf #4E9A3A, #69B347 and #3B7F2C with veins #B9DD7A; epidermis #DDEFC4; palisade cells #8CC864 with walls #4F8F35; spongy cells #A6D47E; air spaces and cytoplasm #F1F7DF; vacuole #E0F1E6; nucleus #B6A0DA; chloroplasts #3A8A2E; grana #2E7A2A with edges #5BAE45; stroma #CFE7A1; starch #F2E6C2. Substances: light #FFC23A (short dashes), water #2E9BE0, carbon dioxide #7C8798, oxygen #19BFAE, sugar #F2853A (small hexagons). Text #1E3A1E, secondary #4E6B45.
- Four levels, each drawn at true relative size in micrometres in its own local coordinates and placed inside the one before. L0, frame width 120,000 µm (12 cm): a twig of five leaves against the sky, the hero leaf about 7 cm long. L1, 600 µm: a cross-section block of that leaf: cuticle and upper epidermis, a palisade layer of tall rounded cells packed with chloroplasts, spongy cells with air spaces, a vein bundle (xylem tubes tinted blue, phloem beside them) and a lower epidermis with two open stomata between paired guard cells. L2, 140 µm: one palisade cell, about 30 × 70 µm: wall, a large vacuole, a nucleus with its nucleolus, and about 30 lens-shaped chloroplasts (6 × 3 µm) circling the edge in slow cytoplasmic streaming. L3, 9 µm: one chloroplast: double membrane, stroma, nine grana of 6–10 stacked thylakoid discs joined by thin lamellae, two starch grains and ribosome dots.
- Camera: one continuous zoom. The frame width W(t) interpolates in log space between the levels, each leg on easeInOutSine, so every decade passes at the same pace. The center glides to each next target as it zooms: center = target + (previous center − target) × (W ÷ W₀) × (1 − s), with s the leg's eased progress, so the target slides smoothly to the stage center with no swing. Each level fades in while its on-screen width grows from 30% to 70% of the frame as the level above fades out; the cross-section opens with a clean cut line sweeping across the leaf. Draw only levels between 2% and 5,000% of the frame width, so detail never shimmers.
- Particles tell the chemistry, each on a fixed path at constant speed with a seeded phase so every stream loops seamlessly. L0: light dashes stream from the sun onto the leaf. L1: grey carbon dioxide dots slip in through a stoma, blue water dots rise in the xylem, teal oxygen dots drift out. L2: light dashes enter the cell. L3: light dashes strike the grana; blue water dots split there into teal oxygen pairs that drift out of the chloroplast; small amber tokens labelled ATP and NADPH hop into the stroma, where a Calvin cycle loop (a ring of arrows 1.4 µm across) turns as grey carbon dioxide dots join it and orange sugar hexagons leave.
- Labels: Sora 600, 22px, on 1.5px #1E3A1E leaders ending in 5px dots, never more than four at once: L1 Stoma, Xylem, Palisade cells; L2 Chloroplasts, Vacuole, Nucleus; L3 Thylakoid stack (granum), Stroma, Calvin cycle. Write subscripts as real smaller digits (60% size, dropped 0.25em), not Unicode subscript characters.
- HUD: kicker "SPRIGWOOD SCIENCE · 07" in Sora 600, 20px, tracked 0.14em, #3B7F2C; title Sora 700, 56px, top-left at (120, 96); the level name top-right, right-aligned at x 1800, in Sora 600, 22px, uppercase, tracked 0.12em; a scale bar at bottom-left (x 120, y 990) whose length and label (1 cm, 100 µm, 10 µm, 1 µm and so on) update continuously to the 1-2-5 value nearest 200px on screen; captions in Sora 500, 28px, from (120, 930), swapping per level. HUD text sits on soft white pills (#FFFFFF at 70%) wherever the scene behind it is busy.
- Premium: one unbroken zoom where each level sits exactly inside the last, a scale bar you can trust and substances that move where they really go. Cheap: crossfading clip-art slides with a green swirl and a sparkle.
Banned: cuts or swipes between levels, sparkles, glow, faces on the sun or leaf, a formula with no particles behind it, an unbalanced equation, Unicode subscript glyphs, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.0s: L0: the twig against the sky, light streaming onto the hero leaf; the kicker, title and first caption rise in; the scale bar reads 1 cm.
- 1.0–1.9s: zoom into the hero leaf; the cut line sweeps across and the cross-section opens.
- 1.9–3.1s: L1 holds: carbon dioxide enters through a stoma, water rises in the xylem, oxygen drifts out; three labels pop in 0.2s apart.
- 3.1–3.9s: zoom into one palisade cell.
- 3.9–4.6s: L2 holds: chloroplasts stream around the cell's edge; its labels.
- 4.6–5.4s: zoom into one chloroplast.
- 5.4–8.0s: L3: light strikes the grana (5.4s); water splits and oxygen pairs drift out (5.8s); ATP and NADPH hop into the stroma (6.3s); the Calvin cycle starts turning as carbon dioxide joins it (6.8s); sugar hexagons leave (7.3s); labels in step.
- 8.0–8.8s: the caption gives way to the equation on a white pill centered near y 950 (Sora 600, 40px), each term in its substance's color.
- 8.8–10.0s: hold: the particles keep their slow loops; nothing else moves.
For other lengths, stretch the level holds, not the zoom legs; 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: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter. No other libraries.
- Never use one giant world coordinate system: draw each level in its own local units with a transform composed from the camera every frame, so precision holds across the 13,000× zoom. Build each level's static shapes once at load (seeded cell outlines, chloroplast positions, grana).
- The camera, level opacities, the scale bar and every particle are closed-form functions of t.
</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 the zoom never jumps or swings, each level lines up with the spot it grew from, the scale bar label matches its on-screen length, the 6s frame shows the chloroplast with its light reactions under way, subscripts render as small digits, and the equation balances (6 C, 12 H and 18 O on each side). 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…