Vitrine Apple-style · vídeo do unboxing controlado pelo scroll
Loja de iPhone Premium
Problema
Revendedor de iPhone costuma ter só o Instagram como vitrine, ou um template genérico que não passa a sensação de loja premium — e não converte visita em lead qualificado.
Solução
Loja de demonstração comercial no estilo Apple Store: hero com vídeo real do unboxing dirigido pelo scroll (a caixa abre conforme o visitante rola), catálogo com parcelamento e ficha de bateria por aparelho, e checkout de lead que monta sozinho a mensagem do WhatsApp — com campo condicional pra quem quer repassar o iPhone antigo. Identidade (nome, produtos, fotos, vídeo) troca num único arquivo de config, então a mesma base vira a loja de qualquer cliente.
Como foi construído
O hero não usa autoplay no desktop: um rAF lê a posição do scroll e persegue o currentTime do vídeo com um amortecimento (lerp), então rolar a página é literalmente abrir a caixa. O arquivo é reencodado com GOP 1 — todo frame vira keyframe — sem o que o seek engasga em produção mesmo rodando liso em localhost. No mobile o mesmo vídeo roda em autoplay puro em loop: aparelho real não decodifica frame de vídeo pausado sem dar play(), então dirigir por scroll deixaria o hero em branco no celular — o pin de altura dupla também só existe no desktop.
Carrinho e checkout são só frontend (localStorage), sem gateway: o botão final monta a mensagem do WhatsApp com produtos, subtotal e os dados do lead, revelando com uma animação de altura o campo de repasse (modelo + saúde da bateria) só quando o checkbox é marcado. Verificação visual roda com Playwright direto contra a URL de produção — scrub do hero em 5 posições, desktop e mobile — porque o mesmo scrub que passa liso local pode quebrar servido pela CDN.
Stack
- Next.js
- TypeScript
- Tailwind CSS
- Playwright