Gift Shop
A luminous gift-studio template with a real-time 3D scroll-unwrap.
- Client
- Atelier templates
- Sector
- Noor · concept-retail template
- Year
- 2026
- Reference
- No. 09
Scope
- Template product design
- React Three Fiber hero
- Holographic UI
- Gifting concierge
Stack
Ref 09 · interface preview
Overview
Noor is the concept-gift template: a deep space-violet room lit by three beams — violet, mint, holo pink — around a real-time 3D gift box that unwraps as you scroll. Built for gift shops, concept stores and florists whose product is the moment it arrives.
The pinned React Three Fiber hero uses a procedural box (no model files): ribbons slide off, the lid lifts, and a column of light and sparks pours out in sync with scroll, with holographic product cards and breathing aurora fields around it.
The challenge
Delivering a genuine 3D unwrap moment that stays fast, accessible and SSR-safe — and still leaves a shop with real ordering.
The approach
- 01
A DPR-capped, client-only R3F canvas with an SSR poster fallback that sleeps when offscreen; reduced motion renders the box opened and glowing as a static scene.
- 02
Holographic spring-tilt product cards and aurora gradient fields for the luminous concept-store feel.
- 03
A WhatsApp gifting concierge and config-driven content, consistent with the rest of the Atelier line.
Outcomes
3D
procedural gift box, zero model files
SSR
safe — poster fallback, DPR-capped canvas
0
backend — gifting runs over WhatsApp
Next case · Ref 10
Construction