SPINA

O problema

Uma marca de camisetas oversized precisava de um site que fosse experiência de marca e loja ao mesmo tempo, sem cara de template, para um público que chega quase todo pelo Instagram, no celular.

Uma marca de camisetas que queria contar a história do drop antes de vender.

O que construí

Construí o filme da abertura percorrido pela rolagem, a passarela do drop e a compra inteira: login por código, sacola na conta, frete e pagamento.

Como funciona

1. Filmequadros AVIF
2. Rolagemcanvas + GSAP
3. Camisetarecorte
4. FreteSuperFrete
5. PagamentoStripe
6. ReciboResend

Decisões

1. Astro estático, sem React: só a home tem JavaScript pesado, e React só somaria peso para quem abre pelo Instagram.
2. O filme da abertura é uma sequência de quadros num canvas, não um vídeo controlado pela rolagem: é exato nos dois sentidos e não depende do modo de economia de bateria do iPhone.
3. Provei o motor com um quadro de teste neutro antes de qualquer arte: o risco técnico (memória do iPhone, passagem do filme para o produto) se resolve sem arte.

Desafios

• Na rolagem rápida sobrava tela velha porque a memória de quadros esvaziava de uma vez

  o descarte passou a ser gradual, do mais longe para o mais perto, e os quadros foram para AVIF.

• Num celular 4 vezes mais lento, 22% dos quadros chegavam atrasados

  o decodificador passou a mirar onde a rolagem vai estar em 0,15 s, e os atrasos caíram para 4%.

• A camiseta recortada não batia com o último quadro do filme

  a camada da página redesenha o quadro que o navegador já decodificou e recorta pela máscara.

Resultado

loja no ar · projeto para cliente

Stack

• Astro
• TypeScript
• Supabase
• Stripe
• SuperFrete

Telas