REFERENCE
- Gallery page: https://magpui.com/en/i/hanging-team-cards-that-flip-527a4a
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/hanging-team-cards-that-flip-527a4a/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/hanging-team-cards-that-flip-527a4a/clip.mp4
- Original post: https://x.com/hayriyeakguller/status/2109612639231856876 by @hayriyeakguller
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.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- Team avatars (one per person): 3D rendered avatar bust of a friendly person for a team page, soft clay-like style, big head, smooth skin, simple stylized hair, pastel outfit, looking at camera, soft studio light, transparent background, centered, no text, 1:1. Make one per team member, varying gender, skin tone, hair and outfit color, consistent style across all.
BUILD
A team section where profile cards hang from a thin string by clips, swaying slightly. Hovering a card makes it swing; clicking flips it in 3D to reveal a bio, projects and contact links on the back.
DESIGN SYSTEM
- Background #FFFFFF, headline 36px with a lavender second line #A78BFA.
- Cards 180x240, 16px radius, light gradient backgrounds, 3D avatar illustrations, name 14px semibold, role 11px grey.
- String 1px #D4D4D4, clips 10px grey.
MOTION
- Idle sway: rotate ±1.5deg around the clip point, 3-4s ease-in-out, each card out of phase.
- Hover: swing to 6deg and settle with a spring (stiffness 120, damping 6).
- Click: rotateY 180deg, 700ms, cubic-bezier(0.65, 0, 0.35, 1), back face shows details.
SECTIONS
- Header text.
- String with cards.
- Card back with bio, links, QR placeholder.
IMPLEMENTATION
- transform-origin at the clip, CSS 3D with backface-visibility hidden; Framer Motion springs.
- Cards are buttons with aria-pressed for the flip.
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- Rotation pivots at the clip, never at the center.
- Only one card is flipped at a time.
- Text on the back is readable without flipping on mobile (stack fallback).
