Apple-style storefront · scroll-driven unboxing video
Loja de iPhone Premium
Problem
iPhone resellers usually have only Instagram as a storefront, or a generic template that doesn't feel premium — and doesn't convert visits into qualified leads.
Solution
Commercial demo store in an Apple Store style: hero with a real unboxing video driven by scroll (the box opens as the visitor scrolls), a catalog with installment pricing and per-device battery health, and a lead checkout that builds its own WhatsApp message — with a conditional field for trading in an old iPhone. Identity (name, products, photos, video) swaps through a single config file, so the same base becomes any client's store.
How it was built
The hero doesn't autoplay on desktop: a rAF loop reads scroll position and chases the video's currentTime with damping (lerp), so scrolling the page literally opens the box. The file is re-encoded with GOP 1 — every frame becomes a keyframe — without which seeking stutters in production even when it runs smoothly on localhost. On mobile the same video runs on plain autoplay loop instead: a real device won't decode a frame of a paused video without calling play(), so driving it by scroll would leave the hero blank on the phone — the double-height scroll pin only exists on desktop too.
Cart and checkout are frontend-only (localStorage), no payment gateway: the final button builds the WhatsApp message with products, subtotal and lead details, revealing the trade-in field (model + battery health) with a height animation only when the checkbox is checked. Visual verification runs with Playwright straight against the production URL — the hero scrub at 5 positions, desktop and mobile — because a scrub that runs smoothly locally can still break once served from the CDN.
Stack
- Next.js
- TypeScript
- Tailwind CSS
- Playwright