Launch Week Announcement

About this style

A launch week spreads a batch of releases across five days, one feature a day, each with its own announcement, demo and post. Developer-platform companies made the format popular in the early 2020s, and many now run numbered launch weeks a few times a year. It turns a release cycle into an event: followers come back every day, each feature gets its own moment instead of a line in a changelog, and the opening announcement gives people a reason to watch. The announcement usually shows the week as a row of days revealed one at a time, so the shape of the week is clear before any detail.

Make a 10-second "launch week" announcement in HTML and CSS: five face-down day cards deal onto a dark stage, then flip one by one, Monday to Friday, each revealing that day's feature in its own color with a small line illustration that draws itself.

<inputs>
If I don't give you something, use the default and don't ask.
- Company: Coldframe (fictional), a serverless database platform for app developers.
- Event: "Coldframe Launch Week 04" · "Nov 16–20, 2026" · headline "Five days. Five launches." · footer "New launch every day at 9:00 PT" and "coldframe.dev/week"
- Days (front: day and date; back: feature and line):
  Mon, Nov 16 · "Branching" · "A full copy of your database for every pull request."
  Tue, Nov 17 · "Edge Functions" · "Deploy code to 18 regions with one command."
  Wed, Nov 18 · "Vector Search" · "Store embeddings next to your rows and query both."
  Thu, Nov 19 · "Point-in-Time Restore" · "Rewind any database to any second in the last 30 days."
  Fri, Nov 20 · "Usage Pricing" · "Pay per query. The first 5 GB is always free."
- Length: 10 seconds.
</inputs>

<direction>
- Look: a confident developer-brand announcement. A near-black stage with a fine dot grid, chunky geometric display type, monospace labels, and five tall cards that carry all the color: face down they are quiet charcoal slabs; flipped, each is a flat, saturated block of its day's color with ink type. The flip is real 3D: perspective, a lift, a sheen sliding across the face, a shadow that grows and tightens.
- Palette: stage #0F0F0E; dot grid #FFFFFF at 5% (2px dots every 24px), fading out toward the edges under a radial mask; headline #F4F2EC; labels #8C8B86; card backs (the face-down side) #1B1B1A with a 1px #2F2F2D border and a 1px #3A3A37 top-edge highlight; day colors: Mon saffron #F2C14E, Tue coral #FF7A59, Wed sea green #5CC6AE, Thu sky #8DB6FF, Fri rose #F28DC0; ink on color #121211; the URL #F4F2EC.
- Type: Syne 800 for the headline (92px, tracking −0.02em) and the face-down day names (96px); Syne 700 for feature names on the cards (40px, line height 1.05); IBM Plex Mono 500 for labels (18px, uppercase, tracking 0.12em) and 400 for card lines (18px/26px).
- Layout: "COLDFRAME LAUNCH WEEK 04" at (96, 108) with an original mark before it (a 22px square outline with a smaller filled square in its top right corner, #F4F2EC); "NOV 16–20, 2026" right-aligned to x 1824 at y 108; the headline on a baseline at y 220, x 96. Five cards 320 × 520 with 32px gaps from x 96 to 1824, top at y 340. The footer on a baseline at y 1000: "New launch every day at 9:00 PT" at x 96 in the label color, "coldframe.dev/week" right-aligned to x 1824.
- Face-down card: "DAY 1" (to 5) in Plex Mono 500 18px label color at (24, 40); "MON" in Syne 800 96px #F4F2EC on a baseline at (24, 310); "NOV 16" in Plex Mono 500 22px label color at (24, 352); at (24, 484) a row of five 8px dots, the card's own dot in its day color and the others #3A3A37.
- Face-up card, in the day color: "MON · NOV 16" in Plex Mono 500 16px, ink at 72%, at (24, 40); an illustration box 272 × 200 at (24, 68), drawn in 2.5px ink strokes with round caps, no fills except small dots; the feature name in Syne 700 40px ink with its first baseline at (24, 330), on two lines if needed; the line in Plex Mono 400 18px/26px, ink at 80%, wrapped to 272px, its first baseline 44px below the name's last.
- The illustrations, original line drawings that draw on after each flip (stroke-dashoffset, 0.6 s, easeInOutCubic): Branching: a main line from left to right with two branches that curve off and rejoin, three commit dots on each; Edge Functions: a circle globe with two meridians and 18 small dots on it, five joined by short arcs; Vector Search: a scatter of 24 dots and a query arrow into a dashed circle around the 4 nearest; Point-in-Time Restore: a clock face whose hand sweeps counter-clockwise under a curved rewind arrow; Usage Pricing: a horizontal meter with tick marks, filling to a marker labeled "5 GB free" in Plex Mono 14px.
- The flip: rotateY 0 → 180° about the card's vertical center in 0.7 s, with perspective 1600px on the row: easeInOutCubic for the first 85%, then a soft overshoot to 183° settling back to 180° for the last 15%. The card lifts along a sine, translateZ 0 → 70 → 0 px; its shadow (a blurred ellipse under the card, #000000) grows from 40% to 60% and widens at mid-flip, then tightens; a sheen, a 40%-wide white band at 0 → 18% → 0, slides across the face in the direction of the turn while the angle passes 120–180°. Front and back are separate faces with backface-visibility hidden.
- The deal: the five face-down cards slide up 120px and fade in, 70 ms apart, on easeOutQuint, each landing from a 2° tilt that straightens.
- Motion rules: one card flips at a time, never two; the headline and grid never move once they land; each illustration draws only once.
- Premium: real 3D flips with lift and a moving sheen, flat bold color that appears only as the cards turn, crisp monospace labels, generous dark space, everything on a strict grid. Cheap: neon outlines and glows, gradients on the cards, cards spinning more than once, confetti, emoji, glassmorphism, rainbow text, flips that clip through their neighbors.
- Banned: purple gradients on dark navy, neon glow, glassmorphism, gradients on the cards, particle bursts, emoji, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–0.75s: the dot grid fades up; the label and date type on at 40 characters per second; the headline rises 40px through a mask, "Five days." then "Five launches." 0.12 s apart (0.25–0.75 s, easeOutExpo).
- 0.6–1.3s: the five cards deal in.
- 1.4–2.1s: Monday flips; its branches draw 2.0–2.6 s.
- 2.2–2.9s: Tuesday flips; its globe draws 2.8–3.4 s.
- 3.0–3.7s: Wednesday flips; its scatter and query draw 3.6–4.2 s.
- 3.8–4.5s: Thursday flips; its clock rewinds 4.4–5.0 s.
- 4.6–5.3s: Friday flips; its meter fills 5.2–5.8 s.
- 5.3–5.8s: the footer fades up.
- 6.0s: the hero frame: all five cards face up in their colors with every illustration drawn, the headline, label, date and footer.
- 6.3–7.1s: a ripple: each card lifts 8px and settles (0.35 s, easeInOutSine), 90 ms apart, left to right.
- 7.1–10.0s: hold.
For other lengths, change the gap between flips (0.6–1.0 s) and the hold; keep each flip at 0.7 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 (the scatter and globe dots). 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.
- Engine: HTML/CSS with 3D transforms (transform-style preserve-3d on each card, perspective on the row), all set inline from seek. Illustrations are inline SVG; measure each path with getTotalLength() at load and set stroke-dashoffset from t. The dot grid is a CSS radial-gradient background with a radial mask.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10) plus 1.75, 3.35 and 5.5: screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that at 1.0 s all five cards have landed face down; mid-flip at 1.75 s the card lifts and shows a sheen and never clips its neighbors; each card face-up reads cleanly ("Point-in-Time Restore" on two lines, every line within three lines and inside the card); only one card flips at a time; the colors are flat with no gradients. At 6.0 s all five cards are face up with complete illustrations and the headline, label, date and footer are readable. The final frame is that composition at rest. 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…