Tempo congelado como site: uma onda de whisky parada no meio da colisão, e a rolagem faz você orbitar ao redor do momento. O tempo só se move quando a página diz que sim.
Você está construindo um site de página única, nível premiado, de "cinemática de rolagem". Trabalhe autonomamente do início ao fim: gere os ativos com o conector Higgsfield, depois construa e execute o site com o assistente de código. Sem planos, sem placeholders.
O PRODUTO (destilaria fictícia): STILL No. 8, um single malt de dezoito anos. Slogan: "Time, held." O conceito é TEMPO CONGELADO: uma onda de whisky âmbar é capturada no meio da colisão ao redor da garrafa em pé, centenas de gotículas suspensas no ar. A rolagem não move o tempo, ela move a CÂMERA, orbitando o instante congelado. Em um capítulo, o tempo brevemente se libera, a onda colide por meio segundo em câmera super lenta, depois congela novamente.
A TÉCNICA (siga exatamente): O efeito de rolagem 3D NÃO é Three.js. É uma varredura de sequência de imagens em canvas: clipes de vídeo divididos em quadros, a posição da rolagem determina qual quadro é pintado em um canvas de viewport completo.
ATIVOS (conector Higgsfield): 1. UMA imagem âncora 16:9: "A whisky bottle standing in a pure black void, a dramatic wave of amber whisky frozen mid-crash wrapping around it, hundreds of droplets suspended motionless in the air, one shaft of warm light from above, ultra sharp, photorealistic advertising photography, no text, no watermark." Melhor modelo de imagem do catálogo. 2. Com a âncora como referência de imagem em cada clipe, três clipes de imagem-para-vídeo de 10 segundos, 1080p, 16:9: CLIP A "the orbit": the liquid stays perfectly frozen while the camera orbits 360 degrees around the bottle and the suspended wave, light glinting through the amber, nothing moves except the viewpoint. CLIP B "the release": time unfreezes, the wave continues its crash in extreme slow motion for a breath, droplets colliding and blooming, then freezes again in a new sculptural shape. CLIP C "the macro": the camera drifts through the droplet field close up, each droplet acting as a tiny lens refracting the bottle, one droplet trembling on the edge of falling. 3. Baixe os MP4s.
QUADROS: ffmpeg, 150 quadros por clipe, 1600px de largura, qualidade JPEG 3, nomenclatura frames/orbit/frame_0001.jpg. Confirme a existência dos arquivos primeiro.
O SITE (HTML/CSS/JS puro, Lenis via CDN, pré-carregador com porcentagem, capítulos fixos de 100vh com varredura e suavização lerp): 1. HERO: a órbita varre enquanto "STILL" se estabelece em uma serifa gigante, sobrelinha "No. 8. TIME, HELD." Legenda pequena: "Scroll moves you. Not time." 2. THE RELEASE: o clipe B varre; à medida que o tempo se libera, chamadas surgem com linhas de liderança âmbar finas: CASK No. 8, first fill sherry. 18 YEARS asleep. 46 PERCENT, non-chill filtered. 3. THE MACRO: o clipe C varre através do campo de gotículas. 4. THE CREED: três linhas curtas sobre paciência, uma por passo de rolagem. 5. TASTING: grade minimalista de duas colunas, nariz, paladar, final, divisores finos. 6. CTA: "Request an allocation", campo de e-mail, letras miúdas. Direção de arte: preto vazio #070605, texto osso #EDE7DA, acento âmbar #C87A1E brilhando apenas dentro do líquido; serifa gigante mais maiúsculas espaçadas; vasto espaço negativo. Mobile e movimento reduzido: fallback com MP4 em loop. Desempenho: requestAnimationFrame, repintar apenas na mudança de quadro, 60fps.
VERIFIQUE: o carregador desbloqueia em 100 por cento, a órbita do herói move claramente a câmera ao redor de um splash congelado, o capítulo de lançamento reproduz e recongela, a macro deriva através das gotículas, sem erros no console. Depois, forneça a URL ao vivo.