Inbox Triage

About this style

Swipe gestures for email arrived with touchscreen phones, letting people archive, snooze or file a message with one sideways stroke. The pattern depends on clear feedback: a colored action and icon revealed behind the row, a visible point where the swipe commits, and a list that closes the gap afterwards. Mail and task apps still use it, often rewarding an emptied list with a calm illustrated empty state.

Make a 10-second mobile interface animation: a thumb swipes through an inbox, archiving, snoozing and labelling until unread reaches zero and a calm empty state appears.

<inputs>
If I don't give you something, use the default and don't ask.
- App: default "Stillpost" (mail)
- Messages (sender · subject · action): default Rowan Feld · Invoice #2041 paid · archive; Ottilie Park · Lunch Thursday? · snooze; Build server · Build 1184 passed · archive; Hessa Karim · Contract draft v3 · label Work; Marlow Ito · Photos from the lake · archive. Each gets a short, plain preview line.
- Empty state: default "All caught up." / "Nothing new. Enjoy the quiet."
- Length: default 10 seconds
</inputs>

<direction>
- Palette: stage pale sky #D5E2EC; phone #16191E; screen #FBFBF9; text #1E2A36; muted #6C7783; unread dot #3E6FD8; actions archive #2F9E6B, snooze #E39A2D, label #3E6FD8; art: sun #F2B48A, water #A9C1D6, a white boat with #2C3A4A lines.
- Type: Albert Sans 400–700 in the phone (header 40px, sender 22px, previews 20px); the giant counter in Fraunces 300 (SOFT 100) at 420px.
- Layout: a 448×936 phone at x 1060, y 72; left of it the unread numeral centered on x 600, baseline y 650, over "unread" at 34px. In the screen: "Inbox" over "N unread", search, then 116px rows (unread dot, initials avatar, sender and time, subject, preview).
- Touch: a 56px white circle at 60% with a thin ring, pressing to 88%, moving on thumb arcs.
- Swipes: rows track the touch 1:1 over a white line icon (archive box, clock, tag) on #E6E8E4. At 35% of the width the swipe commits: the action color blooms from the icon (180ms) and the icon pops 1→1.18→1 (cubic-bezier(0.34, 1.56, 0.64, 1)). Right archives, left snoozes, past 65% left turns blue to label. Released rows leave at the thumb's speed (200ms); the slot collapses in 280ms (cubic-bezier(0.2, 0, 0, 1)) and the rows below rise as one block.
- Sheets rise in 0.32s on cubic-bezier(0.32, 0.72, 0, 1) over a 30% scrim; toasts are dark pills. Both counters roll down in 0.4s as each row leaves.
- Empty state in inline SVG: a low sun rising behind a horizon, three water lines drawing outward, a folded paper boat that slides in and bobs on a decaying sine, still by 9.0s.
- Premium feels like a real phone: rows glued to the thumb, a visible threshold, gaps closing in one motion. Cheap is rows fading out, actions without feedback and a celebration burst.
Banned: confetti, rows fading or shrinking away, staggered reflow, rows faster than 3,000 px/s, copied OS icons or app names, emoji, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8: The phone rises 40px (0.7s, cubic-bezier(0.22, 1, 0.36, 1)); rows populate 50ms apart; the giant 5 fades up.
- 0.8–1.5: Archive Rowan Feld. 5→4.
- 1.5–3.0: Snooze Ottilie Park: a sheet offers "Later today", "Tomorrow · 08:00", "This weekend"; tap Tomorrow; toast "Snoozed until tomorrow". 4→3.
- 3.0–3.6: Archive the build. 3→2.
- 3.6–5.1: Label Hessa Karim with a long swipe through amber to blue; tap the "Work" chip; toast "Labelled Work". 2→1.
- 5.1–5.7: Archive Marlow Ito. 1→0.
- 5.7–7.6: The sun rises, water lines draw, the boat slides in; "All caught up." and its line rise 12px.
- 7.6–8.4: Chips "Archived 3", "Snoozed 1", "Work 1" fade in under the header.
- 8.4–10.0: Hold.
For other lengths, add or drop archive swipes, keeping counts right, 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; 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. Numeral, header count and remaining rows agree in every frame, and no text in the phone is under 20px. 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

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…

Liquid Glass Interface

Made by us

Glass panels with real refraction float over vivid, striped color: their rims bend what's behind them, two buttons fuse…

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…