Nenhuma explosão aqui: o scroll leva os visitantes por um museu escuro construído para o seu trabalho. Cada projeto é uma exposição em um pedestal iluminado. Preencha os colchetes antes de colar.
Você está construindo MEU portfólio pessoal como um site de página única, de nível premiado, com efeito "scroll cinematográfico". Trabalhe de forma autônoma do início ao fim: gere os ativos com o conector Higgsfield, depois construa e execute o site com o seu agente de código. Sem planos, sem placeholders. Meus dados: NOME: [YOUR NAME]. TÍTULO: [e.g. PRODUCT DESIGNER]. PROJETOS, três a cinco, cada um com um resultado em uma linha: [PROJECT 1: RESULT] [PROJECT 2: RESULT] [PROJECT 3: RESULT]. CONTATO: [EMAIL].
O CONCEITO: meu portfólio é um museu privado à noite. Um vasto salão de exposição escuro, piso de pedra polida, artefatos de vidro brilhantes em pedestais iluminados por holofotes, recuando na escuridão. A rolagem não move a página, ela move o VISITADOR: a câmera desliza para frente pelo salão, chegando a uma exposição após outra, e termina em uma parede monumental gravada com meu nome. A rolagem é uma caminhada.
A TÉCNICA (siga exatamente): O efeito de rolagem 3D NÃO é Three.js. É uma 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: "Vast dark museum exhibition hall at night, polished black stone floor with soft reflections, a row of white marble plinths receding into darkness, each holding a glowing translucent glass sculpture under a single warm spotlight, cinematic, photorealistic, architectural photography, no people, 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 "a aproximação": altas portas de bronze se abrem levemente e a câmera desliza lentamente para frente no salão escuro, o primeiro pedestal iluminado emergindo da escuridão. CLIP B "a caminhada": um dolly contínuo e suave pelo salão, passando perto de quatro artefatos brilhantes em pedestais, cada um capturando a luz de forma diferente, ritmo constante, sem cortes. CLIP C "a parede do nome": a câmera sobe e inclina para cima até uma parede de pedra escura monumental com um brilho quente de contraluz ao longo de grandes letras gravadas, partículas de poeira no feixe de luz. 3. Baixe os MP4s.
QUADROS: ffmpeg, 150 quadros por clipe, 1600px de largura, qualidade JPEG 3, nomenclatura frames/approach/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 suavização lerp): 1. HERO: a aproximação é varrida enquanto [YOUR NAME] aparece em fade sobre as portas em uma serifa editorial massiva, overline [TITLE] em maiúsculas espaçadas, indicador de rolagem "Enter". 2. A CAMINHADA: o clipe B é varrido; à medida que a câmera passa por cada pedestal, uma legenda de projeto aparece e desaparece ao lado com uma linha guia fina de latão: nome do projeto, resultado em uma linha, ano, usando minha lista de projetos. Sincronize as legendas com a passagem da câmera pelos pedestais um, dois, três, quatro. 3. A PAREDE DO NOME: o clipe C é varrido enquanto a parede gravada se resolve; sobreponha meu nome na mesma serifa alinhado à gravação, depois uma linha: "Every piece, placed on purpose." 4. TRABALHOS SELECIONADOS: uma lista de índice limpa abaixo do cinema, uma linha por projeto, nome mais resultado mais ano, divisores finos (deixe espaços para imagens que adicionarei depois). 5. CONTATO: "Visit the studio." em tamanho grande, com [EMAIL] como link dourado quente. Direção de arte: preto de museu #0B0B0C, brilho quente de exposição #F1E4C8, acento de latão #A98963; serifa de display massiva mais legendas pequenas em mono; silêncio e espaço, sem cartões, sem sombras. Mobile e movimento reduzido: substitua a varredura pelos MP4s como vídeos de fundo em loop. Desempenho: requestAnimationFrame, repinte apenas quando o índice do quadro mudar, 60fps.
VERIFICAÇÃO: o loader desbloqueia em 100 por cento, a caminhada desliza de fato pelos expositores com legendas sincronizadas aos pedestais, a parede de nomes se resolve, sem erros no console. Depois, forneça a URL ao vivo.