REFERENCE
- Gallery page: https://magpui.com/en/i/looping-white-outline-icons-3be5fa
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/looping-white-outline-icons-3be5fa/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/looping-white-outline-icons-3be5fa/clip.mp4
- Original post: https://x.com/jamesm/status/2113025096755642607 by @jamesm
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 compact animated outline icon collection inside the existing project. Show 17 icons arranged in three rows of 6, 6 and 5: directional marks, tile grid, globe, orbiting avatar, plug, AI speech bubble, branching blocks, connected nodes, refresh arrows, sparkle square, chat bubble, rounded square, curved path, people, badge and overlapping rings. Keep the emphasis on tiny readable movements rather than decorative effects.
DESIGN SYSTEM: Use a flat #000000 field with #F4F4F4 strokes, no cards or shadows. Each icon occupies a 24px square, with approximately 1.8px round-capped strokes. Space centers about 72px apart horizontally and vertically. Allow generous padding around the grid. No visible labels in the reference; provide accessible labels separately.
MOTION: Give each icon an independent repeating timeline. Suggested timings, to tune against the reference: refresh arrows rotate 360 degrees over 1400ms; globe meridians rotate or compress over 1800ms; avatar satellite dots orbit over 1600ms; AI lettering fades into the empty bubble and returns over 1500ms; rounded-square outline briefly gains a dashed offset echo over 1600ms; curved-path dots travel along the stroke over 1800ms. Use cubic-bezier(0.4,0,0.2,1) for morphs and cubic-bezier(0,0,1,1) for continuous rotation. Stagger starts by 80ms so the group does not pulse in unison. Preserve recognizable silhouettes at every frame.
SECTIONS: One icon grid only. Provide stable idle drawings, active animated variants and a paused state. Keep hover treatment restrained and avoid adding navigation or surrounding page content.
IMPLEMENTATION: Use inline SVG with Motion for grouped transforms, opacity changes and compatible path interpolation. Use separate SVG groups for moving details, with transform origins centered explicitly. Do not use raster sprite sheets or WebGL. Keep fixed viewBoxes to prevent layout shifts and pause loops when offscreen. For prefers-reduced-motion show static recognizable icons. Decorative icons are aria-hidden; functional use must have a named button with visible keyboard focus and Enter/Space support.
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 generic placeholder symbols in place of proprietary marks.
SUCCESS CHECK:
- Every icon stays readable at 24px with consistent stroke thickness.
- Each loop returns seamlessly without moving neighboring icons.
- Reduced motion yields a fully static grid and interactive instances remain keyboard accessible.
