REFERENCE
- Gallery page: https://magpui.com/en/i/spider-controlled-split-music-player-0b3e60
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/spider-controlled-split-music-player-0b3e60/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/spider-controlled-split-music-player-0b3e60/clip.mp4
- Original post: https://x.com/desdivj/status/2114305692547043677 by @desdivj
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 split music player with a track queue on the left and now-playing artwork on the right. Add a small animated spider whose thin thread stretches across the player as selection changes. Build only this widget.
DESIGN SYSTEM: Estimated 600 by 420px shell, two equal white panels, near-black #151515 outlines, 26px outer corners and a narrow black center gutter. Pale gray #dededc surrounding surface and soft bottom shadow. Use serif headings around 24px and compact sans-serif metadata around 10–12px. Track rows contain a tiny square thumbnail, title, artist and duration. Right panel has a heading, large square artwork with 12px corners, small descriptive metadata, a fine seek line and black circular pause control.
MOTION: On track selection move the spider between panel corners and across the artwork using translated SVG groups, rotate the body toward its route, and update an SVG thread path anchored to its previous position. Suggested timing: 700–1000ms travel with cubic-bezier(.22,1,.36,1); leg oscillation 140ms while moving. Crossfade artwork and heading over 220ms with cubic-bezier(.2,0,.2,1). Briefly lift the selected thumbnail toward the thread over 300ms. These timings are implementation targets, not source measurements.
SECTIONS: Queue header, short descriptive copy, six track rows and a bottom input; now-playing title, artwork, metadata and transport. Support idle, focused row, selected row, playing and paused states. The active row receives a pale gray highlight. Keep the spider decorative and separate from controls.
IMPLEMENTATION: Use React and Motion for shared thumbnail transitions and artwork swaps; render spider legs and thread in SVG over the widget with pointer-events none. Keep SVG paths simple and animate transforms rather than layout. Use real buttons with accessible labels, visible focus rings and keyboard track selection. With prefers-reduced-motion remove spider travel and use instant selection updates. Use placeholders for music and images, without pretending audio plays unless an audio source exists.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts. Map these colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original; use placeholders.
SUCCESS CHECK:
- Selecting a queue row updates the heading and artwork without resizing the shell.
- Spider travel and its thread remain clipped to the widget and never obstruct controls.
- Every control works with the keyboard and reduced-motion disables decorative travel.
