REFERENCE
- Gallery page: https://magpui.com/en/i/nodes-tumble-away-trailing-smoke-a51b2c
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/nodes-tumble-away-trailing-smoke-a51b2c/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/nodes-tumble-away-trailing-smoke-a51b2c/clip.mp4
- Original post: https://x.com/figmaweave/status/2111788606163709977 by @figmaweave
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 node-removal interaction inside an existing dark node editor. A displaced rectangular node tilts and travels across the canvas while releasing billowing white-gray smoke; the remaining connected cards stay legible.
DESIGN SYSTEM: Use a #191b1a canvas, #292d2b cards approximately 200 by 170px, thin #555b57 borders, 8px radii, 12px neutral sans-serif labels, gray curved connection wires and a subtle purple selected outline. Keep existing editor controls unobtrusive.
MOTION: On removal or a deliberate throw gesture, animate the selected card along its release direction, rotate it by approximately 25 to 100 degrees and shrink toward disappearance over 900ms, cubic-bezier(0.22,0.61,0.36,1). Emit soft smoke puffs behind it every 35ms for 500ms; expand puffs from 12 to 80px and fade to zero over 800ms, cubic-bezier(0.16,1,0.3,1). Detach affected wires with the removal; preserve all unrelated edges. These timings are implementation targets.
SECTIONS: Idle canvas with several image and text nodes; selected outlined node; removal in flight with rotating card and smoke; settled graph without the removed node. Include an undo action.
IMPLEMENTATION: Use a DOM node layer and SVG connections with GSAP for card transforms; use a bounded transparent canvas particle layer for smoke. Avoid full-screen blur and cap particles at 60. Support keyboard Delete with explicit selection and accessible undo; preserve visible focus. With prefers-reduced-motion, remove the card with a 120ms opacity fade and no smoke or rotation.
ADAPT TO THE PROJECT: Reuse existing tokens, components and fonts, map these estimated colors to the closest tokens, and never copy logos, brand names, photos or illustrations; use placeholder node previews.
SUCCESS CHECK:
- Only the selected node and its incident wires disappear.
- Smoke follows the moving card and fully clears after the animation.
- Keyboard removal, undo and reduced-motion mode work without changing other nodes.
