Editorial Illustration Explainer

About this style

Editorial illustration is the art commissioned for magazines and newspapers: a single image that carries an idea, usually with a limited palette, bold shapes and a point of view. As tech companies built their brands in the 2010s, many adopted flat illustration systems for websites and explainer videos, and by the end of the decade the rubbery, big-limbed figures nicknamed Corporate Memphis had become a cliché. The more distinctive work went back to editorial roots: a few inks on paper, overlaps that darken like risograph overprints, grain, and people drawn with specific posture in a specific place. Companies use it to explain a product through a human situation rather than a screenshot. It works when the palette stays small, the figures have character and every scene makes one point.

Make a 10-second SaaS explainer in flat editorial illustration, the kind a good magazine would commission: a restaurant manager stuck on a paper staff rota late at night, the rota folding itself into a paper bird that flies across town at dawn, and the bird landing on her tablet as the logo of the scheduling app while her kitchen team's phones light up with their shifts.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Rotabird, staff scheduling for restaurants (fictional). Mark: a folded paper bird made of five triangles.
- Restaurant: Little Fennel (fictional). Manager: Dana. Staff: Sam, Priya, Jonah, Ama, Luis.
- Captions: scene 1 "Sunday, 11:48 pm. Next week's rota. Again."; scene 2 "Rotabird builds the week around who's free."; scene 3 headline "Rotas in 10 minutes, not 3 hours."
- Messages on Dana's phone: "Can't do Friday, sorry" · "Swap my Sat for a Sun?" · "Who's closing Tuesday??" · "Running late, 10 min"
- The week, Mon 20 to Sun 26 October, shifts lunch 11–4, dinner 5–11 and close 4–12: Sam lunch Wed–Sun; Priya dinner Mon, Tue, Fri, Sat, Sun; Jonah close Tue–Sat; Ama lunch Mon and Tue, dinner Wed, Sat and Sun; Luis close Mon, dinner Thu and Fri, close Sun. That's 24 shifts, with a lunch, a dinner and a close on every day.
- Notifications: Priya "Rotabird · You're on Fri, 5–11 pm"; Jonah "Rotabird · Sat close, 4 pm–12"; Ama "Rotabird · Week published".
- Sign-off: the mark, "Rotabird" and "Scheduling for restaurants".
- Length: 10 seconds.
</inputs>

<direction>
- Look: editorial illustration, not corporate clip art: a small set of inks printed flat on warm paper, overlapping like risograph overprints, with grain, specific people in specific places and calm, observed gestures. Shapes are bold and simple, edges clean, details chosen (a lamp's pool of light, chairs upturned on tables, a ticket rail over the pass), and nothing is outlined.
- Inks on paper, and nothing else: paper #F2EADB; ink #1F2B2A (a deep green-black for hair, shadows, type and small details); tomato #E1533A; ochre #E6A833; teal #2E7C77; blush #EFB49C; umber #8A5B40. Every shape is one flat ink. Where two inks overlap, the upper shape uses mix-blend-mode multiply so the overlap darkens like an overprint (teal over ochre becomes a deep olive); use this on purpose for shadows, the lamp's pool and window light. No gradients, no drop shadows, no outlines, no pure white or black.
- Paper: an SVG feTurbulence grain (fractalNoise, baseFrequency 0.85, 2 octaves, fixed seed) thresholded into speckle and multiplied over everything at 14%, plus a coarse fiber noise (baseFrequency 0.012) at 5%. It is printed on the paper, so it stays fixed to the frame while the camera pans and never boils. The tomato ink prints 1.5px right of and 1px above where it should, a slight misregistration everywhere it appears.
- People: elongated and calm, about seven and a half heads tall (a standing adult about 380px), drawn from flat shapes: a 46px head; hair as one solid shape with character (Dana an umber low bun, Priya long ink hair under a teal scarf, Jonah short tight curls and a beard, Ama a high ochre headwrap); a slim neck; softly tapered torsos; arms and legs as tapered strokes 18–24px wide with round ends; mitten hands; simple shoes. Faces carry only a nose (one short ink stroke), plus closed-eye arcs on Dana when she's tired and a small smile at the end. Skin in blush, umber and their overprints; clothes in teal, tomato and ochre; kitchen whites in paper with ink shadow shapes. Posture tells the story. No rubbery limbs, no giant hands or feet, no purple skin.
- Type: captions in Fraunces 400 italic, 44px, line-height 52px, ink, at top-left (x 120, first baseline y 150), max width 760px, each rising 12px and fading in and out on easeOutCubic. The scene 3 headline in Fraunces 600, 64px, line-height 70px, at the same spot. UI text and labels in Public Sans 500/600.
- World: one long illustrated strip 5120 × 1080 seen through the 1920 frame by a camera that pans along x, in three layers: the back layer (walls, windows, sky, shop fronts) moves at 0.7× the camera, the middle layer (people, furniture, the bird) at 1×, and a foreground layer (a door frame edge, a lamp post) at 1.3×. Camera x is 0 until 1.8 s, eases on easeInOutCubic to 3200 at 4.6 s, then stays.
- Scene 1, world x 0–1920, night in the back office: the back wall teal; a tall window at x 1180–1460, y 160–620 showing a night sky in ink with three ochre lit windows across the street; a wall clock at (560, 300), radius 48, reading 11:48; a small table (top at y 700, x 480–1120); a desk lamp at x 820 throwing a cone of ochre (multiply, 70%) onto the table; Dana seated at x 760, one elbow on the table, head resting in her hand; on the table the paper rota (a 300 × 200 sheet with a hand-ruled 7 × 5 grid, names down the side, crossings-out in tomato) and her phone face up at x 1000. The four messages stack above the phone as paper bubbles with ink text (Public Sans 500, 18px), each 0.22 s apart, the phone wobbling ±2° once for each.
- Scene 2, world x 1920–3200, the street at dawn: a sky of flat bands in blush and ochre; the front of Little Fennel at x 2300–2900 with a tomato awning carrying the name in Fraunces 600 italic, 40px, in paper; a big window with chairs upturned on tables as ink silhouettes; a door; a bicycle leaning on a teal lamp post at x 3050 in the foreground layer.
- Scene 3, world x 3200–5120, opening time at the kitchen pass. Positions are in frame pixels with the camera at rest: a paper back wall with a teal tiled band (24px tiles, ink grout at 30%) from y 480 to 640; a ticket rail at x 1360–1840, y 180, with five paper tickets hanging 80px; the pass counter across the bottom, a teal top at y 760–790 and a tomato front from y 790 to the frame edge; Dana standing at center behind the counter (head centered at (960, 255)), holding a tablet toward us at x 640–1280, y 330–750; Priya at x 340 with her phone raised in her right hand; Jonah at x 1500 at the stove with a pan; Ama at x 1760 carrying a tray of glasses.
- The tablet: an ink body with an 18px bezel and radius 28; the screen x 658–1262, y 348–732 in paper. A 44px header with the bird mark (24px), "Rotabird" (Public Sans 600, 18px) and "Little Fennel · Week of 20 Oct" (500, 14px) at the right; a day header row of 24px ("Mon 20" … "Sun 26", 500, 12px); a 72px names column (Sam, Priya, Jonah, Ama, Luis; 600, 14px) and seven 74px day columns over five 52px rows; shift blocks as 6px-radius rectangles inset 4px, ochre for lunch "11–4", tomato for dinner "5–11", teal for close "4–12", labels in Public Sans 600, 11px, paper; a 28px footer "24 shifts · 0 gaps · Published" (500, 13px). The grid shows exactly the 24 shifts from the inputs.
- The bird: five flat triangles (an ochre body, two tomato wings overprinting it, a teal head and an ochre tail) that fold out of the rota sheet in four polygon steps (sheet, diamond, kite, bird), each a vertex-for-vertex interpolation over 0.12 s. In flight its wing tips swing ±40px on a 0.36 s cycle and it banks into its turns. It is the same shape as the app's mark.
- Notifications in scene 3: three paper cards, 320 × 64px, radius 10, each with a small tail pointing at its phone, ink text in Public Sans 500, 17px, placed so they don't overlap each other, the tablet or the headline.
- Sign-off: on the tomato counter front at the lower right (about x 1420–1820, y 880–960): the mark at 56px, "Rotabird" in Fraunces 600, 48px, paper, and "Scheduling for restaurants" in Public Sans 500, 20px, paper at 80%.
- Motion: calm and deliberate, easeInOutCubic or easeOutCubic everywhere, one gesture at a time; people move only at their joints, by small rotations; nothing wobbles idly.
- Premium: a disciplined set of inks with real overprints, grain that sits on the paper, people with posture and specific details, a single metaphor (the rota becomes the bird becomes the app) carried through, a legible product screen. Cheap: Corporate Memphis figures with purple skin and noodle limbs, gradients, outlines, stock icons, faces with big smiles, everything bouncing, a UI that's just grey bars.
- Banned: outlines, gradients, drop shadows, pure white or black, emoji, purple or blue skin, giant hands or feet, generic stock-illustration figures, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–0.5s: scene 1 at night; the first caption rises in at 0.15 s.
- 0.5–1.4s: the four messages stack above the phone, 0.22 s apart; Dana's head sinks lower into her hand, eyes closed.
- 1.4–2.3s: the rota lifts off the table (1.4–1.7 s), turns to face us and folds into the bird in four steps, wings up.
- 1.8–4.6s: the camera pans to scene 3 while the bird flaps and flies right along a gentle S path, staying around frame x 1100–1300 and rising over the awning; the first caption fades out at 2.1 s, the second rises in at 2.6 s and fades out at 4.2 s.
- 4.6–5.0s: the bird glides down onto the tablet, shrinking from a 200px wingspan to the 24px mark in the app header, and lands with a small settle.
- 5.0–5.5s: the week fills: shift blocks pop in day by day, Mon to Sun, 0.06 s apart, scaling 0.6 → 1 on easeOutBack 1.3; the footer fades in at 5.45 s.
- 5.3–5.8s: the notification cards pop in for Priya (5.30), Jonah (5.42) and Ama (5.54); Dana's small smile appears at 5.6 s; the headline rises in at 5.5 s and the sign-off fades up at 5.7 s.
- 5.8–6.3s: hold. The 6.0 s frame is the hero: the kitchen, Dana with the full week on her tablet, the three notifications, the headline and the sign-off.
- 6.3–8.4s: small life, one gesture at a time: Priya lowers her phone and gives a thumbs-up (6.4–6.9 s); Jonah tosses the pan once, three paper-cut vegetable pieces arcing up and back (7.0–7.6 s); Ama sets her tray on the counter (7.7–8.3 s).
- 8.4–10.0s: hold, everything still.
For other lengths, stretch the pan and the holds; keep the fold, the landing and at least 1 s 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: SVG. One inline <svg viewBox="0 0 1920 1080"> holding the three world layers as <g> groups translated from the camera x times their parallax factor, the screen-fixed captions above them and the grain filter on top. Every shape is a path or primitive in code; seek sets transforms, polygon points, opacities and text from t. The bird's folds interpolate polygons with matching vertex counts. Apply mix-blend-mode: multiply on the shapes that overprint.
</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 that only the listed inks appear and overlaps darken like overprints; the grain stays fixed while the camera pans; at 1.0 s the messages are stacking and Dana reads as tired; at 2.0 s the bird is clearly folded from the rota; at 3.0 s the street and shop name read; the people look like specific, well-proportioned adults and not clip art; the tablet's grid shows exactly 24 shifts matching the inputs; the 6.0 s frame shows the full scene 3 with the tablet, the three notifications, the headline and the sign-off; and the final frame is the same scene, still. 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

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…