Us vs Them Comparison Table

About this style

Comparison tables, with features down the side and products across the top, have long been a fixture of software marketing in sales sheets, print ads and, today, pricing and comparison pages. Many companies publish pages that compare them with a category's incumbent, and some describe the alternative generically rather than naming a competitor. In video, the table becomes a rhythm: one row lands per beat, the product's column fills with checks and the alternatives fade back. It works when the rows are specific, partial answers are shown honestly instead of as flat crosses, and the product's column stands apart through layout and color rather than through exaggerated claims.

Make a 10-second "us vs them" comparison table promo on warm white: eight feature rows land one per beat, a check pops into the product's dark highlighted column on each, the two alternatives' cells land and then fade to grey with crosses and honest caveats, and the score row ends on 8 of 8.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Hearthdesk, a customer support platform (fictional). Wordmark: "Hearthdesk".
- Alternatives, described generically: "Legacy help desk" and "Shared inbox".
- Headline: "Why support teams switch to Hearthdesk". Subline: "Compared with a typical legacy help desk and a shared inbox, October 2026."
- Rows (feature · Hearthdesk · Legacy help desk · Shared inbox), where ✓ is yes, ◐ is partial with a caveat, ✕ is no:
  "AI drafts replies in your brand voice" · ✓ · ✕ · ✕
  "Email, chat and SMS in one queue" · ✓ · ◐ "email + chat" · ◐ "email only"
  "SLA timers and auto-escalation" · ✓ · ◐ "enterprise plan" · ✕
  "Customer history on every ticket" · ✓ · ✓ · ✕
  "Built-in reporting" · ✓ · ◐ "paid add-on" · ✕
  "Unlimited read-only seats" · ✓ · ✕ "$29 per seat" · ✓
  "Live in one afternoon" · ✓ · ✕ "6–8 weeks" · ✓
  "Free migration, done for you" · ✓ · ✕ "$4,000 fee" · ✕ "do it yourself"
- Score row: Hearthdesk "8 of 8" · Legacy help desk "1 of 8" with "3 partial" · Shared inbox "2 of 8" with "1 partial".
- Button: "Start free trial →".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a crisp, confident landing-page table, typeset like good print: warm white page, black ink, hairlines, one dark product column that reads as a raised card, and tomato checks. Staccato and rhythmic: a row lands on every beat. The alternatives are shown fairly (their real checks stay checks) and then step back into grey, so the product column wins by contrast, not by insult.
- Palette: page #F4F2EC; ink #141414; secondary #6B6860; hairlines #E1DED6; product card #161513 with hairlines #2C2A26 and cream text #F7F4EC; tomato #FF5B37 (product checks, score accent); faded grey #BEBAB1 (greyed text, icons and crosses); caveat grey #8A867D; button ink #141414 with cream text. No gradients, no glows.
- Type: Hanken Grotesk 800 for the headline (54px) and the product score (34px); Hanken Grotesk 400, 500, 600 and 700 for the subline (20px 400), the row labels (22px 500), the column headers (22px 700 in the card, 18px 600 outside), the other scores (28px 700) and the button (19px 600); Martian Mono 400 13px for caveats and the "partial" notes.
- Layout:
  - Headline in ink at x 160, baseline y 128; subline in secondary at baseline y 166. The button at x 1500–1750, y 92–148, radius 28, right-aligned with the table.
  - Columns: feature labels x 160–900; the product card x 930–1190 (center 1060), y 196–1004, radius 22, with a shadow 0 30px 60px -30px rgba(20,20,20,0.45); Legacy help desk centered on x 1340; Shared inbox centered on x 1620; the table's right edge at x 1750.
  - Header row y 210–290: in the card, the mark (a 26px cream rounded square holding a small tomato arch, like a hearth opening) and "Hearthdesk" in cream, centered on x 1060 at baseline y 262; the other two headers in ink, centered on their columns at the same baseline.
  - Rows: eight rows, 76px tall, from y 300 (row tops 300, 376, 452, 528, 604, 680, 756, 832); the label at x 160, baseline row top + 46; hairlines under each row from x 160 to 1750, switching to #2C2A26 inside the card. In a cell with no caveat the icon centers on row top + 38; with a caveat the icon centers on row top + 28 and the caveat sits centered below it at baseline row top + 64.
  - Icons, 26px: a check is a filled circle (tomato in the card, ink outside) with a 3px white tick; a cross is two 2.5px ink strokes, 13px long; a partial is a 2px ink circle outline with its left half filled.
  - Score row y 916–996: "Score" Hanken 700 22px at x 160, baseline y 966; "8 of 8" in cream in the card with a 3px tomato bar under it; "1 of 8" and "2 of 8" in their columns with "3 partial" / "1 partial" in Martian Mono below.
- The beat: rows land every 0.42 s. On a row's beat: the label slides in from 16px left and fades (0.2 s, easeOutCubic); the product check pops from scale 0 on easeOutBack (2.2) over 0.22 s and its tick draws over the next 0.16 s; the two alternative cells land at the same moment in full ink (icon plus caveat), then 0.28 s later they fade to faded grey over 0.3 s (icons, crosses, caveats and even their real checks). The score row ticks with each row: the numbers change with a 0.15 s vertical roll (Hearthdesk counts 1 to 8; Legacy reaches 1 at row 4; Shared inbox reaches 1 at row 6 and 2 at row 7; the partial notes update too).
- After the last row, the two alternatives' headers and scores fade to grey as well, and the product card lifts: scale 1.0 to 1.025 around its center with a deeper shadow (0 40px 80px -30px at 55%), 0.5 s easeOutCubic.
- The cursor: an original arrow drawn in SVG, 24px, ink with a 2px white outline; used only at the end.
- Premium: specific rows with honest partials and caveats, a rhythm you can feel, a product column that stands out through contrast and lift, print-quality type. Cheap: red crosses everywhere, a "Best value!" ribbon, sad emoji in the competitor column, naming or mocking a real competitor, rows that all land at once, a glowing column.
- Banned: real company names, logos and UI copied from existing products (no real competitor named or implied), ribbons and badges like "Best value", emoji, red crosses, glows, gradient backgrounds, purple, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: the headline rises in by line mask (0.0–0.5 s, easeOutQuart), then the subline (0.3–0.8 s); the product card rises 24px and fades in (0.3–0.8 s); the row hairlines draw left to right (0.4–0.9 s, 30 ms apart).
- 0.8–1.2s: the three headers fade up; the score row appears with "0 of 8" in each column.
- 1.26–4.6s: the eight rows land on beats at 1.26, 1.68, 2.10, 2.52, 2.94, 3.36, 3.78 and 4.20 s, each with its check, its alternatives' cells and their fade to grey; the scores tick with them.
- 4.6–5.2s: the alternatives' headers and scores fade to grey; the product card lifts (4.7–5.2 s); the tomato bar draws under "8 of 8".
- 5.3–5.7s: the button slides in from 20px right and fades in.
- 6.0s: the hero frame: the headline and subline, all eight rows with every icon and caveat, the alternatives greyed, the lifted product card with eight tomato checks, the scores and the button.
- 6.8–7.4s: the cursor enters from (1860, 400) and rests on the button; the button's arrow nudges 4px right and the fill deepens to #000000 (0.2 s).
- 7.4–10.0s: hold on the final frame: the full table and the hovered button.
For other lengths, change the beat (0.35–0.6 s) and stretch the final hold; keep the grey-out lag at 0.28 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: everything is drawn in SVG.
- 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 (Hanken Grotesk 400, 500, 600, 700 and 800; Martian Mono 400) before defining window.seek.
- Engine: SVG. One inline <svg viewBox="0 0 1920 1080"> scaled to fit; seek(t) sets attributes (transform, opacity, fill, stroke-dashoffset, clip rectangles) and text content from t. No SMIL, no CSS animations. Measure tick paths with getTotalLength() once at load for their dash arrays; interpolate colors in code, never with CSS. The rows, their cells and the score sequence come from one data array matching the inputs.
</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 rows land on their beats and never two at once; every cell matches the inputs, including the alternatives' real checks (Legacy on row 4, Shared inbox on rows 6 and 7); caveats fit inside their 260px columns; at 3.2 s the scores read 5 of 8, 1 of 8 · 3 partial and 0 of 8 · 1 partial; the product card's shadow and lift look like a raised card, not a glow; the 6.0 s frame shows the whole table with the scores 8 of 8, 1 of 8 · 3 partial and 2 of 8 · 1 partial and the button; and the final frame shows the hovered button. 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…