How It Works Explainer

About this style

"How it works" in three steps is a staple of SaaS landing pages and explainer videos: a numbered row such as connect, configure and get results, each with a small illustration. Three is a deliberate number, enough to show a process with a beginning, middle and end and few enough to remember. In video the steps play one at a time, often joined by a line or path that carries the eye from one to the next and suggests the work flows on its own. The format works when each step has one verb, one short line of copy and a vignette that shows the actual product doing that step, rather than a generic icon, and when the numbers inside the vignettes are real enough to trust.

Make a 10-second "how it works" explainer in three numbered steps: on a pale sage page a persimmon line draws from step badge to step badge, and as it reaches each one that step's small UI vignette plays (connect a store, tax an order, file a return), before the line runs on and ends under a sign-up button.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Levyline (fictional), automatic sales tax for online stores. Store in the demo: Fernhill Goods (fictional).
- Eyebrow: "HOW IT WORKS". Headline: "Sales tax, handled in three steps."
- Step 1: "Connect your store" / "Link your storefront once. We pull in every past and new order." Vignette: "Fernhill Goods · Storefront" with a toggle, "Syncing orders" 0 → 1,248, then "Connected".
- Step 2: "We tax every order" / "The right rate for each address, worked out at checkout." Vignette: Order #10482: Wool throw blanket $48.00, Beeswax candle $16.00, Subtotal $64.00, "Ship to ZIP 78701", Sales tax 8.25% $5.28, Total $69.28.
- Step 3: "File in one click" / "Returns are prepared for every state you sell in." Vignette: "October return · 3 states": Texas $2,140.15, California $1,906.80, Washington $765.45, Total due $4,812.40; button "File now" → "Filed · Nov 3".
- CTA: button "Start your free trial" and the line "30 days free · No card needed".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a confident, editorial explainer page, like a well-designed landing section brought to life. A big serif voice for numbers and titles, a crisp sans for the UI, a single persimmon line that ties the page together, and three small product moments that are real UI, not icons. Flat, light, with soft card shadows and nothing glowing.
- Palette: page #DDE7DA (pale sage); ink #1D2A22 (headings, badge outlines, UI text); secondary #55665A; cards #FBFCF8 with a 1px #C9D6C5 border and a shadow 0 18px 40px rgba(29,42,34,0.10); persimmon #E2582F (the line, active badges, the eyebrow, primary buttons), persimmon pressed #C8461F; success #2E6B45 with tint #DCEBDF (connected, filed); UI hairlines #E3E9E0; muted fills #EEF3EC. No gradients, no blue, no purple.
- Type: Fraunces 600 (optical size on) for the headline at 64px, the step titles at 34px and the badge numerals at 28px; Manrope 400 / 600 / 700 for the eyebrow (700, 16px, tracked 0.2em), the step lines (400, 20px, 30px line height, secondary) and all vignette UI (14–17px, tabular figures for money).
- Layout. Eyebrow centered at y 116; headline centered at y 196. Three columns, 480px wide, at x 160–640, 720–1200 and 1280–1760. In each: a badge, a 64px circle with a 3px ink outline, its center at (column x + 32, 312), holding the numeral; the step title at (column x, 404); the line of copy at y 440, wrapped to two lines within 440px; the vignette card 480×320 at y 516–836, radius 18, padding 28px.
- The line: one continuous 3px persimmon path with round caps. It enters from the left edge at y 312, runs to badge 1, continues horizontally from badge to badge (passing behind them, so it disappears into each circle and reappears on the other side), then leaves badge 3, runs right to x 1820, turns down with a 40px radius corner, runs down to y 940, turns left with another 40px corner and ends at the CTA button's right edge. It draws along its length, segment by segment, with a 10px persimmon dot riding its tip. Between badges the tip moves on easeInOutCubic; when it reaches a badge the badge fills persimmon (0.2 s), its numeral turns #FBFCF8, and a single 2px persimmon ring expands from 32 to 46px radius and fades out over 0.5 s, once.
- Vignette 1, Connect: a row with a 40px rounded square store glyph (an original awning shape in ink), "Fernhill Goods" in 600 17px and "Storefront" in 14px secondary, and a toggle at the right (44×26, off #C9D6C5, on persimmon) that slides on in 0.25 s. Below, "Syncing orders" with a 6px progress bar (track #EEF3EC, fill persimmon) and a counter in tabular figures; the bar fills on easeOutCubic over 0.9 s while the counter rises to 1,248; then the bar turns success green and a chip "Connected" with a drawn check replaces the label.
- Vignette 2, Tax: a receipt card: "Order #10482" in 600 16px with "Today, 2:14 pm" in secondary; two item rows (name left, price right); a hairline; Subtotal; a row "Ship to ZIP 78701" with a small pin glyph; then the tax row slides in: "Sales tax" with a chip "8.25%" and the amount counting from $0.00 to $5.28; then Total $69.28 in 700 20px. Rows enter one by one, 0.12 s apart, each rising 6px.
- Vignette 3, File: "October return" in 600 17px with a chip "3 states"; three state rows with their amounts; a hairline and "Total due $4,812.40" in 700 20px; a "File now" button 152×44 (persimmon, #FBFCF8 15px 700 label) at the bottom right. A drawn arrow cursor (an original SVG pointer, ink outline, white fill, 26px) glides to the button and clicks (cursor dips to 0.88, the button shows its pressed shade), and the button becomes a success chip "Filed · Nov 3" with a check, crossfading over 0.2 s.
- CTA: a persimmon pill 300×60 centered at (960, 940) reading "Start your free trial" in Manrope 700 19px #FBFCF8, and "30 days free · No card needed" in 15px secondary below it at y 1000. The line ends exactly at the button's right edge.
- Motion character: three even beats, each about 1.5 s; every element moves on easeOutCubic with 6–10px rises; nothing bounces except the toggle's knob (easeOutBack, 1.1); once a step has played it stays in its finished state.
- Premium: generous spacing, a real typographic hierarchy, one line that carries the eye, vignettes that show real UI with numbers that add up, a single ring pulse per badge. Cheap: icon circles with generic glyphs, a line with glowing particles, everything animating at once, cartoon arrows between steps, steps labeled "Step One" with stock icons, emoji.
- Banned: real company names, logos and UI copied from existing products; real e-commerce platform names or logos; government or agency seals; glow; gradients; particles; stock icons; emoji; more than one ring pulse per badge; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.2s: the page fades up from sage; the eyebrow (0.15 s) and the headline (0.3 s, rising 12px) appear; the three badges, titles and copy fade in, column by column, 0.1 s apart (0.6–0.9 s), with the vignette cards present but empty (just their frames and headers); the line draws in from the left edge to badge 1 (0.8–1.2 s).
- 1.2–2.75s: badge 1 fills with its ring; vignette 1 plays: the toggle switches on (1.35 s), sync runs (1.6–2.5 s), "Connected" lands (2.55 s).
- 2.75–3.25s: the line draws from badge 1 to badge 2.
- 3.25–4.7s: badge 2 fills; vignette 2 plays: rows enter (3.35–3.85 s), the tax row slides in and counts (3.95–4.35 s), the total lands (4.45 s).
- 4.7–5.2s: the line draws from badge 2 to badge 3.
- 5.2–5.85s: badge 3 fills; vignette 3's rows and total enter (5.2–5.45 s); the cursor glides to "File now" (5.35–5.6 s) and clicks at 5.62 s; the button becomes "Filed · Nov 3" (5.65–5.85 s).
- 5.85–6.3s: the 6.0 s frame is the hero: headline, three filled badges joined by the line, all three titles and lines, and all three vignettes in their finished states (Connected, $69.28, Filed), the cursor resting by vignette 3.
- 6.35–7.25s: the cursor fades out; the line runs on from badge 3 to the right margin, down and left along y 940 toward the center.
- 7.15–7.6s: the CTA button scales from 0.94 and fades in as the line's tip reaches its right edge (the tip dot settles into the button's edge and disappears); the small line fades in at 7.45 s.
- 7.6–10.0s: hold on the complete page.
For other lengths, keep the three even beats and the line's draw speed between badges, and keep 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 icon is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no SMIL, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. 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 and weight before defining window.seek.
- Engine: one inline SVG with a 1920×1080 viewBox. The line is a single path; measure its total length and the length at each badge once at load, and set stroke-dasharray / stroke-dashoffset from t, placing the tip dot with getPointAtLength. Counters are formatted from their eased values each frame with tabular figures; the vignettes' states are pure functions of t from one timing table.
</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 the line passes behind the badges and never through text or cards, each badge fills exactly when the tip arrives, each badge pulses once, the vignettes' numbers add up ($48 + $16 = $64; 8.25% of $64 = $5.28; total $69.28; the three states sum to $4,812.40), and the three columns align. At 2.0 s vignette 1 is mid-sync; at 4.0 s the tax row is counting; the 6.0 s frame shows all three steps finished and joined; at 7.6 s the CTA is in with the line ending at its edge; the final frame holds the whole page. 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…