Year in Review Story

About this style

Personalized year-in-review stories turn a person's own data into a short run of full-screen cards with big numbers, ranked lists and bold color. The format borrows from the vertical stories popularized by social apps and from poster design, where a single figure can carry a whole layout. Music, fitness, reading and finance apps release them at the end of each year, partly because people share them widely.

Make a 10-second year-in-review animation: phone story cards for a fictional listener's year in music, with big numbers, a top-five list, bold color blocks and a new transition at every cut.

<inputs>
If I don't give you something, use the default and don't ask.
- App and listener: default "Tonebook", Noor, 2026
- Minutes listened: default 48,210 (over 33 days)
- Top artists by plays: default Moth Parade 412, Saltwater Choir 365, Kite Theory 301, Juno and the Lowlands 288, Pale Orchard 240
- Top song: default "Glasshouse Summer" by Moth Parade, 96 plays
- Sign-off: default "Thanks for listening, Noor."
- Length: default 10 seconds
</inputs>

<direction>
- Format: a 540×960 story at (690, 60), 36px corners, a 10px #0E0E10 bezel, five progress segments on top, a 40px inner margin. Around it the stage takes a darker shade of the card's color, with the card's key number as huge outlined type (520px, 2px stroke at 30%) drifting 20px/s and easing to a stop by 9.0s.
- Cards, two colors each plus ink #111111 or white:
  1. Pink #FF3D7F: "Noor," / "your 2026" / "in sound" at 96px.
  2. Lime #C9F04A: "48,210" at 140px, "minutes listened", an ink bar "That's over 33 days."
  3. Cobalt #2B3BFF: "Your top artists", five rows of a 72px rank, name, a bar proportional to plays (412 = 300px) and the count.
  4. Orange #FF7A1A: a 300px cover drawn in code (concentric quarter circles), a black record sliding out 120px and spinning at 200°/s, the song and "Moth Parade · 96 plays".
  5. Plum #2B0F3A: a 2×2 recap of the earlier cards in their colors, then the sign-off.
- Type: Bricolage Grotesque (wght 200–800, wdth 75–100): numbers 800 at width 75 in fixed-width digit slots, headings 800 at −0.03em, body 600 at 24–34px. Nothing under 24px.
- Rhythm: an implied 120 BPM; cuts and entrances land on beats or half beats. Elements snap from 108% to rest in 0.14s on cubic-bezier(0.2, 0.9, 0.3, 1); counters roll in 1.0s on cubic-bezier(0.16, 1, 0.3, 1).
- Transitions, 0.35–0.45s, each different: a lime block wipes up; a cobalt circle grows from the comma in 48,210; a CSS 3D cube turn on the story's left edge; four plum stripes slide in from alternating sides.
- Premium is poster-grade layout: numbers big enough to be the design, two colors per card, every move on the beat. Cheap is centered text on gradients, fades and numbers that don't add up.
Banned: gradients, cross-fades, drop shadows, real artists or apps, emoji, confetti, full-frame color changes less than 1s apart, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.5: Pink. The phone rises 40px (0.6s); the lines snap in at 0.5, 0.75 and 1.0s.
- 1.5–3.5: Lime wipe. "48,210" rolls up from 0; the label at 2.0s; the ink bar at 3.0s.
- 3.5–6.5: Cobalt circle. Title at 3.5s; rows land one per beat from 4.0s, bars growing as counts roll.
- 6.5–8.0: Cube turn to orange. Cover at 6.5s; the record slides out and spins; title 7.0s, artist 7.5s.
- 8.0–9.0: Plum stripes. Tiles snap in on half beats; the sign-off at 8.5s.
- 9.0–10.0: Hold.
For other lengths, give each card whole beats, keep cuts 1s apart and hold at least 1s.
</structure>

<build>
One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Google Fonts via <link>, awaiting document.fonts.load() for each face before defining window.seek. HTML/CSS with inline SVG and CSS 3D transforms; no canvas or three.js. window.seek(t) (t in seconds) sets every visual from t alone, clamping past the end: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Without ?render in the URL, drive seek from requestAnimationFrame; with ?render, don't start that loop.
</build>

<check>
Before showing me, step through one frame per second (0–10s) and look at each. Fix overlaps, clipped or cramped text and anything off-style or Banned. Bars stay proportional to plays, text stays inside the phone's margin, and the outlined stage type never touches the phone. Confirm seek(10) and seek(11) match.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

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…

Fluid Spring Interface

Made by us

One black pill on a phone screen morphs into a notification, a live card and a music player on closed-form springs that…

Material Container Transform

Made by us

A recipe app demonstrates Material-style motion: a card expands into a full screen, tabs switch on a shared axis, a FAB…

Lock Screen Notifications

Made by us

A phone on a terracotta stage wakes to a dusk-hills wallpaper: frosted notifications spring up and push each other, thr…