A straight-faced 1990s infomercial for a bookkeeping app on worn VHS: black-and-white spreadsheet disasters, a starburst wipe into color, a lassoed chrome logo, receipts sorting themselves, a slashed price, a toll-free number and "But wait, there's more!"
Written and rendered by AI CSS Animations Oct 19, 2026
The infomercial, a program-length TV commercial, took off in the United States after the FCC dropped its limits on commercial time in 1984, and late-night television filled with them. Its devices became shared culture: black-and-white footage of everyday failures, a pitchman who can't believe the price either, starbursts, slashed prices, a toll-free number that never leaves the screen and the line "But wait, there's more!", made famous by Ginsu knife commercials. Brands parody the format because almost everyone recognizes it, and its earnest overselling lets a company make a self-aware joke about its own pitch. It works when every cliché is played completely straight, with the saturated colors, chrome type and worn VHS texture of the original, so the sincerity carries the joke.
Make a 10-second 1990s infomercial parody for a bookkeeping app, played completely straight: black-and-white footage of spreadsheet disasters, "There's got to be a better way!", a starburst wipe into saturated color, a chrome logo lassoed by a rope, receipts sorting themselves, a slashed price, a toll-free number and "But wait, there's more!", all on a worn VHS tape. <inputs> If I don't give you something, use the default and don't ask. - Product: LedgerLasso, the bookkeeping app that ropes in every receipt (fictional). - Problem captions: "TIRED OF SPREADSHEETS THAT FIGHT BACK?" · "SHOEBOX FULL OF RECEIPTS?" · "THERE'S GOT TO BE A BETTER WAY!" - Logo subline: "THE BOOKKEEPING APP THAT ROPES IN EVERY RECEIPT!" - Demo: 12 receipts sort into Supplies (4 receipts, $214.30), Travel (2, $88.00) and Meals (6, $46.75); total $349.05. - Starbursts: "SORTS ITSELF!" · "TAX TIME? DONE!" · "ONLY $19.95/MO!" with "$49.95" slashed above it. - Phone bar: "CALL NOW! 1-800-555-0142" (a 555 number, reserved for fiction) and "OPERATORS ARE STANDING BY". - Bonus: "BUT WAIT... THERE'S MORE!" then "ORDER IN THE NEXT 10 MINUTES AND GET A 2ND USER FREE!" with "A $240 VALUE!" - Fine print: "LedgerLasso is fictional. Results not typical. Not available in stores." - VCR display: "PLAY ▶" and "SP". - Length: 10 seconds. </inputs> <direction> - Look: a late-night 1990s infomercial taped off the air onto VHS and parodied with total sincerity. Every cliché is played straight, the graphics are proud of themselves (chrome type, starbursts, thick outlines and drop shadows, a turning sunburst behind the product), and the tape is worn but watchable. The comedy comes from the earnest overselling, never from winks on screen. - Palette, color scenes: a studio backdrop radial from royal blue #1F55E0 at the center to #0E2C8F at the edges, with a 12-ray sunburst over it in #2E6BF5 at 30%, turning 8°/s; slam-caption yellow #FFD21F with a 9px #111111 outline and a 7px drop shadow in #E8261C; starbursts in yellow #FFD21F or red #E8261C with #111111 outlines and cream #FFF8E7 or #111111 text; the product window's title bar a gradient from magenta #E2318B to teal #18B5B0; the chrome logo filled top to bottom with #FFFFFF, #BFD8FF, #3C64C8, a hard horizon at #0B1B4D, then #8FB4FF and #FFFFFF, with a 6px #0B1B4D extrude; rope tan #C8955A with #8A5E30 twists. Black-and-white scenes: a grey ramp from #141414 to #E6E6E6, slightly crushed, with the yellow captions still in color. - Type: Anton 400 for slam captions (88px, uppercase, line-height 0.98, skewed −8°); Lilita One for starburst text (40–56px) and for the chrome logo (150px, letter-spacing 0.01em); Arimo 700 italic for the subline and the phone bar; Arimo 400, 18px, for the fine print; VT323, 48px, for the VCR display. - The black-and-white "before" set (0.5–2.4 s), framed straight on: a desk edge across the lower third at y 760; a beige CRT monitor (a box 620 × 480 centered at (900, 470), screen inset 40px) showing a spreadsheet grid whose cells turn to "#ERROR!" in a diagonal wave from the top-left (20 cells, 0.04 s apart); a stack of paper receipts at x 1300–1500 that topples and slides off the desk, each receipt a skewed rectangle with ink lines falling with gravity and spin; a coffee mug at x 520 that tips over at 1.6 s and a spill that spreads as a growing blob. The whole frame drifts ±3px on slow seeded noise, like a handheld camera. - Slam captions: each scales from 1.35 to 1.0 in 0.12 s on easeOutBack 1.8 and turns from −3° to 0°, then holds; problem captions sit centered on a lower third at y 880, the "better way" line at the center of the frame on two lines at 110px. A slam may shake the frame 8px once, decaying in 0.2 s. Never a white flash. - The starburst wipe (2.40–2.80 s): a 16-point starburst (inner radius 0.62 of the outer) in yellow with a red inner burst, spinning 120°/s, grows from nothing past the corners on easeInCubic, and the color world appears inside it. - The logo (2.80–3.90 s): "LedgerLasso" in chrome type centered at y 430, zooming from 0.6 to 1.0 with a 20° swing about its vertical axis that settles (fake it with horizontal scale and skew); a lasso (an ellipse drawn as a 14px tan stroke with dark twist dashes along it, its loose end trailing off to the right) spins above the logo, drops around it and cinches tight to its outline in 0.35 s; the subline below at y 560, Arimo 700 italic 40px, cream with a 4px #111111 outline. - The product window (from 3.90 s): a chunky original window 760 × 470 at x 140–900, y 300–770, radius 14, a cream #FFF8E7 body, a 46px gradient title bar reading "LedgerLasso — March" in Arimo 700, 24px, and three round buttons in yellow, red and teal (no real operating system's chrome). Inside: three category rows (Supplies, Travel, Meals), each with a receipt count and a total in Arimo 700, 34px, and a total row. Twelve paper receipts fly in from the right edge one after another and drop into their rows, each row's count and total rolling up as they land. - The hero layout (by 5.9 s): the logo scaled to 0.55 at top-left, centered at (520, 190); the window at the left; "SORTS ITSELF!" (230px star) at (1040, 250) and "TAX TIME? DONE!" (230px) at (1760, 260); "$49.95" in Anton 72px, cream, at (1400, 330) with a red slash through it; the "ONLY $19.95/MO!" star (400px, red with cream text) at (1400, 560); the phone bar across the full width at y 860–1010: red #E8261C with 6px yellow edges, "CALL NOW! 1-800-555-0142" in Arimo 700 italic, 72px, cream with a #111111 outline, and "OPERATORS ARE STANDING BY" in Arimo 700, 26px, yellow, under it. Starbursts pop in (scale 0 → 1.15 → 1 in 0.25 s) and then rock ±4° at 1.5 Hz. - The final card (from 8.4 s): the backdrop and sunburst; the logo at 0.7 scale centered at y 250; "CALL NOW!" in Anton 110px yellow at y 470; "1-800-555-0142" in Anton 150px cream with a red shadow at y 640; the price star (260px) at (1620, 820); the fine print centered at y 1030. - The tape: every frame, the composed 2D picture goes through one WebGL fragment pass: luma kept sharp with a slight 1.5px horizontal softening; chroma blurred 6px horizontally and shifted 3px right (in YIQ); saturation × 1.15; blacks lifted so nothing is darker than #141414; scanlines every 3px at 8%; per-line horizontal jitter of up to 1.5px from seeded noise that changes 30 times a second and mostly rests near zero; head-switching noise in the bottom 14px (rows displaced up to 18px); a tracking band (a 60px strip of horizontal noise and displacement) that rolls up the frame at 0.15–0.55 s and once more for 0.3 s at the cut to the final card; low grain at ±4%. No full-frame brightness change, ever. - VCR display: "PLAY" followed by a filled triangle (drawn, not a glyph) at the top-left (90, 100) and "SP" at the top-right, VT323 48px, #F2F2F2 with a 2px black shadow, drawn after the tape pass and shown only 0.0–1.2 s. - Premium: sincere, saturated 90s graphics with real chrome, outlines and shadows; slams on a rhythm; every number adding up; a tape that looks worn but keeps every word readable. Cheap: modern flat design with a filter on top, unreadable smeared text, constant glitching, jokes that wink at the camera, random meme fonts. - Banned: white flashes or strobing, full-frame flicker, datamosh, glitches that hide text, real infomercial brands, products or pitchmen, real operating system window chrome, real phone numbers other than 555-01XX, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second. </direction> <structure> - 0.00–0.50s: a blue VCR screen (#1C3FB0) with "PLAY ▶" and "SP"; the tracking band rolls up from 0.15 s, revealing the black-and-white picture. - 0.50–1.50s: the desk; the error wave runs across the spreadsheet; "TIRED OF SPREADSHEETS THAT FIGHT BACK?" slams in at 0.70 s. - 1.50–2.40s: the receipts topple and slide off the desk, the mug tips at 1.6 s; "SHOEBOX FULL OF RECEIPTS?" replaces the first caption at 1.55 s; "THERE'S GOT TO BE A BETTER WAY!" slams center at 1.95 s with a shake. - 2.40–2.80s: the starburst wipe into color. - 2.80–3.90s: the chrome logo zooms in, the lasso cinches (3.20–3.55 s), the subline slams at 3.50 s. - 3.90–5.30s: the logo shrinks to the top-left and the subline leaves; the window rises in from below on easeOutBack (3.90–4.20 s); the 12 receipts fly in 0.08 s apart (4.25–5.21 s) and the totals roll; "SORTS ITSELF!" pops at 4.40 s and "TAX TIME? DONE!" at 4.90 s; the total row lights $349.05 at 5.25 s. - 5.30–5.90s: the red slash draws through "$49.95" (5.30 s); "ONLY $19.95/MO!" pops at 5.45 s; the phone bar slides up from the bottom (5.60–5.85 s). - 5.9–6.3s: hold. The 6.0 s frame is the hero: logo, window with all three rows and the total, both feature stars, the slashed price, the price star and the phone bar, all readable through the tape. - 6.30–7.40s: the hero dims to 45% and shrinks to 0.92; "BUT WAIT..." slams at the center at 6.35 s (y 440) and "THERE'S MORE!" at 6.75 s (y 600) with a shake. - 7.40–8.40s: the bonus card slams in: a cream 900 × 360 box with a 10px red border, "ORDER IN THE NEXT 10 MINUTES AND GET A 2ND USER FREE!" in Anton 64px on three lines, a "+1 USER" badge and a yellow "A $240 VALUE!" star on its corner. - 8.40–8.80s: a tracking band rolls as the cut to the final card; the logo (8.45), "CALL NOW!" (8.55), the number (8.65) and the price star (8.75) slam in; the sunburst eases to a stop by 8.8 s and the stars stop rocking. - 8.80–10.0s: hold on the final card, only the tape's grain alive. For other lengths, keep every slam and the rhythm between them; stretch the demo and the holds; 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 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: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter. The tape is one raw WebGL fragment pass (no libraries, preserveDrawingBuffer: true) over the composed 2D frame, uploaded as a texture each seek; the VCR display is drawn on a 2D canvas above it. - Falling receipts, the toppling stack and the spill are closed-form functions of time (parabolas, fixed spins, an easing radius); jitter, grain and tracking noise are hashed from the frame index floor(t × 30) and a fixed seed, so any t renders the same frame every 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 that every caption and number stays readable through the tape; the black-and-white scenes are truly greyscale except the yellow captions; the wipe has no white flash and no frame changes brightness all at once; the totals add up (214.30 + 88.00 + 46.75 = 349.05; 4 + 2 + 6 = 12 receipts); nothing is cut off by the frame edge; the 6.0 s frame shows the logo, the full window, both stars, the slashed and new price and the phone bar; and the final frame is the call-now card with the number, price and fine print. 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.
A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…
A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…
A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…
Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…
More like this on the motion design inspiration board: Kinetic typography inspirationUI animation inspirationSaaS video inspiration