REFERENCE
- Gallery page: https://magpui.com/en/i/spinning-postcard-rack-055f3b
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/spinning-postcard-rack-055f3b/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/spinning-postcard-rack-055f3b/clip.mp4
- Original post: https://x.com/mehdi_made/status/2117961219210608905 by @mehdi_made
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.
- Vintage travel postcard set: A set of 8 vintage travel poster postcard illustrations in portrait 3:4, flat screen-print style with soft grain, warm sunset palette of peach, coral, teal and cream: a tropical beach with palms, a red torii gate at dusk, desert dunes under a big sun, a coastal town with yellow houses, an alpine lake, a cliffside lighthouse, a night sky over a city, a pastel lighthouse; each with a thin white border and plain background.
BUILD: A mobile screen for a travel journal where photo memories live on a rotating wire postcard rack, like the spinner stands outside a souvenir shop. The rack sits in the middle of the screen with three tiers of wire pockets, each holding illustrated postcards. Swiping left or right spins the rack around its vertical pole, so the cards on the side facing you slide away in perspective and the next side comes into view. Tapping a postcard pulls it out of its pocket and brings it to the front at large size while the rack blurs behind it; tapping the card again flips it in 3D to show the back with a handwritten note, an address and a stamp with a postmark. A small Put back pill returns it to its pocket. It should feel physical, sunny and nostalgic, like holding a real card.
DESIGN SYSTEM: Full-screen phone layout (390x844). Background: a soft warm gradient from #F6C99A at the top to #EBB07A at the bottom with a hazy blurred light streak and a vague ghosted reflection of the rack, as if photographed in afternoon sun. Header at top-left, 20px from the edge: a 9px monospace eyebrow in uppercase with wide tracking (#6E5A48), then a serif title of about 22px (#3A2A1E), then a small chip (monospace 10px, #5E4A3A on rgba(255,255,255,0.35), radius 6px, 4px 8px padding) reading the count and the current side, for example 'N postcards / side 1 of 4', or the place name and 'the front'/'the back' when a card is open. Rack: a thin brushed-steel structure (#C9CED2 with #8E959B shading), a central pole 6px wide, three tiers of open wire pockets about 70px apart, two visible cards per tier on the facing side plus foreshortened cards on the two adjacent sides. Postcards: 3:4 portrait, about 64x86px in the rack, 4px white border (#FBF6EC), 2px radius, a soft drop shadow 0 4px 10px rgba(80,40,10,0.25). Card art: flat vintage travel-poster illustrations (sunsets, beaches with palms, mountains, torii gates). Open card: about 64% of screen width, centered. Back of card: cream paper #EFE6D3 with a faint grain, a thin 'POST CARD' label in monospace, a vertical divider, address lines and the message in a handwritten script in dark ink #2B2A3A, a stamp top right with a wavy postmark overprint. Put back pill: black #111 on the bottom center, white 11px label, fully rounded.
MOTION: Rack spin: horizontal drag maps to rotationY of the rack, 1px = 0.35deg; on release, snap to the nearest of 4 sides (90deg steps) with a spring (stiffness 180, damping 22), with velocity carried in so a flick can skip one side. Cards hang in pockets and lag slightly: each card gets a small extra rotationY of -velocity*0.02deg capped at 6deg, settling back with the same spring. Open: on tap, the card lifts out of its pocket upward by 12px over 120ms, then flies to the center while scaling from 1 to about 3.2 and rotating from its rack angle to 0deg over 520ms, cubic-bezier(0.22, 1, 0.36, 1). The rack behind blurs from 0 to 8px and dims to 70% opacity over 400ms. Flip: tap on the open card rotates it 180deg around Y over 600ms, cubic-bezier(0.65, 0, 0.35, 1), with a slight lift (scale 1.04 at mid-flip) and a moving highlight sweep across the surface; backface hidden on both faces. Put back: the exact reverse path into the original pocket, 480ms, cubic-bezier(0.4, 0, 0.2, 1), with a 2-step settle wobble of 3deg when it drops in. Header chip text crossfades 180ms on every state change.
SECTIONS: Parts: header (eyebrow, title, state chip), background haze, rack (pole, tiers, pockets, postcards), open card (front illustration, back with note, address, stamp), Put back pill. States: idle rack, dragging, snapping, card lifting, card open front, card open back, putting back.
IMPLEMENTATION: On web, use React Three Fiber with a simple geometry for the pole and wire pockets and textured planes for the cards, or a CSS 3D approach (perspective 900px, preserve-3d) with four rack faces at 90deg each; the CSS route is lighter and enough for this. In React Native, use react-native-skia or a WebGPU canvas with Reanimated for the drag and springs. Use a shared-layout transition so the open card keeps continuity with its pocket. Respect prefers-reduced-motion: no spin inertia, snap instantly, open and flip with a 150ms crossfade instead of the 3D path. Keyboard: arrow keys rotate one side, Enter opens the focused card, Space flips, Escape puts it back; visible focus ring on cards. Keep it at 60fps on mid-range phones: at most 4 sides x 6 cards, textures 512px max, blur on a single backdrop layer only.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, fonts and components where possible and map colors to the closest existing tokens. Do not copy logos, brand names, photos or illustrations from the original; use placeholder travel illustrations and placeholder text for notes and addresses.
SUCCESS CHECK:
- Swiping spins the rack and it always settles exactly on one of 4 sides with a springy snap.
- Tapping a card lifts it out of its pocket, brings it to the center and a second tap flips it to a back with note, address and stamp.
- Put back returns the card into the same pocket, and reduced motion replaces 3D moves with short crossfades.
