REFERENCE
- Gallery page: https://magpui.com/en/i/holiday-gift-shop-snow-globe-53133b
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/holiday-gift-shop-snow-globe-53133b/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/holiday-gift-shop-snow-globe-53133b/clip.mp4
- Original post: https://x.com/regyperlera/status/2118132238390903124 by @regyperlera
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.
- gift-prop-set: Set of three small holiday gift props floating: gold boot, crystal prism, textured black bag, soft studio lighting, purple rim light, isolated on transparent background, product render, 1:1
BUILD: Build a mobile-first holiday gift-shop experience. Home: dark violet gradient with soft sparkle particles; a large glass snow globe on a short pedestal holds 2–3 floating product props that slowly orbit; headline "Shopping for gifts?" plus a short subline and a pill CTA "Enter the Gift Shop". Tapping the CTA dissolves chrome, keeps the globe, and shows a bottom progress line "Gathering the perfect gifts...". After ~1.8s the globe blooms into a masonry gift feed (rounded image tiles, mixed sizes) with a floating "My gift lists" chip and a purple bag FAB. Opening a persona card (e.g. The Lavish Party Host) pushes a light-gray collection grid of product cards. Top has For You / Holiday Hub tabs and a search field before entry; after entry an X closes back to home.
DESIGN SYSTEM: iPhone-width ~390px frame. Type: clean geometric sans, 22px bold headline, 14px body, 12px meta. Colors: void #1A0B2E → #4B1D7A gradient, accent violet #8B5CFF, CTA fill #6E3AFF, snow highlights #FFFFFF at 40% opacity, feed bg #F5F5F7, cards #FFFFFF radius 16–20px. Soft bloom on the globe rim. Bottom nav: 5 icons, bag tinted violet when gift mode is active. Spacing 12/16/24.
MOTION: Globe idle: products orbit 12s linear, gentle vertical bob 2s sine. CTA press: scale 0.97 / 120ms. Enter: chrome fades 280ms, progress bar fills 1800ms cubic-bezier(0.4,0,0.2,1), globe scale 1→1.15 then crossfade to feed 420ms. Feed tiles stagger in 40ms. Collection push: shared-element style slide up 360ms. Particles: 40 soft dots drifting upward.
SECTIONS: (1) Home with tabs/search/globe/CTA/bottom nav. (2) Gathering interstitial. (3) Gift feed masonry + My gift lists. (4) Persona collection grid. (5) Optional product detail stub.
IMPLEMENTATION: React + Tailwind + Motion for UI; Three.js/R3F (or CSS 3D + canvas) for the globe glass, refraction-ish rim and floating props. Prefer video/Lottie only if 3D budget is too high. prefers-reduced-motion: static globe frame, skip particle drift, instant feed. Keep real buttons and focus order. Cap dPR at 2; pause WebGL when offscreen.
ADAPT TO THE PROJECT: Reuse the project's tokens, buttons and fonts; map violets to closest brand accents; never copy logos, brand names, photos or illustrations from the original — use placeholder products and generated props.
SUCCESS CHECK:
- Enter CTA plays gathering state then lands on a scrollable gift feed
- Globe products keep orbiting at 60fps on a mid-range phone
- Persona collection opens/closes without losing feed scroll position
