New Feature Announcement Card

About this style

The feature announcement card is a workhorse of product marketing on social media: one feature, a bold name, a "New" label and a screenshot, sized to read in a feed. Product teams post them on launch mornings, in changelogs and in release threads. Animating the card adds proof: a short screen recording, or a recreation of one, shows the feature working in a few seconds, with a cursor standing in for the user. The best ones still read as a single frame, keep the copy to a name and one line, and show one real, specific use instead of a generic interaction.

Make a 10-second feature announcement card for social, in HTML and CSS: a "New" pill and the feature name set big on the left, a product screenshot sliding in on the right, and a cursor that uses the feature for real: it sets a task to repeat weekly, checks it off, and next week's copy appears.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Brisk (fictional), a to-do app for small teams.
- Feature: "Recurring Tasks" · line: "Set it once. Brisk adds the next one when you finish." · footer: "Available on all plans · Web, desktop and mobile"
- The task: "Send weekly client report", assigned to Priya Shah, due Mon, Nov 2 at 10:00, project "Client ops".
- The repeat choice: "Every week on Monday", so the next one is due "Mon, Nov 9".
- Length: 10 seconds.
</inputs>

<direction>
- Look: the card a product team posts on launch morning: bright, friendly and readable in a feed at a glance. A pale sky backdrop, a big two-line feature name in a heavy geometric sans, a marigold "New" pill, and a real-looking screenshot with a solid marigold block offset behind it like a print misregistration. The cursor proves the feature works in a few seconds without a single caption.
- Palette: backdrop #D9E8F5, shifting slightly to #E6F0F8 toward the bottom right; ink #14213D (headline, UI text); secondary #47546E; tertiary #8390A6; marigold #FFB000 (the pill, the offset block, the click ripple, selection accents); marigold tint #FFF1CC (the new task's highlight); app surfaces #FFFFFF; app hairlines #E5E9F0; hover #F3F6FA; check green #1F9D6A; avatar fills #FFD7C2, #C9E3D1, #D6DDF7 and #F7E0A8 with ink initials.
- Type: Plus Jakarta Sans throughout: the feature name 800 112px, line height 0.98, tracking −0.03em; the line 500 32px/44px; the pill 700 22px; the brand 800 32px; the footer 600 20px; inside the screenshot, title 22px 700, body 17px 500, small 14px 600.
- Layout: the brand at (120, 120): an original mark (a 44px ink rounded square, radius 12, holding a white check whose short stroke trails three short speed lines to its left) and "Brisk". The pill at (120, 332): 44px tall, radius 22, marigold, "New" in ink with 20px side padding. "Recurring" and "Tasks" on baselines at y 480 and 590, x 116. The line at (120, 664), wrapped to 520px. The footer at (120, 980) in secondary. The screenshot window at x 780–1800, y 150–930 (1020 × 780, radius 20, white, shadows 0 30px 60px rgba(20,33,61,0.16) and 0 2px 6px rgba(20,33,61,0.08)), with the marigold block, the same size and radius, 28px right and 28px down behind it.
- The screenshot, in window coordinates: a 64px header with "This week" (22px 700) at (28, 40), "Nov 2 – 8" after it in tertiary, and four overlapping 30px avatars at the right. A task list at x 0–560, in groups with 13px 600 uppercase tertiary headers and 52px rows (a 20px round checkbox, the title, the assignee's initials avatar and a due chip at the right): "TODAY · MON, NOV 2": "Send weekly client report" (PS, 10:00), "Review homepage copy" (LP), "Approve October invoices" (AR), "Book venue walkthrough" (SO); "TOMORROW · TUE, NOV 3": "Draft Q4 roadmap" (LP), "1:1 with Jordan" (PS); "NEXT WEEK": "Quarterly tax filing" (AR, Mon, Nov 9). A 1px divider at x 560. The detail panel at x 560–1020 for the selected task: its title in 22px 700, then 48px field rows with labels in tertiary at x 588 and values at x 720: "Assignee · Priya Shah" (with avatar), "Due · Mon, Nov 2, 10:00", "Repeat · Never", "Project · Client ops"; "Notes" with "Pull numbers from the dashboard. Send by noon."; "Subtasks 2/3" with three rows, two checked. Before the first click the panel shows an empty state, "Select a task to see details".
- The repeat menu opens below the Repeat value: 300px wide, white, radius 12, a soft shadow, 44px rows: "Never", "Every day", "Every weekday", "Every week on Monday", "Every month on the 2nd", "Custom…"; the hovered row #F3F6FA. Once chosen, the value reads "Every week on Monday" after a loop icon (two curved arrows), with "Next: Mon, Nov 9" under it in 14px 600 secondary.
- The cursor: an original arrow (ink fill, 2px white outline, a soft shadow), 28px tall, moving on gentle quadratic arcs that bow 40px, on easeInOutCubic, slowing into each target. A click: the cursor dips to 0.9 scale for 0.1 s and a marigold ring expands from 0 to 36px radius as it fades from 60% to 0 over 0.4 s.
- Checking off: the checkbox fills green and a white check draws in 0.2 s; a strikethrough draws across the title left to right in 0.25 s and the title fades to tertiary. Then a new row, "Send weekly client report" (PS, a loop icon, "Mon, Nov 9"), slides down into the top of NEXT WEEK, pushing "Quarterly tax filing" down 52px, its background #FFF1CC fading to white over 1.6 s.
- Premium: a crisp, believable app with real tasks and dates that agree, a cursor with intent (it slows into targets and never jitters), a bold layout that works as a still post, one accent color doing all the pointing. Cheap: a fake browser bar, sparkles or confetti on the "New" pill, a bouncing cursor, "Click here" captions, a feature name in a gradient, a screenshot that tilts in 3D.
- Banned: gradients on text, glow, sparkles, emoji, confetti, 3D tilts, browser chrome copied from any real browser, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–0.4s: the backdrop; the brand fades in.
- 0.3–0.6s: the pill scales from 0.6 to 1 on easeOutBack.
- 0.4–1.2s: "Recurring" and "Tasks" rise 40px through masks, 0.12 s apart (easeOutExpo); the line fades up at 1.0 s and the footer at 1.2 s.
- 0.8–1.6s: the screenshot slides in from 240px to the right as it fades in (easeOutQuint); the marigold block follows 0.08 s behind.
- 1.8–2.3s: the cursor enters from the bottom right and arcs to the "Send weekly client report" row; click at 2.3 s; the row takes the hover color and the detail panel fills in (0.2 s).
- 2.4–3.0s: the cursor moves to "Repeat · Never"; click at 3.0 s; the menu opens from its top edge (scale 0.96 → 1 with a fade, 0.18 s).
- 3.0–3.8s: the cursor glides down the options, each row lighting as it passes; click on "Every week on Monday" at 3.8 s; the menu closes and the value updates with the loop icon; "Next: Mon, Nov 9" fades in at 4.0 s.
- 4.1–4.7s: the cursor arcs to the task's checkbox; click at 4.7 s; the check and the strikethrough.
- 4.9–5.4s: the next occurrence slides into NEXT WEEK.
- 5.4–5.9s: the cursor drifts 60px down and right and rests over the list.
- 6.0s: the hero frame: the brand, pill, name, line and footer; the screenshot with the checked task, the new Nov 9 task with its tint still visible, and Repeat set to weekly.
- 6.0–6.5s: the tint finishes fading.
- 6.5–10.0s: hold.
For other lengths, change the pauses between the cursor's moves and the hold; keep each click's feedback timing 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: 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 weight before defining window.seek.
- Engine: HTML/CSS. The screenshot is real DOM; one timed script defines the cursor's path (each leg's start, end and bow) and every UI state change, and seek derives the cursor position, the hover row, the menu, the panel, the checkbox, the inserted row and the push-down from t. Icons and the cursor are inline SVG.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10) plus 2.4, 3.5 and 4.8: screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that every click lands on its target with the ring centered on the cursor tip; at 3.5 s the menu is open with a hovered row under the cursor; at 4.2 s Repeat reads "Every week on Monday" with "Next: Mon, Nov 9"; at 5.0 s the task is checked and struck through; the new row never overlaps "Quarterly tax filing"; the dates agree everywhere; the feature name and the screenshot don't touch. At 6.0 s the whole card is complete and readable as a still post. The final frame is that card with the tint gone. 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…