Product Launch Teaser Countdown

About this style

Teasers build anticipation before a launch by showing almost nothing: a shape, a color, a date. The format comes from film and consumer electronics marketing, where companies release short clips with obscured glimpses of a product weeks before it ships, and software companies adopted it for waitlists and launch announcements. A countdown gives the clip a structure and a payoff. Hiding the product behind frosted or fluted glass, shallow focus or tight crops lets designers show real interface work without giving it away. The reveal is usually just the name and the date, the two things the viewer needs to remember, followed by an invitation to join a waitlist.

Make a 10-second launch teaser in Canvas: behind a pane of fluted glass, a countdown from 5 to 1 rolls past while blurred glimpses of an unreleased notes app drift by, then the glass smooths out flute by flute to reveal the product's name and its launch date.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Hollis (fictional), a notes app that suggests links between your notes. Company: Hollis Software (fictional).
- Reveal: "Hollis" · "Notes that write back." · "11.18.26" · "Wednesday, November 18" · after the poster: "Join the waitlist at hollis.app"
- Caption during the countdown: "Something new is coming"
- Glimpses, one per count: 5, an editor paragraph with one sentence highlighted; 4, a margin suggestion card; 3, a list of notes; 2, a small graph of linked notes; 1, a line being typed.
- Length: 10 seconds.
</inputs>

<direction>
- Look: an airy, architectural teaser in soft daylight. The whole frame is a pane of reeded (fluted) glass, the kind used in shopfronts and partitions: vertical ribs that slice and repeat whatever is behind them. Behind it, a huge countdown numeral and fragments of a product drift past, readable as shapes and color but never in detail. In front, small crisp captions. The reveal is the glass itself turning clear.
- Palette: daylight paper #EEECE6 behind everything; flute highlight #FFFFFF; flute shade #2A2620; ink #1C1B19; muted ink #5B5750; persimmon #FF5A36, the one accent (a highlight, the date, a light behind the glass); soft color fields sage #9DB8A0 and butter #F3D9A4; glimpse UI: page #FFFFFF, text #2B2925, highlight #FFD9CC, chip #E4EEE5, lines #DCD7CE.
- Type: Big Shoulders Display 800 for the countdown numerals (620px) and 700 for the date (112px, tracking 0.04em); Instrument Serif 400 for the name (280px, tracking −0.02em) and its italic for the line (52px) and the glimpses' body text (30px); DM Mono 400/500 for captions (20px, tracking 0.06em) and small UI labels in the glimpses (16px).
- The scene behind the glass, drawn each frame into an offscreen canvas A at full resolution: the paper; two soft color fields (sage, 900px across, drifting from (420, 760) to (560, 700); butter, 760px across, from (1500, 300) to (1380, 360); radial gradients at 70% falling to 0); a persimmon light (a 420px radial gradient at 55%) sliding from x 300 to x 1600 behind the counts; the current numeral in ink at 88%, centered on (960, 560); and the current glimpse, a 760 × 460 crop of the product UI (page white, radius 14, a soft 30px shadow at 10%) entering from beyond the frame edge at 60px/s, alternating to the right and left of the numeral and overlapping it by about 120px.
- The glass, drawn from A onto the visible canvas: 28px flutes across the whole frame (69 strips). Each frame, also make B, a copy of A blurred 5px. For each flute, draw the slice of A (and of B over it) that is 2.2× the flute's width, centered on the flute and shifted 0.35 of a flute to the left, squeezed into the flute's width: this makes the ribs refract and repeat the image. Over each flute paint a horizontal gradient: #FFFFFF at 24% on its left 6px, clear in the middle, #2A2620 at 7% on its right 4px; that rhythm of light and shade is the glass. Every flute has a refraction amount r from 0 to 1 that scales the squeeze (2.2× at r = 1, 1× at r = 0), the shift, B's opacity and the gradient's opacity together; r is 1 everywhere until the reveal.
- The countdown: each numeral rolls in from below as the previous one rolls out above, behind the glass, 0.3 s on easeInOutCubic with 180px of travel and crossing opacities; then it holds, drifting up 20px until the next count. Through the flutes it reads as a soft, sliced, unmistakable 5, 4, 3, 2, 1.
- The glimpses, each real UI drawn in code: 5: an editor with the heading "Weekly review" and three lines of serif text, the middle sentence "we keep solving the same onboarding problem" on a #FFD9CC highlight; 4: a margin card with a small persimmon dot, "Link to: Q3 planning notes", "3 shared ideas" and two buttons, "Link" and "Dismiss"; 3: a list of five notes with times: "Pricing interviews · 9:41", "Q3 planning notes · Yesterday", "Onboarding audit · Mon", "Reading list · Oct 2", "Hiring plan · Sep 28"; 2: seven notes as rounded labels joined by 1.5px lines, one of them persimmon; 1: one serif line, "Hollis noticed you wrote about this before", typing at 28 characters per second with a caret that blinks at 1 Hz once the line ends.
- The reveal: a wavefront crosses the frame from left to right in 0.8 s on easeInOutCubic, and each flute's r falls from 1 to 0 over the 0.25 s after the front passes it, so the glass smooths into clear daylight as the front travels. Two reeded bands survive at the edges, x 0–112 and 1808–1920, settling at r = 0.6, as a frame. Behind the glass at the same time, the persimmon light settles into a 1100px ellipse centered on (960, 1180) at 22%, a warm light rising from the bottom edge.
- The reveal composition, drawn in A from 4.5 s on: "Hollis" centered on x 960 with its baseline at y 520 in ink; "Notes that write back." centered on a baseline at y 610 in muted ink; "11.18.26" centered on a baseline at y 790 in persimmon; "Wednesday, November 18" in DM Mono 500 22px muted ink, centered at y 846.
- The crisp front layer, drawn after the glass and never refracted: "Something new is coming" at (112, 92) in DM Mono 400 20px, ink at 72%; a 2px ink progress line at y 1000 from x 112 that grows to x 1808 across the countdown. At the reveal both fade out; later, "Join the waitlist at hollis.app" appears centered on (960, 990) in DM Mono 500 20px ink.
- Motion rules: everything behind the glass moves slowly and smoothly; the numeral rolls are the only quick moves; the reveal is one continuous wave; the front layer never moves, it only fades.
- Premium: believable fluted glass (rhythmic highlights, repeated slices, a soft frost) over a bright, warm-white scene; numerals that read through the ribs; glimpses that tease shape and color but no detail; a reveal that is the glass turning clear. Cheap: a black screen with glitching numbers, random blur boxes, light leaks and lens flares, a white flash on the reveal, a zoom-punch on every number.
- Banned: dark backgrounds, glitch, RGB split, chromatic aberration, lens flares, light leaks, a white flash, shake, any blink faster than 1 Hz, real book or product names, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–0.5s: the fluted pane fades up from plain paper; the color fields drift; the caption fades in.
- 0.5–1.3s: "5" rolls in; glimpse 5 drifts in to its right.
- 1.3–2.1s: "4"; glimpse 4 drifts in to its left.
- 2.1–2.9s: "3"; glimpse 3 to its right.
- 2.9–3.7s: "2"; glimpse 2 to its left.
- 3.7–4.5s: "1"; glimpse 1 to its right, its line typing; the persimmon light reaches the center; the progress line reaches x 1808.
- 4.5–4.8s: "1" rolls out above and the last glimpse fades; the name, line and date appear in A behind full-strength flutes; the caption and progress line fade out.
- 4.75–5.8s: the reveal wave crosses left to right; the name sharpens out of the ribs as the front passes it.
- 6.0s: the hero frame: clear glass framed by the two reeded edge bands, "Hollis", the line, the date and its day, all crisp on warm daylight.
- 6.6–7.0s: "Join the waitlist at hollis.app" fades in.
- 7.0–8.8s: the color fields drift to a stop (easeOutSine).
- 8.8–10.0s: hold, completely still.
For other lengths, change the time per count (0.6–1.0 s) and the hold; keep the reveal wave about 0.8 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: 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 and weight before defining window.seek: Canvas won't fetch fonts itself, so the awaited loads matter.
- Engine: Canvas 2D, repainting every frame from scratch, every backing store (the visible canvas, A and B) sized from CSS size × devicePixelRatio. Draw the five glimpses into their own offscreen canvases once at load (glimpse 1's typed line is drawn per frame), then place them in A. Use ctx.filter = 'blur(5px)' once per frame to make B, and drawImage with source rectangles for the flutes.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10) plus 0.9, 2.5, 4.1 and 5.2: screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that each numeral reads clearly through the flutes; the glimpses show shape and color but no readable detail behind the glass; the flutes have a visible rhythm of highlight and shade; the front caption stays crisp; the reveal has no flash and sweeps left to right; at 5.2 s the left part of the frame is clear and the right still fluted. At 6.0 s the glass is clear except the edge bands and the name, line, date and day are crisp and centered. The final frame adds the waitlist line and nothing moves after 8.8 s. 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…