Invoice Sent to Paid

About this style

Invoicing and payments companies often sell the moment money arrives rather than the software itself, so their promos follow one invoice from draft to paid. The format borrows from real accounting workflows, where an invoice moves through statuses such as draft, sent, viewed and paid, and from paper bookkeeping, where clerks stamped settled invoices PAID so they would not be paid twice. Letting the line items add up on screen shows that the arithmetic can be trusted, and ending on a rising balance gives small-business viewers the outcome they care about: cash in the account. The style works best when the document is typeset like real paper and every number on screen reconciles.

Make a 10-second invoicing promo on warm paper: a design studio's invoice writes itself line by line while its totals reconcile, it's sent, viewed and paid, a red PAID stamp lands on it, and the studio's balance rolls up by exactly the invoice amount.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Quaybill, invoicing for small studios (fictional). Wordmark: "quaybill", lowercase.
- Sender: Marlow & Finch Design Co., 14 Rook Street, Ashford Mill (fictional). Monogram "M&F".
- Client: Brightwater Ceramics, attn. Dana Okafor (fictional).
- Invoice: "MF-0147", issued Oct 2, 2026, due Oct 16, 2026.
- Line items (description · qty · rate · amount):
  "Brand identity system" · 1 · $4,800.00 · $4,800.00
  "Packaging design, 3 SKUs" · 3 · $950.00 · $2,850.00
  "Photography art direction" · 12 h · $120.00 · $1,440.00
  "Print production management" · 1 · $610.00 · $610.00
- Totals: Subtotal $9,700.00 · Sales tax (5%) $485.00 · Total due $10,185.00.
- Footer: "Thank you, Dana." and "Pay by bank transfer or card · Net 14".
- Status steps and times: Draft "Oct 2" · Sent "9:41 AM" · Viewed "10:02 AM" · Paid "2:17 PM".
- Balance: "Available balance", from $24,310.40 to $34,495.40; delta chip "+$10,185.00 today".
- Toast: "Brightwater Ceramics paid MF-0147" over "$10,185.00 · Bank transfer · 2:17 PM".
- Stamp: "PAID" over "OCT 2 2026 · 2:17 PM".
- Sign-off: "Bill it. Send it. Get paid." over "quaybill · invoicing for small studios".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a well-typeset paper invoice lying flat on a linen desk, seen straight down and square to the frame, with Quaybill's status and balance cards beside it. The document is the hero: it reads like a printed invoice from a careful design studio (generous margins, hairline rules, tabular figures), and the software around it stays quiet. Warm daylight, tactile, calm. Nothing glows.
- Palette: desk #ECE5D6 with a seeded linen weave at 4% (#D8CEBB threads); paper #FBF8F1 with faint fibers #EFE8DA and a 2% darkening toward its bottom edge; ink #1F1B16; secondary ink #6E6558; hairlines #DCD3C3; Quaybill bottle green #1E5B3F (brand mark, buttons, progress, the balance delta); green tint #E2EEE5; cards #FFFDF8 with a #E6DDCD border; stamp vermilion #C8372D. Status pills: Draft #8A8172 on #EFE9DC, Sent #2F5D8A on #E3ECF4, Viewed #9A6A12 on #F5EBD5, Paid #1E5B3F on #E2EEE5. No other hues and no gradients except the paper's falloff and the sparkline's area fill.
- Type: Fraunces 600 for "Invoice" 60px, the total due 44px, the balance 76px and the sign-off 40px italic, and Fraunces 400 italic 26px for "Thank you, Dana."; IBM Plex Sans 400 and 500 for everything else (line items 20px, labels 14px uppercase tracked 0.08em, addresses 16px), with tabular figures (font-variant-numeric: tabular-nums) on every number; IBM Plex Mono 400 for the invoice number 18px and timestamps 14px; Anton 400 for the stamp.
- The sheet: x 240–940, y 80–1000 (700 × 920), radius 6, two shadows (0 1px 2px rgba(31,27,22,0.10) and 0 28px 56px -18px rgba(31,27,22,0.28)). Content sits inside a 64px margin, x 304–876:
  - Header: a 44px ink circle outline (1.5px) at x 304–348, y 128–172 holding "M&F" in Fraunces 600 16px; "Marlow & Finch Design Co." Plex Sans 500 20px at x 364, baseline y 146; "14 Rook Street, Ashford Mill" 16px secondary at baseline y 170. "Invoice" right-aligned to x 876, baseline y 160; "MF-0147" in Plex Mono right-aligned, baseline y 190.
  - Details: "BILLED TO" label at x 304, baseline y 250; "Brightwater Ceramics" Plex Sans 500 20px at y 280; "Attn. Dana Okafor" 16px secondary at y 304. At right, labels "ISSUED" and "DUE" at x 680 with values "Oct 2, 2026" and "Oct 16, 2026" right-aligned to x 876, baselines y 280 and 304.
  - Table: header labels DESCRIPTION (left, x 304), QTY (right-aligned x 620), RATE (right x 748), AMOUNT (right x 876) at baseline y 380, and a 1px ink rule at y 396. Rows at baselines y 446, 506, 566 and 626, each with a 1px hairline under it at y 470, 530, 590, 650.
  - Totals: labels at x 600, values right-aligned to x 876: "Subtotal" at baseline y 706, "Sales tax (5%)" at y 742; a 1px ink rule from x 600 to 876 at y 768; "TOTAL DUE" Plex Sans 500 15px at x 600, baseline y 816, and the amount in Fraunces 44px right-aligned at baseline y 820.
  - Footer: "Thank you, Dana." at x 304, baseline y 912; "Pay by bank transfer or card · Net 14" Plex Sans 14px secondary at baseline y 944.
  - Keep x 272–590, y 680–860 empty: that's where the stamp lands, left of the totals, never over a number.
- Right column, x 1010–1680:
  - Wordmark at x 1010, y 96–136: a 30px bottle-green circle with a single white wave crest (one sine period, 2.5px stroke) across its middle, then "quaybill" in Fraunces 600 italic 34px ink.
  - Status card: x 1010–1680, y 168–448, radius 18, card fill and border, shadow 0 12px 32px -16px rgba(31,27,22,0.22). "MF-0147 · Brightwater Ceramics" Plex Sans 500 18px at x 1044, baseline y 214; the status pill (current status in its colors, Plex Sans 500 14px, height 28, radius 14) right-aligned to x 1646 at y 194–222. The track: four 16px nodes at x 1080, 1260, 1440 and 1620 on y 290, joined by a 2px #DCD3C3 line that fills bottle green as the invoice advances; labels Draft / Sent / Viewed / Paid in Plex Sans 500 16px centered under the nodes at baseline y 330, their times in Plex Mono 14px secondary at baseline y 352. Reached nodes fill green with a white 2px check; the current node wears a 6px green-tint ring. "Dana Okafor gets a payment link" 15px secondary at x 1044, baseline y 406, and the button at x 1446–1646, y 376–424, radius 24, bottle green, "Send invoice" Plex Sans 500 17px white.
  - Balance card: x 1010–1680, y 480–820, same style. "AVAILABLE BALANCE" label at x 1044, baseline y 528; the figure in Fraunces 600 76px ink at x 1044, baseline y 612; the delta chip at x 1044, y 636–668, "+$10,185.00 today" Plex Sans 500 16px green on green tint, radius 16. Sparkline at x 1044–1646, y 690–790: 30 daily points on a fixed $18,000–$36,000 scale (y 790 to 690), a 2px green line over an area fill fading from 12% green to 0, the last point a 7px green dot. Days 1–29 are a seeded gentle walk between $21,900 and $24,310.40 that ends exactly on $24,310.40; day 30 rises with the balance to $34,495.40.
  - Toast: x 1010–1680, y 852–940, ink fill, radius 14: a 28px green circle with a white check centered at (1050, 896), "Brightwater Ceramics paid MF-0147" Plex Sans 500 17px #FBF8F1 at x 1080, baseline y 890, and "$10,185.00 · Bank transfer · 2:17 PM" 14px #FBF8F1 at 70% at baseline y 914.
  - Sign-off, in the toast's slot once the toast leaves: "Bill it. Send it. Get paid." at x 1010, baseline y 902, and "quaybill · invoicing for small studios" Plex Sans 400 16px secondary at baseline y 936.
- Line items write themselves. Each row: its hairline draws left to right in 0.2 s (easeOutCubic); the description types at 70 characters per second behind a 2px ink caret that disappears when the word ends; quantity and rate rise 6px and fade in from 0.15 s after typing starts; the amount rolls in like an odometer (each digit a vertical 0–9 strip, 0.3 s, easeOutCubic, right-hand digits spinning further than left-hand ones). The totals roll to the running sums as each row lands: after row 1 $4,800.00 / $240.00 / $5,040.00; after row 2 $7,650.00 / $382.50 / $8,032.50; after row 3 $9,090.00 / $454.50 / $9,544.50; after row 4 $9,700.00 / $485.00 / $10,185.00. Before row 1 they read $0.00 in secondary ink.
- The cursor: an original arrow drawn in SVG, 26px tall, ink fill with a 2px #FBF8F1 outline and a 20% soft shadow. It travels on easeInOutCubic along a gentle arc (control point 80px above the straight line); on a press it scales to 0.9 for 0.1 s and the button scales to 0.97.
- The stamp: a rubber-stamp impression 300 × 132 centered at (430, 772), rotated −8°: a 5px outer border and a 2px inner border 8px inside it, radius 10; "PAID" in Anton 400 88px tracked 0.1em, and "OCT 2 2026 · 2:17 PM" in IBM Plex Mono 400 15px tracked 0.1em beneath it, all vermilion. The ink is uneven: an SVG feTurbulence mask with a fixed seed knocks small voids out of about 12% of the ink and roughens its edges by about 1px, and the stamp uses mix-blend-mode: multiply so the paper fibers show through. It drops from scale 1.5 at 0 opacity to scale 1.0 at full opacity in 0.14 s (easeInQuad); on contact the sheet dips 2px and recovers over 0.3 s (easeOutBack 1.6). The stamp itself never bounces.
- The balance rolls as an odometer from $24,310.40 to $34,495.40 over 0.75 s on easeOutQuart; the delta chip scales in from 0.9 on easeOutBack (1.8).
- Camera: locked off, top down, with a 2.5% push-in toward (960, 540) from 0 to 8.5 s on easeInOutSine, then still. Nothing shakes except the one 2px sheet dip.
- Motion rules: everything rises, types or rolls; nothing spins, flips or zooms in from nowhere. Durations 0.2–0.4 s on easeOutCubic, except where named.
- Premium: a document that could be printed and mailed, numbers that reconcile at every moment, quiet tactile paper, one decisive stamp. Cheap: confetti, coins or dollar-sign particles, a glossy gradient card, a cartoon checkmark burst, a shaking camera on the stamp, totals that change without adding up.
- Banned: confetti, coins, money emoji, sparkles, glows, gradient backgrounds, purple, real company names, logos and UI copied from existing products (no real bank, card network or payment brand), anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the desk; the sheet rises 30px and fades in (0.0–0.5 s, easeOutCubic) with its header, the detail labels and the table header already printed; the wordmark, the status card (Draft current, "Oct 2" under it) and the balance card ($24,310.40) rise 16px and fade in at 0.15, 0.25 and 0.35 s; the sparkline draws left to right 0.35–0.75 s.
- 0.6–1.1s: "MF-0147" types at 30 characters per second; the Billed to block and the dates rise in, 0.06 s apart.
- 1.1–3.3s: the four rows write, starting at 1.1, 1.65, 2.2 and 2.75 s; each row's amount rolls from +0.35 s and the totals roll to their running sums from +0.45 s.
- 3.3–3.7s: "Thank you, Dana." writes on with a left-to-right clip reveal (0.3 s) and the payment line fades in; a 2px green underline draws beneath the total due (3.4–3.7 s) and stays.
- 3.7–4.2s: the cursor enters from (1860, 1040) and glides to the button's center (1546, 400), arriving at 4.1 s; it presses at 4.1–4.2 s.
- 4.2–4.6s: the button reads "Sending" with three dots appearing 0.08 s apart, then becomes an outlined "Sent" with a check (1.5px green border, green text); the pill switches to Sent; the track fills Draft to Sent (0.3 s, easeInOutCubic) and "9:41 AM" types under it.
- 4.6–4.95s: the track fills to Viewed, "10:02 AM" types, the pill reads Viewed.
- 4.95–5.35s: the track fills to Paid, "2:17 PM" types, the pill reads Paid; the stamp drops at 5.05 s and lands at 5.19 s with the sheet dip.
- 5.2–5.95s: the toast rises 24px and fades in (5.2–5.5 s); the balance rolls to $34,495.40 (5.2–5.95 s) while the sparkline's last point climbs with it; the delta chip pops at 5.65 s; the cursor drifts down-right and fades out (5.3–5.8 s).
- 6.0s: the hero frame: the finished invoice with every row, the totals and the PAID stamp; the status track complete with all four times; the outlined "Sent" button; the balance at $34,495.40 with its chip and the sparkline's jump; the toast.
- 6.0–7.0s: hold while the push-in continues.
- 7.0–7.9s: the toast slides down 16px and fades (7.0–7.35 s); the sign-off rises into its slot, its two lines 0.12 s apart (7.4–7.9 s).
- 7.9–10.0s: hold on the final frame: the paid invoice, the status track, the balance and the sign-off. The push-in stops at 8.5 s.
For other lengths, stretch the row writing and the gaps between statuses; keep the stamp's 0.14 s drop, the balance roll at about 0.75 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 linen weave, paper fibers and stamp texture are generated in code (a canvas painted once at load from a seeded PRNG, or inline SVG filters with fixed seeds).
- 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 (Fraunces 600, 600 italic and 400 italic; IBM Plex Sans 400 and 500; IBM Plex Mono 400; Anton 400) before defining window.seek.
- Engine: HTML/CSS. Absolutely positioned DOM elements on the stage; seek(t) writes every transform, opacity, width, clip-path and text content as inline styles computed from t. No CSS transitions, CSS animations or Web Animations API. Odometer digits are 0–9 columns inside overflow-hidden spans whose translateY is computed from t; typed text is a substring computed from t. The sparkline, track, check marks and cursor are inline SVG whose path data and stroke-dashoffset are set from t. Nothing depends on the previous frame.
</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 whenever the totals are at rest they equal the rows above them (look at 2.0, 2.6 and 3.2 s); at 3.3 s all four rows read exactly as given with $9,700.00 / $485.00 / $10,185.00; every figure uses tabular digits that don't jitter while rolling; the stamp sits in the empty space left of the totals and covers no number or word; the status times read Oct 2 / 9:41 AM / 10:02 AM / 2:17 PM; the balance ends at exactly $34,495.40; the 6.0 s frame shows the whole invoice with the stamp, the full status track, the updated balance and sparkline, and the toast; and the final frame shows the sign-off in the toast's place. 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…