REFERENCE
- Gallery page: https://magpui.com/en/i/postage-stamp-cards-over-a-desk-a628b7
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/postage-stamp-cards-over-a-desk-a628b7/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/postage-stamp-cards-over-a-desk-a628b7/clip.mp4
- Original post: https://x.com/mightbe_dg/status/2112551917545205793 by @mightbe_dg
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: An interactive hero piece where three product cards shaped like postage stamps (white perforated border, scalloped edges) are fanned and slightly rotated on a light collage of paper fragments: an email snippet, a pale yellow note card, a table report and a few striped color bars. The front stamp is a deep blue cover with a large serif wordmark and an abstract halftone arc graphic; behind it sit a light gray stamp with a big serif headline and a black stamp with a small logo mark. Hovering the stack lifts and straightens the front stamp and shows a tiny monospace issue tag above it. Clicking (or after a short dwell) the page cuts to black and the front stamp scales up to fill most of the viewport, rotating to 0 degrees, so the halftone texture and small print details become legible; clicking again returns to the collage. It should feel tactile, editorial and print-like, like a stamp catalogue.
DESIGN SYSTEM: Collage background #F7F7F5 with paper fragments: email card #EAF3FB with 11px monospace text #4A5A6A, note card #FBF5D8 with 11px monospace text #3A3A2A, table card #F3EAC8 with thin #C9BE95 rules, color bars in #8FB8E8, #2F8FE0, #9AA0A6 as 10px tall strips. Stamps: about 220x290px in the stack, 18px white perforated border made with a radial-gradient mask (8px holes every 14px), drop shadow 0 10px 24px rgba(0,0,0,0.18). Front stamp fill #1E3F7A to #2C5AA0 gradient with a halftone dot pattern (dots 2 to 4px) forming three glowing arcs in #8EC2F0 to #F4E9A8; wordmark in a light serif 28px white; issue label top right in 10px monospace caps. Gray stamp #E6E7E9 with a 30px serif headline #6A6D72. Black stamp #111111 with small white mark. Monospace tag pill: #111111 bg, 10px white text, radius 3px, plus a white chip with a green dot. Zoom view background #000000.
MOTION: Idle: stack sits with rotations of -12deg, -6deg and 4deg, gentle 0.5deg float over 4s ease-in-out. Hover front stamp: translateY -10px, rotate to 0deg, scale 1.04, shadow grows, 320ms cubic-bezier(0.22,1,0.36,1); other stamps dim to 70% and shift 6px outward; issue tag fades in with 6px rise, 200ms. Enter zoom: collage fades to black over 250ms linear while the front stamp is shared-layout animated to center at about 75vh tall, 700ms cubic-bezier(0.65,0,0.35,1). In zoom the halftone arcs shimmer: dot size modulated by a slow noise, 6s loop. Exit reverses with 550ms.
SECTIONS: Collage layer with paper fragments; stamp stack (front, middle, back); hover tag; zoom stage on black; states idle, hover, zoomed, returning.
IMPLEMENTATION: React with Motion layoutId for the stamp moving between stack and zoom stage. Perforated edge via CSS mask with repeating radial gradients, so it scales crisply. Halftone arcs as an SVG pattern or a small canvas or fragment shader rendered once to a texture; animate only a uniform for the shimmer. Stamps are buttons with visible focus rings; Enter opens zoom, Escape closes. prefers-reduced-motion: no float or shimmer, crossfade instead of zoom. Keep shadows on transformed layers, avoid animating blur.
ADAPT TO THE PROJECT: Reuse the project's design tokens, fonts and card components; map colors to the closest existing tokens. Never copy logos, brand names, the original artwork or document text; use placeholder product names and generated halftone shapes.
SUCCESS CHECK:
- Stamps show clean perforated edges at any size, including zoomed.
- Hover lifts and straightens the front stamp smoothly, and zoom moves the same element to center without a jump.
- Keyboard users can open and close the zoom view, and reduced motion swaps zoom for a crossfade.
