REFERENCE
- Gallery page: https://magpui.com/en/i/octopus-that-clears-done-tasks-98cc52
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/octopus-that-clears-done-tasks-98cc52/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/octopus-that-clears-done-tasks-98cc52/clip.mp4
- Original post: https://x.com/Duygu_tpcu/status/2115764863922536462 by @Duygu_tpcu
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: Build a mobile to-do screen where clearing finished tasks is a small creature moment. The list looks like a calm, native iOS app. When the user taps "Complete all" (or ticks the last task), a soft halftone octopus blob rises from below the list, reaches up with thin black tentacles, curls them around the completed rows and drags them down into its body, leaving an empty state. Restoring the tasks plays it in reverse: tentacles push the rows back up into place. It should feel playful but still precise and premium.
DESIGN SYSTEM: Phone frame about 390x844, background #F2F2F2, 20px side padding. Header: small gray date line (13px, #8A8A8E), big bold "Today" title (34px, weight 700, #111111), and a counter line "5 left · 0 done" (13px, #6B6B6B); a 36px round icon button (moon, dark mode) top-right on a white circle with a faint shadow. Task rows: white cards (#FFFFFF), radius 14px, height about 56px, 8px gap, shadow 0 1px 2px rgba(0,0,0,0.04); a 22px round checkbox on the left, title 15px weight 600 #1C1C1E, below it a 6px colored dot plus category label (12px, #8A8A8E). Checkbox colors per category: green #34C759, blue #2F6BFF, orange #F59E0B, pink #E5196B. Completed rows: filled checkbox with white check, title gray #A0A0A0 with a strikethrough. Bottom: pill button "Complete all", black #111111, white 15px semibold text, height 44px, radius 22px, centered 40px above the home indicator. The octopus: a round blob (about 220px) drawn as a black halftone dot pattern (dots around 3px on a 5px grid) that fades from dense at the center to sparse at the edge, with 6-8 short curved black tentacle tips sticking out; long tentacles are thick black strokes (8-10px) with a subtle white dotted suction-cup texture.
MOTION: Tick: checkbox fills with a 180ms scale 0.8 to 1 spring, check stroke draws in 200ms, strikethrough grows left to right in 220ms cubic-bezier(0.22,1,0.36,1). Complete all: rows tick in sequence with a 60ms stagger; after 250ms the halftone blob fades and scales from 0.6 to 1 under the list (400ms, cubic-bezier(0.34,1.56,0.64,1)), its dot field breathing slowly (scale 1 to 1.04, 2.4s loop). Tentacles grow from the blob edge to each completed row (SVG path length animated, 350ms each, 80ms stagger), curl around the row's right edge in a spiral, then pull: the row translates down, rotates up to 8 degrees, blurs slightly and shrinks into the blob (500ms, cubic-bezier(0.55,0,0.45,1)). Remaining rows reflow with layout animation (300ms spring). When the list is empty, the blob stays alone with the tentacle tips wiggling (sine, 1.5s), and the counter reads "0 left · 5 done". Undo: tentacles carry the rows back out and up to their slots and the blob sinks and fades (400ms).
SECTIONS: Parts and states: header with counter; task row (idle, checked, grabbed, removed); creature (hidden, rising, grabbing, idle on empty state, sinking); bottom action button (idle, pressed scale 0.97, label switches between "Complete all" and "Restore").
IMPLEMENTATION: React + Motion (motion/react) for checkbox, row layout and button states. Draw the halftone blob on a canvas (or an SVG pattern masked by a radial gradient) and the tentacles as SVG paths whose control points are animated each frame toward the target row with a spring, so they bend organically; attach each grabbed row to its tentacle tip by reading the path end point. Use real checkbox inputs and buttons with visible focus rings; announce "5 tasks cleared" in an aria-live region. prefers-reduced-motion: no creature, rows just fade and collapse in 200ms. Keep at most one canvas and a handful of SVG paths; pause the idle wiggle when offscreen.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens; never copy logos, brand names, photos or illustrations from the original; use placeholders.
SUCCESS CHECK:
- Ticking all tasks makes the creature rise, grab each completed row with its own tentacle and leave an empty list with the counter updated.
- Restoring brings every row back to its original slot in the same order.
- With reduced motion enabled, completion is a simple fade and collapse with no creature.
