Preparando tu entorno

Estudio de desarrolloBrasil → Mundo

🎃 EVENTO DE HALLOWEEN · HASTA EL 31/10

Códigos mueven el mundo.Sitios deotro mundo.

MILWEB® · Desarrollo creativo · Brasil → Mundo

Proyectos / Loja de iPhone Premium

COLECCIÓN DE RECOMPENSAS · 25 misiones

21 de 25

SE BUSCALoja de iPhone PremiumLoja de iPhone PremiumMW/OS · CASO 21 / 25Vitrina estilo Apple · video del unboxing controlado por el scroll

21 de 25 · PRODUCTO DIGITAL

Loja de iPhone Premium

Vitrina estilo Apple · video del unboxing controlado por el scroll

DEMOSTRACIÓNEN LÍNEA

Loja de iPhone Premium — pantalla inicial
ESTUDIO
MILWEB
Tipo
Sistema Web / SaaS
Stack
Next.js · TypeScript · Tailwind CSS · Playwright

CONTEXTO

El revendedor de iPhone suele tener solo Instagram como vitrina, o un template genérico que no transmite la sensación de tienda premium — y no convierte visitas en leads calificados.

QUÉ SE HIZO

Tienda de demostración comercial al estilo Apple Store: hero con video real del unboxing dirigido por el scroll (la caja se abre conforme el visitante se desplaza), catálogo con cuotas y ficha de batería por equipo, y checkout de lead que arma solo el mensaje de WhatsApp — con campo condicional para quien quiere entregar el iPhone anterior como parte de pago. La identidad (nombre, productos, fotos, video) se cambia en un único archivo de config, así que la misma base se convierte en la tienda de cualquier cliente.

VIDEO REAL CONTROLADO POR EL SCROLL

DETALLE TÉCNICO

  • 01El hero no usa autoplay en desktop: un rAF lee la posición del scroll y persigue el currentTime del video con un amortiguamiento (lerp), así…

    El hero no usa autoplay en desktop: un rAF lee la posición del scroll y persigue el currentTime del video con un amortiguamiento (lerp), así que desplazar la página es literalmente abrir la caja. El archivo se reencodea con GOP 1 — cada frame se vuelve keyframe — sin lo cual el seek se traba en producción aunque corra fluido en localhost. En el celular el mismo video corre en autoplay puro en loop: un equipo real no decodifica un frame de video pausado sin llamar a play(), así que dirigirlo por scroll dejaría el hero en blanco en el celular — el pin de altura doble también existe solo en desktop.

  • 02Carrito y checkout son solo frontend (localStorage), sin pasarela: el botón final arma el mensaje de WhatsApp con productos, subtotal y los …

    Carrito y checkout son solo frontend (localStorage), sin pasarela: el botón final arma el mensaje de WhatsApp con productos, subtotal y los datos del lead, revelando con una animación de altura el campo de entrega del equipo anterior (modelo + salud de la batería) solo cuando se marca el checkbox. La verificación visual corre con Playwright directo contra la URL de producción — scrub del hero en 5 posiciones, desktop y celular — porque el mismo scrub que pasa fluido en local puede romperse servido por la CDN.

RESULTADO

Tienda de demostración comercial al estilo Apple Store: hero con video real del unboxing dirigido por el scroll (la caja se abre conforme el visitante se desplaza), catálogo con cuotas y ficha de batería por equipo, y checkout de lead que arma solo el mensaje de WhatsApp — con campo condicional para quien quiere entregar el iPhone anterior como parte de pago. La identidad (nombre, productos, fotos, video) se cambia en un único archivo de config, así que la misma base se convierte en la tienda de cualquier cliente.

QUIERO ALGO PARECIDO ↗ABRIR SITIO ↗

Enter abre el primer resultado · Esc cierra · tecla / abre la búsqueda

Loja de iPhone Premium — Vitrina estilo Apple · video del unboxing controlado por el scroll | MilWeb