REFERENCE
- Gallery page: https://magpui.com/en/i/metal-badge-case-unboxing-592079
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/metal-badge-case-unboxing-592079/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/metal-badge-case-unboxing-592079/clip.mp4
- Original post: https://x.com/designbyaron/status/2115855159884698076 by @designbyaron
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 brand artifact animation: an isometric metal carrying case on a warm off-white page. Closed, the lid is brushed aluminum with a big lowercase wordmark and three gem badge stickers (a red-orange hexagon, a violet diamond, a small lime shape) plus two dark pill vents; two chunky latches sit on the front. Sequence: the latches flip down with a small click, the lid rotates open to about 100 degrees revealing a dark inner lid panel and a charcoal foam tray with eight empty cut-outs in two rows (hexagons, diamonds, rounded gems). Then glassy, faceted badges fall from above one by one, rotate slightly in the air and settle into their matching cut-outs with a little bounce and shadow. Small editorial labels sit in the top corners ("No. 06 · The badge case", a frame counter). It should feel premium, tactile and collectible, like a physical achievement kit.
DESIGN SYSTEM: Background #EFEDE6. Case body #8E9196 to #C8CACD brushed gradient with a subtle horizontal noise, edges #5E6166, base band #4A4C50. Inner lid #3A3B3E, foam #2C2D30 with cut-outs #1E1F21 and a soft inner shadow. Badges: red-orange #F0533A, violet #7A6CF0, blue #5B8DF0, lime #8DD43A, each with a lighter top facet, white rim and specular highlight. Labels 10px grotesk #6A6A6A. Contact shadow under the case rgba(0,0,0,0.18) blur 30px.
MOTION: Timeline about 5s, loopable. Latches rotateX 0 to -90deg, 180ms each, 80ms apart. Lid rotate 0 to -100deg around the back hinge over 900ms with ease [0.2,0.8,0.2,1] and a 4deg overshoot. Tray fades its inner shadow in. Badges: each drops from 120px above with translateY and rotateZ 20deg to 0 over 420ms, spring (stiffness 300, damping 18), 260ms stagger, landing with a 0.96 squash and a shadow that sharpens on impact. Hold 1.2s, then reverse or crossfade to the start.
SECTIONS: Stage with corner labels; case (lid, body, latches, tray); badge layer; optional replay button.
IMPLEMENTATION: Three.js or React Three Fiber with simple extruded geometry and environment lighting, or a CSS 3D transform build if lighter weight is needed. Use Motion or GSAP for the timeline. prefers-reduced-motion: show the final open state with badges in place. Provide an aria-label describing the artifact.
ADAPT TO THE PROJECT: Swap in the project's wordmark and badge colors, and use the badges for its real achievements. Do not copy the original brand.
SUCCESS CHECK:
- Latches, lid and badges play in a clear, staggered sequence.
- Badges land exactly in matching cut-outs with a believable bounce.
- Reduced motion shows a static, complete final state.
