REFERENCE
- Gallery page: https://magpui.com/en/i/hold-to-reveal-a-foil-pack-8e700f
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/hold-to-reveal-a-foil-pack-8e700f/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/hold-to-reveal-a-foil-pack-8e700f/clip.mp4
- Original post: https://x.com/nickbakeddesign/status/2114067278241353903 by @nickbakeddesign
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: Build an isolated press-and-hold reward-pack component. Center a floating metallic green packet above a circular holographic pedestal on a near-black green field. Holding charges the packet into an intense rarity-colored reveal.
DESIGN SYSTEM: Use a roughly 180 by 270px packet on desktop, metallic folded edges and ribbed seals. Estimate background #020E09, green highlights #6BFF9C, cyan #8BFFF1 and rare gold #E9FF63. Place fine concentric elliptical rings beneath it, tiny uppercase instructions below, and a bold neutral placeholder wordmark on the wrapper. Small particles add depth without obscuring the packet.
MOTION: Suggested timings: idle float translateY 8px over 2600ms alternating with cubic-bezier(0.45,0,0.55,1); sweep diagonal foil highlights over 1800ms. Pointer hold builds glow and scale from 1 to 1.06 over 1200ms with cubic-bezier(0.4,0,0.2,1). On completion, flash the packet toward white and tint the pedestal cyan or yellow over 450ms with cubic-bezier(0.16,1,0.3,1), emitting a brief particle burst. Fade in the rarity label over 250ms. Releasing early reverses charge over 250ms. These are implementation targets rather than measured timings.
SECTIONS: Idle sealed packet; holding and charging; luminous rarity reveal; readable outcome label and reset control. Keep the result extensible to project reward data without inventing unseen reward-card layouts.
IMPLEMENTATION: Use Motion for state transitions, CSS gradients and masked highlights for the foil, SVG elliptical rings and a small canvas particle layer. Limit particles to 80 and animate only transforms and opacity where practical. Support Space and Enter hold, pointer cancellation, visible focus, and an accessible progress label. Reduced motion replaces floating, flashes and particles with a steady glow and immediate result.
ADAPT TO THE PROJECT: Reuse existing tokens, fonts and components; map colors to closest existing tokens. Never copy logos, brand names, photos or illustrations; use placeholder wrapper graphics.
SUCCESS CHECK:
- Hold progress cancels cleanly on early release.
- The packet remains readable against the glow at mobile widths.
- Keyboard and reduced-motion users can reveal and reset the result.
