Recipe Explainer

About this style

Step-by-step recipe graphics grew out of cookbook illustration: numbered steps, measured ingredients and a time for each stage. In the 2010s overhead videos of a single pan, with ingredients dropping in one after another, became a staple of food media online because every element stays visible on a phone screen. Shakshuka, eggs poached in a spiced tomato sauce, comes from North Africa and is now cooked widely across the Middle East and beyond.

Make a 10-second illustrated recipe: a top-down skillet where ingredients drop in step by step, numbered step cards with timers that add up, and a finished shakshuka.

<inputs>
If I don't give you something, use the default and don't ask.
- Series: Small Pan Kitchen, recipe 12 (fictional).
- Dish: "Shakshuka for two"
- Steps, ingredients and minutes: 1 "Soften the onion": 2 tbsp olive oil, 1 onion, sliced, 2 garlic cloves, 6 min · 2 "Simmer the sauce": 400 g chopped tomatoes, 1 tsp cumin, 1 tsp smoked paprika, 10 min · 3 "Cook the eggs": 4 eggs, a pinch of salt, 7 min · 4 "Finish": 50 g feta, a handful of parsley, black pepper, 1 min.
- Total: 24 minutes. Serves 2.
- Closing line: "Serve it straight from the pan."
- Length: 10 seconds.
</inputs>

<direction>
- Look: a flat overhead food illustration, like a cookbook spread drawn in vector: soft flat shapes in two or three tones each, gentle highlights, soft contact shadows on the table, nothing photographic. One light from the upper left for everything.
- Palette: table #A8CBC5 with a faint seeded linen weave at 3%; cast-iron skillet #26262B, cooking surface #333339, rim highlight #5A5A62; tea towel #FBF8F1 with two #3E6FA8 stripes; wooden spoon #C8925A with #A9743F grain; olive oil #E9C24A at 60% with #FFF0B5 glints; onion #EFE3F3 with #B98BC9 edges, turning golden (#F1D8A0 with #D9A75A edges); garlic #F4ECD6; tomato sauce #D9381E with chunks #A82814 and glints #F06A45; cumin #8C5A2B; paprika #B5241A; salt #FFFFFF; egg white #FFFFFF; yolk #FFB219 with a #FFE08A highlight; feta #FBF8EE with #E7E0CC shade; parsley #3F8F3A and #2F6E2C; pepper #1E1E1E; cards #FFFFFF; ink #1F2A2E; secondary #5B6B6E; accent #E2512E for timers and checks.
- Scene: the skillet from directly above, centered at (760, 600), cooking surface radius 290, rim out to 330, a 260px handle angled to the lower left with a hanging hole; a soft contact shadow (36px blur, 22%) offset down-right. The tea towel folds under the handle at the lower left; the spoon rests on the table at the pan's lower right, angled −30°.
- Cooking that behaves: ingredients fall toward the pan, shown overhead by scaling from 1.35 → 1 while their soft shadow shrinks and sharpens, landing with a 4% squash and a short seeded settle, then staying put. Oil spreads from the center to the pan's edge with a wobbly front. Onion half-moons (16) and garlic slivers (10) scatter, then shift from raw to golden across step 1. The tomatoes pour in from one side and flood the pan as a wobbly-edged fill with chunks and glints riding on it; cumin and paprika dust down as seeded specks. From step 2, bubbles (4–12px rings) swell and pop at seeded spots, never more than six at once, and two or three soft steam wisps (white at 10–16%) curl outward and fade. In step 3 a spoon presses four wells, the eggs drop in 0.15s apart and salt specks land on them, and the whites go from 40% to opaque over the step while the yolks stay glossy. Feta crumbles, parsley leaves and pepper scatter last.
- Step cards, in a right-hand column at x 1180–1800 from y 260: each is a white card (radius 20, 28px padding) with the step number in Caprasimo 400, 44px, the title in Plus Jakarta Sans 700, 30px, ingredient chips (Plus Jakarta Sans 500, 20px, pills filled #EEF3F2) that tick with a small accent check as each ingredient lands, and a timer ring at the card's right (64px, 6px accent stroke) that sweeps once while that step's minutes run, the minutes in its center in Plus Jakarta Sans 700, 22px. The active card is expanded, about 230px tall; finished cards collapse to a 72px row with a check, the title and the minutes; upcoming steps wait as faded 72px rows at 50%; rows sit 14px apart and slide to make room.
- Clock: top-right, right-aligned at x 1800, "0 of 24 min · Serves 2" in Plus Jakarta Sans 700, 28px, its minutes counting in step with the timers.
- Type: kicker "SMALL PAN KITCHEN · RECIPE 12" in Plus Jakarta Sans 700, 20px, tracked 0.14em, accent; dish name Caprasimo 400, 72px, ink, top-left at (120, 96); closing line Plus Jakarta Sans 600, 30px, under the cards.
- Easing: cards expand and collapse over 0.4s on cubic-bezier(0.65, 0, 0.35, 1); chips and text rise 10px as they fade in over 0.3s on cubic-bezier(0.22, 1, 0.36, 1); timer rings sweep linearly.
- Premium: food that cooks as you watch (onions color, whites set, sauce bubbles), cards that keep perfect time and minutes that add up to the total. Cheap: clip-art ingredients that teleport into a bowl and a generic progress bar.
Banned: hands, faces on food, photographs, emoji, grey smoke-like steam, ingredients hovering after they land, eggs that set instantly, gradients except shadows and oil glints, timers that don't add up, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.0s: the table, towel and spoon; the skillet slides in 40px from the left and settles; the kicker, dish name, clock and four faded step rows rise in.
- 1.0–2.8s: step 1 expands: oil spreads, onion and garlic drop in and scatter, the ring sweeps 6 min and the onions turn golden; the clock reaches 6.
- 2.8–4.8s: step 1 collapses with a check and step 2 expands: the tomatoes pour and flood the pan, the spices dust down, bubbles and steam begin; 10 min; the clock reaches 16.
- 4.8–6.8s: step 3: four wells, four eggs 0.15s apart, salt; the whites set as the ring sweeps 7 min; the clock reaches 23.
- 6.8–8.0s: step 4: feta, parsley and pepper scatter; 1 min; the clock reaches 24.
- 8.0–8.8s: the last card collapses; all four rows show checks; the closing line rises in under them.
- 8.8–10.0s: hold: only two faint steam wisps drift.
For other lengths, stretch each step's beat in proportion to its minutes with at least 1.2s per step; 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).
- Build every shape once at load (onion slices, chunks, specks, crumbles and leaves from a seeded PRNG); each frame sets their transforms, colors and opacities from t.
- Bubbles and steam wisps have seeded birth times and lifetimes, so each is a closed-form function of t; the clock and every timer are linear in their step's time.
</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 ingredient lands inside the pan and stays put, the onions color and the whites set only during their own steps, the four timers add up to the clock's 24, the cards never overlap the pan or each other as they expand and collapse, and chips stay legible at 20px. 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…