Cenas 3D Cinematográficas para Web

O que Cenas 3D Cinematográficas para Web faz?

Pessoas descrevem animação usando palavras de sentimento ('épico', 'suave', 'é engolido', 'como um filme'). O código precisa de decisões exatas: o que está na tela, onde está a câmera, o que se move, com que rapidez, em qual easing, iluminado como, e o que o texto faz em cada ponto do scroll. Quando essas decisões são deixadas para o palpite, o resultado é tecnicamente bom, mas não é o que eles imaginaram — e cada rodada de correção custa mais do que acertar de primeira.

Este skill fecha essa lacuna em duas etapas: diretamente antes de construir (transformar a descrição em uma especificação de cena precisa e confirmada) e construir sobre uma base comprovada (uma arquitetura e biblioteca de técnicas que tornam a especificação confiável de implementar e suave de navegar).

Funciona para qualquer cena — as cenas do portfólio incluído (um laptop que abre, um átomo de habilidades em órbita, logotipos que acendem e queimam, um túnel de buraco negro) são exemplos práticos do método, não um menu para escolher.

Arquivos

references/scene-language.md   vocabulário de movimento preciso + traduções de palavras vagas em especificidades
references/scene-spec.md       o formato de especificação de cena / storyboard, com exemplos práticos
references/techniques.md       como construir cada tipo de efeito (câmera, shaders, partículas, texto…)
references/architecture.md     o padrão de cena com scroll fixo, timelines, desempenho, pegadinhas
references/house-style.md      o estilo visual padrão, e como capturar um estilo a partir de referências
references/effects.md          as cenas finalizadas do modelo, dissecadas — copie ou aprenda com elas
references/portfolio.md        construindo um portfólio completo a partir do modelo
references/content-guide.md    os campos de conteúdo do modelo
references/portrait-rig.md     o herói de retrato vivo do modelo
template/                      site de portfólio Next.js completo (o exemplo prático)
scripts/create-site.mjs        inicia um novo site de página única (Next.js, fundo padrão, pronto para cenas)
scripts/new-scene.mjs          gera uma nova cena com scroll fixo (seção + timeline, + canvas 3D a menos que --no-canvas)
scripts/video-frames.mjs       extrai quadros de um vídeo de referência para estudar o movimento
scripts/create-portfolio.mjs   copia o modelo de portfólio completo para uma nova pasta
scripts/retheme.mjs            recolor a família de acentos do modelo

O fluxo de trabalho

1. Entender o que eles imaginam

Leia a solicitação para: qual é o propósito da página, o que cada cena deve mostrar, o sentimento, quaisquer referências (sites, vídeos, imagens, filmes, jogos) e quaisquer restrições rígidas (site existente, framework, cores da marca).

Se eles deram uma referência, estude-a antes de qualquer outra coisa — ela carrega mais informações do que qualquer descrição. Imagens: olhe para elas. Vídeo: execute scripts/video-frames.mjs e olhe os quadros em ordem (veja 'Lendo um vídeo de referência' abaixo). Site: se puder abri-lo, role e tire screenshots em intervalos. Observe o estilo (cor, luz, tipo, movimento de fundo) separadamente da coreografia (o que se move quando) — as pessoas geralmente querem um ou outro de uma referência, e você deve perguntar qual se não estiver claro.

2. Traduzir para uma especificação de cena

Leia references/scene-language.md, depois escreva a especificação no formato de references/scene-spec.md. Para cada cena: a ideia em uma frase, os objetos, o estilo padrão ou visual escolhido, e uma planilha de batidas — o que está na tela em cada trecho de scroll (0–15%, 15–40%, …), com o movimento da câmera, o movimento (verbo + easing + duração), a mudança de luz/cor, os efeitos (partículas, distorção, brilho) e o que o texto faz.

Palavras vagas são resolvidas aqui, não no código. 'É sugado' se torna: as letras do título espiralam em direção ao centro da tela, cada uma começando quando a borda do vórtice a atinge, girando 150° enquanto encolhem para 15% e desfocam para 6px em 10% do scroll; o fundo deforma em direção ao centro na mesma janela. Se uma palavra puder significar duas coisas bem diferentes, ofereça as duas leituras concretas e escolha a mais provável como padrão.

3. Confirmar antes de construir

Mostre a especificação para a pessoa — leva um minuto para ler e economiza horas. Peça para corrigir qualquer coisa que não seja o que imaginaram, especialmente o ritmo (muito rápido / muito lento) e o momento chave de cada cena. Mantenha a mensagem curta: a planilha de batidas mais 2–3 perguntas direcionadas com suas respostas padrão, para que 'sim, vá' seja uma resposta válida.

Se não puder perguntar (uma solicitação única ou automatizada), siga com suas opções padrão e inclua a especificação na mensagem final para que a pessoa possa redirecionar com precisão.

4. Construir em camadas

Leia references/architecture.md antes de escrever código — comece com sua tabela 'isso precisa de WebGL?' — e references/techniques.md para cada efeito na especificação.

Onde o código vai:

• Um novo site (landing page, página de produto, qualquer página única): node <skill-dir>/scripts/create-site.mjs <pasta> cria um projeto Next.js pronto com o fundo padrão, fontes e configuração de lint; adicione cenas a ele.
• Um site existente: trabalhe no projeto deles e leia 'Trabalhando dentro de um site existente' em architecture.md primeiro.
• Um portfólio completo: comece a partir do modelo (references/portfolio.md).

Depois construa cada cena nesta ordem, verificando após cada camada:

1. Blocagem — a seção fixa, a timeline de scroll com um slot por batida, formas placeholder e o caminho da câmera. scripts/new-scene.mjs <projeto> <Nome> --beats N gera esse esqueleto, já configurado (progresso do scroll → timeline compartilhada → câmera 3D e legendas DOM, fallback de movimento reduzido, pausado quando fora da tela); adicione --no-canvas para efeitos apenas com DOM. Role por ele: as batidas estão na ordem e ritmo corretos?
2. Movimento — os movimentos e transições reais, com seus easings e durações da especificação. A sincronização é o que as pessoas mais reagem; acerte antes de embelezar.
3. Aparência — materiais, luz, cor, brilho, partículas, fundo, tipografia.
4. Polimento — inclinação do ponteiro, deriva ociosa, pequeno movimento secundário, enquadramento móvel, movimento reduzido.

Execute npm run lint junto com o build — as regras React pegam erros de mutação por quadro antes que se tornem bugs sutis.

5. Verificar contra a especificação

Faça o build (npm run build), execute, e tire screenshots de cada batida em sua posição de scroll. Compare cada screenshot à planilha de batidas linha por linha: aquele objeto está lá, a câmera está enquadrada como descrito, o texto está visível, a cor está correta? Corrija o que não corresponder antes de mostrar. Aguarde um segundo após o scroll antes de cada screenshot — as cenas se acomodam suavemente. Verifique também um viewport de tamanho de celular (375×812) e movimento reduzido. Se não tiver ferramenta de navegador, diga claramente que as cenas foram construídas mas não visualizadas, e liste o que verificar.

6. Refinar com linguagem precisa

Quando a pessoa reagir ('parece barato', 'exagero', 'não é dramático o suficiente'), traduza o feedback com scene-language.md da mesma forma que a solicitação original, proponha a mudança específica ('desacelerar o mergulho de 8% para 14% do scroll e adicionar uma pausa de 0,3s antes'), depois faça-a. Mude uma coisa de cada vez quando estiverem inseguros, para que possam dizer o que ajudou.

Lendo um vídeo de referência

node <skill-dir>/scripts/video-frames.mjs <vídeo> --every 0.25 --out frames/

Ele precisa de ffmpeg (o script explica como instalar se faltar). Olhe os quadros em ordem e anote, por trecho de tempo: o que está na tela, o que se moveu e como (direção, velocidade, easing — acelera, ultrapassa, estabiliza?), a câmera (estática, empurrão, órbita, tremor), cortes vs movimentos contínuos, e a cor/luz. Essa lista é o primeiro rascunho da planilha de batidas. Para momentos rápidos, execute novamente com --every 0.04 apenas naquele trecho (--from, --to).

Inegociáveis

Estes vêm de falhas reais; cada um tem uma razão em architecture.md.

• Toda cena tem uma versão de movimento reduzido (um layout estático que ainda mostra todo o conteúdo).
• WebGL carrega apenas no cliente e pausa quando sua seção está fora da tela ou a aba está oculta.
• O texto 3D e DOM leem as mesmas funções de timeline, para que não possam se desalinhar.
• Valores vinculados ao scroll dentro de seções fixas usam transformações de função, não arrays de intervalo.
• Brilho simulado (halos aditivos), não bloom de pós-processamento, a menos que a pessoa aceite o custo.
• Todo o conteúdo da página é texto real e legível no DOM — não apenas cozido em canvases.
• Nunca invente fatos sobre uma pessoa ou produto na cópia; texto de design é aceitável, alegações não são. Preços, especificações, datas, estatísticas e prêmios que você não recebeu vão como [placeholders] visíveis.
• Qualquer coisa que toque sozinha (uma introdução ao carregar) tem um controle de pular visível, e toda cena tem um fallback sem WebGL (imagem de pôster ou layout estático).
• No site existente de alguém, mude apenas o que o efeito precisa e diga o que foi alterado.

Créditos a manter

O modelo credita seu autor original e as peças de código aberto em que se baseia (React Bits para ColorBends e Magnet, o par de tipos seguindo dungyov.com). Mantenha esses créditos ao reutilizar essas partes.