REFERENCE
- Gallery page: https://magpui.com/en/i/sticker-pack-burst-reveal-0ba70b
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sticker-pack-burst-reveal-0ba70b/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sticker-pack-burst-reveal-0ba70b/clip.mp4
- Original post: https://x.com/designbyaron/status/2112600237671932327 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: Build a self-contained animated sticker-pack reveal on a warm cream stage. A small orange foil packet rotates from its printed face to a narrow side view and back; colorful stickers spill into a curved trail, then settle into a loose but legible collection. The effect should feel like opening a collectible pack, not a full landing page.
DESIGN SYSTEM: Use a #E7E3D9 background and a saturated #FF521F packet, approximately 150 by 215px at a 640px-wide desktop stage. Give the packet subtly uneven foil edges, serrated top and bottom seams, a thin highlight and a darker orange side face. Use small black neo-grotesk labels, a two-stroke abstract placeholder mark and no copied branding. Build roughly 30 separate stickers from rounded labels, circles, hexagons, stars, tiny rulers and beveled geometric blocks; accents include #6683F5, #8CD1CB, #BADB52, cream and near-black. Mix 10-18px labels with a few larger numeric badges. Keep white sticker rims around the colorful shapes and a loose five-to-six-column final arrangement.
MOTION: Treat these as reconstruction timings: on play, rotate the packet around Y from 0 to 85 degrees and back over 1100ms, with a gentle 8-degree Z tilt, cubic-bezier(0.45,0,0.55,1). Hold the face for 250ms. Release the stickers along curved outward paths over 900ms with 25ms stagger; animate translation, rotation and scale from 0.4 to 1 using cubic-bezier(0.22,1,0.36,1). Move the packet away while the stickers settle into the final spread over 700ms, cubic-bezier(0.16,1,0.3,1), retaining small individual rotations. Hold the spread at least 1600ms. Do not add unobserved hover effects to the stickers.
SECTIONS: One isolated animation stage. States: sealed packet front; packet edge; front-facing packet; outward sticker trail around the packet; final sticker collection. Place a small accessible replay control outside the artwork.
IMPLEMENTATION: Use a GSAP timeline for overlapping packet rotation, curved sticker paths and the final layout, with CSS perspective and SVG or DOM sticker shapes. Simple beveled blocks can be composed from flat SVG faces, avoiding a WebGL context. Render packet seams with SVG rather than image textures. Use original generic labels. All pictured sticker types are geometric and can be drawn in code. Animate transforms and opacity only; cap the sticker count at 33 and avoid per-frame layout reads. With prefers-reduced-motion, show the finished sticker collection and let Replay crossfade from the packet. Make Replay keyboard-operable with a visible focus ring and a clear accessible label.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts. Map these estimated colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original; use placeholders and original geometric motifs.
SUCCESS CHECK:
- Packet visibly passes through a narrow side view before the sticker release.
- Stickers follow a curved trail and end separated in a legible collection rather than an overlapping pile.
- The animation stays within its responsive stage and has keyboard replay plus a reduced-motion final state.
