REFERENCE
- Gallery page: https://magpui.com/en/i/week-to-do-check-off-zoom-8e8b43
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/week-to-do-check-off-zoom-8e8b43/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/week-to-do-check-off-zoom-8e8b43/clip.mp4
- Original post: https://x.com/barret_jessy/status/2114756442804949307 by @barret_jessy
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A to-do card titled "This week" floating over a warm sunset gradient. Ticking the tasks plays a small cinematic sequence: each checkbox fills blue with a white tick, a blue strike-through line draws across the label, and the camera pushes in so the rows fill the frame as they are completed one after another. When the last item is done, the camera eases back out to show the whole card, all rows struck through. Unticking resets the list. It should feel satisfying, like finishing the week.
DESIGN SYSTEM
- Backdrop: full-bleed gradient, teal-slate top #3E6470 to dark #1F2E36, with an orange dune band at the bottom #F07A22 to #F9A447, softly blurred.
- Card: 340px wide, radius 20px, fill rgba(14,16,20,.88) with backdrop-filter blur(20px), border 1px rgba(255,255,255,.06), shadow 0 30px 60px rgba(0,0,0,.45).
- Header: "This week" 14px weight 600 #EDEDED, small round plus button 22px #2A2C30 on the right.
- Rows: 44px tall, 16px horizontal padding, label 14px #E6E6E6; checkbox 16px, radius 4px, border 1.5px #6B6E73; checked fill #1A8CFF with white tick.
- Meta chips: date chip (calendar icon + "Today" in blue #3D9BFF on rgba(61,155,255,.15), "Tomorrow" in gray on #2A2C30), small flag icon (gray, yellow #F5B400, red #FF453A), all radius 6px, 11px text.
- Done state: label #6F7378 with a 2px #1A8CFF strike line; chips dim to 50%.
MOTION
- Check: box scales 0.85 to 1 and fills blue in 160ms, cubic-bezier(.34,1.56,.64,1); tick draws via stroke-dashoffset 180ms.
- Strike: a 2px blue line grows from the left edge of the label to its end, width 0 to 100%, 320ms, cubic-bezier(.65,0,.35,1), starting 80ms after the tick; label color fades to gray over the same time.
- Camera push-in (sequence mode): the card scales from 1 to about 2.2 and translates so the active row stays in the lower third, 700ms, cubic-bezier(.7,0,.2,1); then each subsequent row is checked with a 450ms stagger while the camera pans down with them.
- Pull-back: after the last strike, wait 400ms, scale back to 1 and recenter over 800ms, cubic-bezier(.22,1,.36,1).
- Reset: lines retract right to left 200ms, boxes empty 150ms, staggered 40ms bottom-up.
SECTIONS
Parts: backdrop, card, header, rows (checkbox, label, strike line, chips). States per row: idle, hover (row bg rgba(255,255,255,.03)), checked, focus-visible. Card states: overview, zoomed sequence, completed overview.
IMPLEMENTATION
Motion (or GSAP timeline) for the camera sequence, since it chains scale, pan and per-row steps; CSS transitions are enough for single checks outside the sequence. Use real checkbox inputs with labels; the zoom is purely visual on a wrapper, so focus order is unaffected. Animate only transform, opacity, width of the strike line (or scaleX) and stroke-dashoffset. prefers-reduced-motion: skip the camera move entirely and just crossfade the checked states.
ADAPT TO THE PROJECT
Reuse the project's tokens, fonts, icon set and accent color for the blue; use placeholder tasks. Generate the sunset backdrop with CSS gradients or a placeholder image; do not copy any app branding or names from the original.
SUCCESS CHECK
- Each checked row shows a blue box, a tick and a strike line that draws left to right.
- In sequence mode the card zooms in, follows the rows as they get checked and zooms back out at the end.
- Everything stays keyboard operable and reduced motion removes the zoom.
