REFERENCE
- Gallery page: https://magpui.com/en/i/frosted-folder-opens-on-hover-82b632
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/frosted-folder-opens-on-hover-82b632/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/frosted-folder-opens-on-hover-82b632/clip.mp4
- Original post: https://x.com/AdityaSur11/status/2116088350071558294 by @AdityaSur11
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.
- Bird postage stamp: A vintage Japanese-style postage stamp illustration with a scalloped perforated edge: a cute round blue-and-white bird perched on a branch above stylized teal ocean waves, a small red sun behind, bold price numeral and short caption at the bottom, flat screen-print look with limited colors (teal, cream, navy, orange), crisp edges, plain transparent background, 3:4 aspect ratio
- Cream sketch stamp card: A cream paper postage-style card with a scalloped edge and a fine ink pen sketch of a small bird on a twig, a few vertical lines of tiny handwritten-looking script on top and a small price mark in the corner, soft paper texture, plain transparent background, 3:4 aspect ratio
BUILD: Build a single interactive folder component centered on a very light page: a rounded, portrait, slightly chunky folder (about 200px wide by 240px tall) with a soft frosted, blurred-glass cover. On hover the front cover swings open on its left edge in 3D perspective, and a small stack of collectible stamp cards slides out of the right side, fanned and slightly rotated. Below the folder sit three small round color swatches that re-tint the folder. It should feel tactile, calm and collectible.
DESIGN SYSTEM: Page background off-white #f4f4f4, no other chrome. Folder: three color variants, mustard #e3b83c, magenta #d6209c, charcoal #2b2b2b. The cover is a rounded rectangle (radius about 18px) with a soft vertical gradient (about 8% lighter at the top), a thin lighter inner edge, and a frosted look: the right third of the cover is blurred (backdrop-filter blur about 14px plus 25% white tint) so the cards behind it show as soft blobs when closed. Folder body behind the cover is the same hue about 12% darker, with a small tab notch on the top right and a thin darker 6px thickness on the right side so it reads as a slim box. Cover text bottom-left: a short Japanese title in about 13px medium sans and a smaller 9px English caption at 60% opacity, plus two faint horizontal lines at the bottom edge. Cards: 3 stamp-style cards (about 110px by 150px) with perforated scalloped edges, one cream paper card with a small ink drawing, one teal illustrated postage stamp with a bird and a bold price numeral; each has a soft shadow (0 6px 14px rgba(0,0,0,0.18)). Swatches: 3 circles of 16px with 14px gap, 28px below the folder, the active one has a 1.5px ring offset by 2px. Cursor is the normal arrow.
MOTION: (1) Hover open: the cover rotates around its left edge with rotateY from 0 to about -62deg in 520ms with cubic-bezier(0.22, 1, 0.36, 1), transform-origin left center, perspective about 900px; at the same time the cover's blur fades from 14px to 3px and its shadow grows. (2) Cards: they translate from inside the folder to the right by 70-110px and rotate to about 4deg, 9deg, 14deg respectively, staggered by 60ms, 480ms each, with a tiny overshoot (cubic-bezier(0.34, 1.56, 0.64, 1)). (3) Mouse leave: everything reverses in about 420ms, cards slide back first (50ms stagger) and then the cover closes. (4) Swatch click: the folder color cross-fades in 350ms, and the folder does a quick 2-3% scale pulse (180ms ease-out); the cards stay put. (5) Idle: a barely visible 2px vertical float over about 4s.
SECTIONS: Folder cover (front face with title and caption), folder back and tab, stack of stamp cards, swatch row. States: idle closed (blurred cover, cards hidden), hover open (cover swung wide, cards fanned), color change (cross-fade between the three variants), pressed (cover opens slightly more).
IMPLEMENTATION: React or plain HTML with CSS 3D transforms (perspective, preserve-3d, backface-visibility hidden) and CSS transitions or Motion springs for the staggered cards; backdrop-filter for the frosted side with a solid-tint fallback. Use a button-like focusable wrapper: open also on keyboard focus and Enter/Space toggle, aria-expanded, swatches as a radio group with visible focus rings. prefers-reduced-motion: no rotation, just crossfade open/closed states over 150ms. Keep it GPU friendly: animate only transform and opacity, devicePixelRatio aware images, 60fps.
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 placeholder cards or generated artwork.
SUCCESS CHECK:
- Hovering swings the cover open in perspective with no jitter and the cards fan out in a visible stagger, then return cleanly on mouse leave.
- Switching swatches changes the folder color smoothly without resetting the open or closed state.
- The frosted cover blurs what sits behind it, keyboard focus opens the folder, and reduced-motion users get a simple crossfade.
