A do vídeo. Execute-a primeiro, exatamente como escrita, para ver o efeito completo antes de personalizar qualquer coisa.
You are building a one-page, award-grade "scroll cinematic" website to be judged against Awwwards-level work. Work autonomously end to end: generate the assets with the Higgsfield connector, then build and run the site with your coding agent. Do not stop at a plan. Do not use placeholder assets.
THE PRODUCT (fictional luxury brand): OBSCURA MK I, a mythic mechanical camera. Matte black brass body, engraved dials, glass lens elements. Tagline: "Light, remembered." The site has one hero moment: as the visitor scrolls, the camera EXPLODES into roughly forty floating components (lens elements as glass discs, fanned iris blades, prism, shutter curtain, gears, screws), a prism splits white light into a spectral rainbow flare across the void, then scrolling onward REASSEMBLES it back into a whole camera.
THE TECHNIQUE (this is the secret, follow it exactly): The viral "3D scroll" effect is NOT Three.js and NOT WebGL. It is a canvas image-sequence scrub: short cinematic video clips are split into frames, and scroll position drives which frame is painted onto a full-viewport canvas. Smooth, deterministic, works everywhere.
ATIVOS (conector Higgsfield): 1. Gere UMA imagem âncora 16:9: "Ultra premium product photograph of a mythic mechanical camera, matte black metal with brass engraved dials and glass lens, floating centered in a pure black void, single dramatic top light, subtle gold rim light, photorealistic, luxury watch advertisement lighting, no text, no watermark." Use o melhor modelo de imagem atual no catálogo. 2. Usando essa âncora como referência de imagem em CADA clipe (isso trava a identidade do produto), gere três clipes de imagem-para-vídeo de 10 segundos, 1080p, 16:9, com o melhor modelo de imagem-para-vídeo atual: CLIP A "orbit": the camera floats in the black void and slowly rotates 360 degrees, gentle drift, nothing else moves. CLIP B "explode": the camera smoothly disassembles outward into its individual components which hang suspended in space, glass lens elements, fanned aperture blades, gears, dials, screws, a glass prism near the center splitting a beam of white light into a rainbow spectrum flare, slow, elegant, constant speed, ends fully exploded and holding. CLIP C "macro": slow macro glide across the engraved brass dial, over the glass lens with faint spectral refractions, ending on the OBSCURA engraving. A remontagem não precisa de clipe extra: rolar o CLIP B para trás É a remontagem. 3. Baixe os três MP4s para o projeto.
QUADROS: Use ffmpeg para extrair cada clipe em uma sequência JPEG: 150 quadros por clipe, 1600px de largura, qualidade 3, nomeados frames/orbit/frame_0001.jpg etc. Confirme a existência dos arquivos antes de escrever o código do site.
O SITE (HTML/CSS/JS puro, sem frameworks): index.html, styles.css, app.js. Carregador: tela preta, barra de progresso fina dourada e porcentagem que pré-carrega CADA quadro antes de desbloquear o scroll. Scroll suave: Lenis via CDN. Cada capítulo de arrasto é uma seção fixa de 100vh cujo progresso do scroll mapeia para sua sequência de quadros com suavização lerp, drawImage com matemática de ajuste cover. Estrutura: 1. HERO: orbit arrasta enquanto "OBSCURA" em uma grande serifa editorial desvanece e espaça as letras, sobrelinha "THE MK I. LIGHT, REMEMBERED." em maiúsculas pequenas com espaçamento. 2. MANIFESTO: texto poético curto, uma linha revelada por passo de scroll. 3. A EXPLOSÃO: clipe B arrasta para frente; quatro pequenos rótulos desvanecem perto dos componentes com linhas guia douradas finas (ELEMENT I: 9 lentes de vidro. IRIS: 12 lâminas. PRISM: espectro completo. 214 peças no total.) 4. REMONTAGEM: clipe B arrasta para trás, terminando com a linha "Every part, remembered." 5. MACRO: clipe C arrasta pelos detalhes. 6. ESPECIFICAÇÕES: grade minimalista de duas colunas com divisórias finas, especificações fictícias. 7. CTA: "Request the MK I", campo de e-mail, letra miúda. Direção de arte: fundo #050505, texto osso #EDEAE4, acento latão #B08D57, arco-íris espectral APENAS onde a luz do prisma aparece; display serif gigante (Cormorant Garamond) combinado com uma grotesca espaçada; enorme espaço negativo; sem caixas, sem cartões, sem sombras de projeção. Mobile e movimento reduzido: abaixo de 768px ou prefers-reduced-motion, substitua o arrasto no canvas pelos MP4s como vídeos de fundo em loop. Desempenho: requestAnimationFrame, repinte apenas quando o índice do quadro mudar, alvo 60fps.
VERIFICAR: abra o site servido e confirme que o carregador atinge 100 por cento e desbloqueia, todos os três capítulos de arrasto realmente arrastam, a remontagem reversa funciona, os rótulos aparecem, sem erros no console. Corrija o que estiver quebrado, depois me dê a URL ao vivo e um resumo dos ativos gerados e créditos gastos.