Day in the Life Video

About this style

Day-in-the-life films follow one person from morning to night to show how a product fits into real routines, a format used by phone makers, banks and workplace software alike. The passing hours give the video a natural structure: each time of day becomes a short scene with one task, and the light changing from dawn to evening tells the viewer that time is passing without a word. For SaaS products it answers the buyer's real question, "when would I actually use this?". The format works when the moments are specific and ordinary, the times on the clock are plausible for the job, the product's part in each scene is small and quick rather than a tutorial, and the day ends somewhere satisfying.

Make a 10-second day-in-the-life product video for a café management app: a big clock rolls from 6 a.m. to 10 p.m. as the sky over a flat, illustrated street moves from dawn through golden hour to night, and at each stop a phone shows that moment in the app, from the opening checklist to tomorrow's prep list.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Kettlebook (fictional), an app that runs an independent café. Café: Crowfoot Coffee (fictional), owner Rosa; staff Lena and Theo.
- Moments (clock time · label · line · what the phone shows):
  1. 6:30 am · "Open up" · "Checklist done before the first customer." · Opening checklist 4 of 5 → 5 of 5: Espresso machine on, Pastry delivery checked (48 croissants), Float counted ($200), Fridge temps logged (3 °C), Doors unlocked.
  2. 9:15 am · "Running low" · "It spots the oat milk before you do." · Alert "Oat milk · 6 cartons left · runs out around 11:40" → "Reordered 24 · arrives tomorrow 7:00".
  3. 12:40 pm · "Lunch rush" · "Every order, in the order it came." · Queue "14 orders · average wait 4 min" with order tickets (#231 Flat white, #232 Chai + banana bread, #233 2 × Cortado, #234 Iced latte).
  4. 3:00 pm · "Shift swap" · "Sorted in one tap." · "Lena wants to swap Sat 7:00–15:00 with Theo" → Approved.
  5. 6:30 pm · "Close the day" · "The numbers, already added up." · Today: $2,184.60 sales · 312 orders · $7.00 average · top item Flat white × 86.
  6. 9:45 pm · "Tomorrow, ready" · "Prep list built from today's sales." · Prep: Bake 60 croissants · 2 loaves banana bread · Oat milk delivery 7:00 · Lena and Theo on at 6:30.
- Closing line: "From first espresso to last lock-up." Sign-off: Kettlebook · "for independent cafés".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a warm, flat, illustrated day. Big type on the left tells the time and the moment; a clean phone on the right shows the product; behind them, a sky and a simple street change with the hours. The light does the storytelling; the product is quick and specific.
- Sky keyframes, each a vertical gradient (top → horizon) tied to clock time, interpolated in OKLab between keys: 6:00 #F2B999 → #FBE3CE; 9:00 #BBDDEE → #EAF4F7; 12:30 #9CCFEA → #E3F2F8; 15:00 #A6CFE4 → #F3ECDB; 18:30 #EE9E63 → #F8D7A2; 20:00 #3D4E6B → #C9694F; 21:45 #10263A → #22405A. Sun: a #FFE3A3 disc, 70px, on an arc from (140, 720) at 6:00 through (960, 170) at 13:00 to (1780, 720) at 20:00, with a soft 160px halo at 25%. Moon: a #F3EEDF disc, 54px, with a crescent shadow, rising from the left after 20:15 to (420, 210) by 21:45. Six faint stars (2px, #F3EEDF at 60%) fade in after 21:00.
- The street, y 720–1080, flat shapes with no outlines: five buildings of different heights and roof lines across the frame, day colors #E7D6C1, #D9C3A9, #EADFCF, #CFB79B, #E1CCB2 that darken toward #2B3444–#3A4357 at night through a single darkness factor driven by the sky's luminance. The café, Crowfoot Coffee, is the second building (x 300–860): a terracotta-and-cream striped awning (#C4643A / #F6E9D6, 8 stripes), a large window, a door, and a small hanging sign with an original crow-foot mark (three short strokes from one point). Windows across the street light up warm #FFD98A one by one after 18:30 (each fading in over 0.3 s at a seeded time); the café's window glows from 6:00 to 6:30 and again after 18:00.
- Left column: the clock at (120, 120) in Space Grotesk 300, 168px, with "am"/"pm" in Space Grotesk 500 48px beside it; each digit is an odometer column clipped to its cell. During a roll, every column eases from its old digit to its new one by rolling upward through the digits in between (the hour column climbs hour by hour, the minute columns travel at most nine steps), all on the roll's easing, so the time visibly runs but no digit ever spins or flickers. The sky and sun follow the underlying continuous time. The moment's label at (124, 360) in Space Grotesk 500, 44px; its line at (124, 410) in Nunito Sans 400, 24px. Below, the day bar at y 490: a 3px line from x 124 to x 940 for 6:00–22:00 with tick labels "6a 9a 12p 3p 6p 9p" in Nunito Sans 600 14px, six moment dots (10px) that fill as they pass, and a 16px marker riding the current time. All left-column text uses ink #1E2430 while the sky is light and crossfades to #F6F0E6 as darkness passes 0.5, so it always reads.
- The phone: an original flat device, 400×820 at x 1160–1560, y 120–940, radius 58, a 14px #1E2430 body with a 2px #3A4250 inner edge, a 10px round camera dot centered at the top (no notch or island shapes), and a soft ground shadow on the street. Screen 372×792 with radius 46, app background #FFFFFF.
- The app inside the phone: a status row (time in sync with the big clock, a battery glyph), a header "Crowfoot Coffee" in Nunito Sans 700 20px with an original Kettlebook mark (a copper rounded square holding a simple kettle silhouette), and the moment's card stack below. App palette: ink #1E2430, secondary #6A707C, hairlines #E7E9EE, cards #F7F7F9, copper accent #C46A2F (buttons, the active state), success #3D7A55 with tint #E1EFE6, warning #C9821A with tint #FBEFD9. Nunito Sans 400 / 600 / 700, 15–18px, with tabular figures; big numbers (the day's sales) in Space Grotesk 500 44px.
- Each moment's phone screen: 1 a checklist with five rows whose last box ticks (a drawn check, 0.2 s) and the header count changes to "5 of 5"; 2 a warning card that becomes a success card when "Reorder 24" is tapped; 3 a queue whose tickets slide up one place as #231 is marked done and a new #235 "Oat flat white" enters at the bottom; 4 a request card with "Decline" and "Approve" where Approve fills and the card turns to "Approved · Lena ↔ Theo"; 5 a summary with the sales figure counting up, three stat tiles and a 12-bar hourly sparkline (7 a.m. to 6 p.m.) in copper; 6 a prep list of four rows with icons. Taps are shown as a soft 36px copper ring at the touch point (no hand, no cursor).
- Time and pacing: the clock dwells at each moment and runs fast between them. Between moments the minutes roll for 0.35–0.45 s on easeInOutSine while the phone pushes to the next screen (old screen slides out left 40px and fades, new one slides in from the right, 0.35 s, easeInOutCubic) and the left-column label and line crossfade with an 8px rise.
- Premium: a real day with plausible times and real café numbers that add up, light that changes continuously, an odometer clock, a flat street that warms and lights up at night, one small action per moment. Cheap: a spinning analog clock with motion blur, stock "busy professional" characters, emoji, a glowing phone floating in space, a time-lapse flicker, purple dusk gradients, screens that cut without transition.
- Banned: real company names, logos and UI copied from existing products; real phone models' notches, islands or buttons; people's faces; emoji; motion blur; flicker; neon; purple; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.45s: 6:00 am at dawn, the café window glowing, the phone on the lock-style "Good morning, Rosa" screen; the clock rolls to 6:30 (0.2–0.45 s).
- 0.45–1.6s: moment 1, "Open up": the checklist's last row ticks at 1.1 s and the count reads "5 of 5"; the café window light goes out as the sun clears the roofs.
- 1.6–2.85s: rolls to 9:15; moment 2: the oat milk warning, a tap on "Reorder 24" at 2.3 s, the success card.
- 2.85–4.05s: rolls to 12:40 under the high sun; moment 3: the queue moves up one at 3.5 s and #235 enters.
- 4.05–5.1s: rolls to 3:00 pm; moment 4: the swap request, a tap on Approve at 4.65 s.
- 5.1–6.5s: rolls to 6:30 pm into golden hour; moment 5: the sales figure counts up to $2,184.60 (5.5–6.0 s, easeOutCubic), the tiles and sparkline appear, the first street windows light.
- 6.0s: the hero frame: golden sky with the low sun, the café with its awning and glowing window, the clock at 6:30 pm, "Close the day" and its line, the day bar with five dots filled, and the phone showing the complete day summary.
- 6.5–7.75s: rolls through dusk to 9:45 pm (6.5–7.0 s), the moon rising and stars appearing; moment 6: the prep list builds row by row (7.1–7.6 s).
- 7.75–8.6s: the clock rolls to 10:00 pm; the label and line are replaced by the closing line "From first espresso to last lock-up." in Space Grotesk 500 52px at y 360, wrapped to two lines within 820px; the Kettlebook mark and "Kettlebook · for independent cafés" in Nunito Sans 700 26px fade in at y 520 below it, replacing the day bar, whose six dots are all filled.
- 8.6–10.0s: hold at night: only the stars breathe (±15% opacity on a 3 s sine) and the café window stays lit.
For other lengths, keep the order of moments and the fast-roll / dwell rhythm, and keep 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: the sky, street, phone and app are drawn 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 clock time is one function of t (dwell segments and eased roll segments), and the sky, sun, moon, darkness, windows and text color are all functions of that clock time. 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, the backing store sized from CSS size × devicePixelRatio. Draw the phone screen into an offscreen canvas at 2× each frame and composite it into the phone with a rounded clip; draw the odometer digits with a clip per digit cell.
</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 the left-column text is readable against every sky (dark by day, light by night), the clock never shows an impossible time and the phone's status time matches it, the sun and moon follow their arcs, the windows light gradually, the numbers add up ($2,184.60 over 312 orders is $7.00), and the phone transitions never cut. At 1.0 s it's 6:30 am with the checklist; at 3.0 s it's 12:40 with the queue; the 6.0 s frame is golden hour at 6:30 pm with the full day summary; at 7.5 s it's 9:45 pm under the moon; the final frame is 10:00 pm with the closing line and sign-off. 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…