Loja de iPhone Premium

Apple-style storefront · scroll-driven unboxing video

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.

• 01The hero doesn't autoplay on desktop: a rAF loop reads scroll position and chases the video's currentTime with damping (lerp), so scrolling …+

  READ THE TECHNICAL DETAIL

  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.

• 02Cart and checkout are frontend-only (localStorage), no payment gateway: the final button builds the WhatsApp message with products, subtotal…+

  READ THE TECHNICAL DETAIL

  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.

BUILT WITH — Next.js · TypeScript · Tailwind CSS · PlaywrightCODE ↗

Real video driven by scroll

PERSONAL PROJECT · LIVE

[ I WANT SOMETHING LIKE THIS ]