Templates

Holiday Gift Shop Snow Globe

A mobile gift shop that opens through a glowing purple snow globe of floating products, then settles into curated gift grids and persona lists. Worth stealing for the 3D globe entry and the calm handoff into shopping UI.

Industries
Colors
Styles
Category

View original

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

1
Install the skill
Run these commands once in Claude Code. The skill gives the agent know-how for this kind of piece. With other agents, follow the instructions on the skill page.
threejs
```
npx skills add softwareinfocus/threejs-skills --skill threejs
```
animations
```
npx skills add https://github.com/mthines/agent-skills --skill animations
```
2
Create the images
Code cannot draw these well. Generate them with any image generator (hover the button to see a few), or with your agent's image tool if it has one, and save them in the project.

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

Paste the prompt in your agent

Hit Copy prompt above, open your project in the agent and paste it. The prompt links the original frames, so the agent can look at them before building.

Uses

Compare with the original

Put the two side by side. If something is off, tell the agent exactly what: timing, size, color or spacing.

Install the skill

Create the images

Paste the prompt in your agent

Compare with the original