REFERENCE
- Gallery page: https://magpui.com/en/i/swinging-art-tags-on-a-rail-8b00bc
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/swinging-art-tags-on-a-rail-8b00bc/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/swinging-art-tags-on-a-rail-8b00bc/clip.mp4
- Original post: https://x.com/gabriell_lab/status/2112520073378488501 by @gabriell_lab
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 horizontal rail with 5-8 hanging tags of different shapes and materials (arched wood, black oval, brushed gold disc, scalloped terracotta, rounded mint square). Moving the pointer along the rail makes the tag under it swing like a pendulum and flip 180deg to show a painting on its back, with the artist and year in small text beneath.
DESIGN SYSTEM
- White background; rail 2px #D9D9D9 with a soft shadow.
- Tags ~110x130px, each hanging from a 1px string, soft drop shadow 0 18px 24px rgba(0,0,0,.18) that moves with the swing.
- Caption under the active tag: name 12px medium #111, year 11px #888.
MOTION
- Hover enters a tag: rotateY 0 to 180deg with a spring (stiffness 180, damping 14) so it overshoots and settles; at the same time rotateZ swings -8deg to 8deg and back (pendulum), transform-origin at the string's top.
- Leaving: the tag swings back to front with the same spring, rotateZ dies out over ~900ms.
- Neighbours get a small 2deg nudge (40ms delay), like a breeze.
- Caption fades in 200ms after the flip passes 90deg.
SECTIONS
- Rail, strings, tags (front material + back painting), caption.
- States: idle (gentle 1deg sway, 4s loop), hover (flipped), focus (same as hover), touch (tap toggles).
IMPLEMENTATION
- Motion (Framer Motion) springs on each tag; CSS 3D with perspective 900px, backface-visibility hidden for the two faces.
- Materials can be images or CSS gradients (wood grain, brushed metal via conic-gradient).
- prefers-reduced-motion: swap the motion for a 150ms opacity change.
- Keyboard: every control focusable with a visible focus ring; same actions with Enter/Space and arrow keys where it makes sense.
- Animate only transform, opacity and filter.
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
- Each tag flips and swings when the pointer passes and returns when it leaves.
- The back face never shows mirrored text.
- Works with Tab: focusing a tag flips it.
