Email Campaign Builder

About this style

Drag-and-drop builders became standard in email marketing software during the 2010s, letting marketers assemble campaigns from prebuilt blocks instead of hand-coding HTML tables. Promos for these tools usually show the whole loop in one take: blocks snapping into an email about 600 pixels wide, the width most templates still use because of how mail clients render, a send to a named audience, and the first results coming in. Open and click rates are the figures most campaign reports lead with, so a climbing chart is the natural payoff. The format works when the email being built looks like a real brand's newsletter and the statistics are plausible for a warm audience rather than inflated.

Make a 10-second promo for an email campaign builder: content blocks drag from a palette into a blank 600-pixel email until it's a finished coffee roaster newsletter, the campaign sends to 18,240 subscribers, and the open-rate chart climbs through its first 24 hours.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Briefling, an email campaign builder (fictional). Wordmark: "briefling".
- The brand being emailed: Lowtide Coffee Roasters (fictional), wordmark "LOWTIDE", nav "Shop · Subscriptions · Journal".
- Campaign: "Harvest Blend launch".
- Blocks dragged in, in this order: Header, Text, Image (inserted between Header and Text), Button, Footer.
- Email copy: headline "The Harvest Blend is back"; body "Roasted Tuesday in small batches: dark cherry, cocoa and a long brown-sugar finish. Coffee Club members get 15% off through Sunday."; button "Shop the blend"; footer "Lowtide Coffee Roasters · 88 Pier Road, Marrow Bay" over "You're getting this because you joined Coffee Club · Unsubscribe".
- Subject: "The Harvest Blend is back". Preheader: "Small batch, roasted Tuesday. 15% off for Coffee Club."
- Audience: "Coffee Club · 18,240 subscribers". Sent summary: "Sent to 18,240 · Coffee Club · 9:00 AM".
- Results after 24 hours: Delivered 18,112 (99.3%) · Opened 8,368 (46.2%) · Clicked 1,467 (8.1%) · Unsubscribed 19 (0.1%). Top links: "Shop the blend" 1,102 · "Subscriptions" 365.
- Benchmark: "Your last 5 campaigns · 31.8%".
- Tooltip: "24 h · 46.2% opened · 8,368 people".
- End line: "Built in 4 minutes. Opened by 8,368."
- Length: 10 seconds.
</inputs>

<direction>
- Look: a bright, friendly, exact builder UI: flat surfaces, crisp 1px borders, soft sage-white panels and one tomato accent. In the middle sits a real brand's newsletter with its own personality (deep sea blue, sand, copper). Two brand systems that never mix: Briefling's colors never appear inside the email, and the email's colors never appear in the UI.
- Palette, Briefling: app background #EEF0EA with a dot grid #DCE1D8 every 24px on the canvas; panels #FFFFFF with #DCE1D8 borders; ink #17201B; secondary #5E6A62; faint #9AA59E; tomato #F0573A (accent, buttons, chart line, insertion line); tomato tint #FDE4DD; button progress #C9452B; success #2E7D55. The chart's area fill fades from tomato at 16% to 0; the benchmark is a 1.5px dashed faint line.
- Palette, Lowtide (inside the email only): deep sea #1C3A46, sand #F2E3C6, footer sand #F8F0E2, foam #FFFFFF, copper #C2672E, body text #2B3A40.
- Type: Bricolage Grotesque 700 for UI headings (22px), the big stat (72px), the mini stats (30px) and the end line (30px); Figtree 400, 500 and 600 for UI text (labels 13px uppercase tracked 0.08em, tiles 15px, fields 17px), with tabular figures on every number. Inside the email: DM Serif Display 400 40px for the headline, Figtree 400 17px with 1.55 line height for the body, Figtree 600 16px for the button, Figtree 600 20px tracked 0.24em for "LOWTIDE".
- Top bar, y 0–72, white with a bottom border: the wordmark at x 40 (a 26px tomato rounded square holding a white envelope glyph with a folded corner, then "briefling" in Bricolage 700 24px); the breadcrumb "Campaigns / Harvest Blend launch" Figtree 500 16px at x 260; a status pill right-aligned to x 1730 reading Draft (faint on #EEF0EA), then Sending (tomato on tint), then Sent (success on #E1F0E7); a "Preview" text button at x 1760.
- Block palette, the left panel x 0–360, y 72–1080: "BLOCKS" label at x 32, baseline y 120; a two-column grid of 140 × 112 tiles at x 32 and 188, rows at y 144, 272, 400 and 528: Header, Image / Text, Button / Divider, Columns / Social, Footer. Each tile is white with a 1px border and radius 12, a 32px line icon (2px faint strokes, drawn in SVG) above its label.
- Canvas, x 360–1320. The email frame: x 540–1140 (600 wide, with "600 px" in faint 13px above its top-right corner), top at y 112, white, 1px border, radius 4. Empty at first, it holds a dashed 2px #C9D0C5 drop zone reading "Drag blocks here" (Figtree 500 17px faint). Final block heights, stacked from y 112: Header 88 (y 112–200), Image 300 (200–500), Text 196 (500–696), Button 104 (696–800), Footer 112 (800–912).
- The email's blocks, drawn in code:
  - Header: deep sea fill; "LOWTIDE" in foam at x 572, vertically centered; the nav in Figtree 500 14px sand, right-aligned to x 1108.
  - Image: a sand panel with a flat illustration centered at (820, 352): a 170 × 210 coffee bag in deep sea (flat bottom, a copper fold band across its top, a rounded foam label reading "HARVEST" in Figtree 600 14px tracked 0.2em over "BLEND No. 7" in 12px); to its right a copper cup on a foam saucer with three soft deep-sea steam curves above it; 14 copper beans (18 × 12 ellipses with a deep-sea center seam, seeded rotations) scattered across the lower third; a 1px deep-sea horizon line at y 470.
  - Text: white; the headline at x 572, baseline 60px below the block's top, in deep sea; the body in three lines below it, width 536.
  - Button: a 220 × 52 copper pill centered horizontally, foam label.
  - Footer: footer sand; two centered lines in Figtree 400 13px body text at 70%.
- Right panel, x 1320–1920, y 72–1080, white with a left border. First the Send card: "Send campaign" Bricolage 700 22px at x 1360, baseline y 146; fields with a 13px uppercase faint label and a 48px input (1px border, radius 10, Figtree 17px ink): TO at baseline y 186 with its input at y 196–244 holding a tomato-tint audience chip "Coffee Club · 18,240 subscribers"; SUBJECT at y 276 with its input at 286–334; PREHEADER at y 366 with its input at 376–424; the "Send now" button at x 1360–1880, y 456–512, tomato, Figtree 600 18px white.
- Then Results, after the send: the Send card collapses to a 64px summary row at y 104–168 (a success check, "Sent to 18,240 · Coffee Club · 9:00 AM" Figtree 500 16px). Below it: "OPENED" label at x 1360, baseline y 214; the big stat in Bricolage 700 72px at x 1360, baseline y 290, with "8,368 people" Figtree 500 17px secondary at x 1580 on the same baseline. The chart: plot x 1400–1880, y 330–600; y axis 0–60% with faint hairline gridlines at 20, 40 and 60% and labels at x 1360; x axis 0–24 h with ticks labeled 0h, 6h, 12h, 18h, 24h at baseline y 626 (13px faint). The curve is cumulative opens, r(h) = 46.2 × (1 − e^(−h/5)) / (1 − e^(−4.8)) percent, a 2.5px tomato line ending at 46.2% with a 7px tomato dot; the benchmark dashed at 31.8% with its label in 13px faint just above its left end. Mini stats at y 660–750 in three columns at x 1360, 1540 and 1720: label 13px uppercase faint, value Bricolage 30px, percentage Figtree 15px secondary: DELIVERED 18,112 · 99.3%; CLICKED 1,467 · 8.1%; UNSUBSCRIBED 19 · 0.1%. "TOP LINKS" label at baseline y 806, then two rows at baselines y 846 and 902, the link name at left and its count right-aligned to x 1880, each with a 6px tomato bar beneath (x 1360–1880, radius 3) filled 75.1% and 24.9%, so the two add up to the 1,467 clicks.
- The cursor: an original arrow drawn in SVG, 24px tall, ink with a 2px white outline and a soft shadow. Drags: the cursor presses a tile (it scales to 0.97), a lifted copy of the tile follows the cursor (scale 1.05, rotated 2°, shadow 0 18px 30px -12px rgba(23,32,27,0.28)) along a gentle arc to the email on easeInOutCubic, a 2px tomato insertion line with 6px end dots marks the slot from 0.1 s before arrival, and on drop the copy's rectangle interpolates to the block's full rectangle (easeOutCubic) and crossfades into the rendered block. When the Image goes in between Header and Text, the Text block slides down 300px while the Image opens from 0 to 300px tall (0.25 s, easeOutCubic). The drop zone shrinks to fit below the last block and disappears when the Footer lands.
- Motion rules: quick and exact. 0.15–0.35 s moves on easeOutCubic or easeInOutCubic; nothing overshoots or bounces. Numbers count with tabular digits.
- Premium: a newsletter that a real roaster would send, a builder that behaves like a precise tool, results that add up (8,368 is 46.2% of 18,112; the two link counts sum to 1,467). Cheap: an email of grey placeholder bars, confetti on send, a paper airplane flying off, a chart that jumps to a round number, purple gradients.
- Banned: real company names, logos and UI copied from existing products, confetti, paper airplanes, emoji, glows, gradient backgrounds, stock-photo placeholders, lorem ipsum, purple, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.5s: the UI rises 12px and fades in: top bar, palette tiles (25 ms apart), the empty email frame with its drop zone, and the Send card with the audience chip filled and Subject and Preheader empty.
- 0.5–3.25s: five drags, one every 0.55 s starting at 0.5, 1.05, 1.6, 2.15 and 2.7 s. Within each: the cursor is on the tile at +0.0 s (it travels back from the email in the previous slot's last 0.12 s), presses until +0.06 s, carries the copy to the email until +0.38 s, and the copy becomes the block by +0.55 s. Order: Header at the top; Text below it; Image between them, pushing Text down; Button below Text; Footer last.
- 3.25–4.0s: the cursor clicks the Subject field at 3.35 s; the subject types at 55 characters per second (3.4–3.85 s) behind a caret; the preheader fills itself with a small faint "Auto" tag (3.85–4.0 s).
- 4.0–4.75s: the cursor moves to "Send now" and presses at 4.2 s; a darker fill sweeps across the button left to right while its label counts "Sending 0 / 18,240" up to "18,240 / 18,240" (4.2–4.75 s); the status pill goes Sending, then Sent at 4.75 s.
- 4.75–5.05s: the Send card collapses to the summary row (easeInOutCubic) and Results rise in below it with an empty chart and axes.
- 5.0–5.9s: the curve draws from 0 to 24 h (easeInOutSine), the big stat and "8,368 people" tracking the curve's current value; the mini stats count up 5.3–5.9 s; the link bars fill 5.5–5.9 s.
- 6.0s: the hero frame: the finished newsletter in the canvas, all blocks in place; the Sent pill; the summary row; 46.2% with its full curve, benchmark, mini stats and top links.
- 6.2–6.8s: the cursor glides to the curve's end dot; the tooltip appears at 6.7 s just above and left of it (white, 1px border, radius 10, Figtree 500 15px).
- 7.2–7.8s: the end line rises 12px and fades in, centered on x 840 at baseline y 972 under the email, in ink.
- 7.8–10.0s: hold on the final frame: the newsletter, the results with the tooltip, and the end line.
For other lengths, stretch the gaps between drags and the chart's draw; keep each drag at about 0.55 s, the send at about 0.55 s 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: the newsletter's illustration, the icons and the cursor are inline SVG drawn 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 (Bricolage Grotesque 700; Figtree 400, 500 and 600; DM Serif Display 400) before defining window.seek.
- Engine: HTML/CSS. Absolutely positioned DOM elements on the stage; seek(t) writes every transform, opacity, size, clip-path and text content as inline styles computed from t, and block positions in the email are computed from which drops have happened by t, never from measuring the previous frame. No CSS transitions, CSS animations or Web Animations API. The chart is inline SVG whose path is rebuilt from 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 that at 2.0 s the Image block has pushed Text down cleanly with no overlap; at 3.25 s the email shows all five blocks at their final positions inside x 540–1140, y 112–912; the dragged tiles never pass under the panels; the subject is typed exactly; the send counter ends at 18,240; the curve ends on 46.2% above the 31.8% benchmark; 8,368 is shown with 46.2%, the mini stats read exactly as given and the two link counts add up to 1,467; no Briefling color appears inside the email; the 6.0 s frame shows the full newsletter and the full results; and the final frame adds the tooltip and the end line. 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…