MotionCraft Builder

O que MotionCraft Builder faz?

Esta skill ensina um agente a construir sites de movimento como pequenos estúdios produzem trabalhos premiados: uma ideia, um plano escrito, uma mecânica funcional em caixas cinzas, depois a vestimenta, e então uma análise rigorosa e uma rodada de correções. O ofício está nas referências. Este arquivo é o fluxo de trabalho.

Stack padrão: HTML semântico, CSS, módulos JavaScript vanilla, three.js 0.170 via mapa de importação, sem etapa de build. Adicione GSAP ou Lenis apenas quando uma receita precisar deles. Toda página deve funcionar, ser legível e converter com WebGL desligado.

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
  }
}
</script>

O fluxo de trabalho

Execute estas etapas em ordem. Não pule para os efeitos. Cada etapa tem uma saída que você pode mostrar à pessoa antes de prosseguir.

Etapa 1. Encontre a ideia única

Leia o briefing e liste o mundo real do cliente: os objetos que eles manipulam, os papéis que imprimem, os sons do lugar, os verbos que sua equipe usa o dia todo. Então escreva uma frase:

[Marca] é um site onde você [verbo] [objeto do mundo deles], e ele mostra a você [o valor que vendem].

Exemplos com marcas fictícias:

• Cinderford Coffee Roasters: você rola um único grão pela torra, do verde à primeira rachadura até o café cheio, e as notas de sabor são impressas no registro de torra conforme a cor muda.
• Lakemont Bike Fitters: você arrasta a altura do selim de um ciclista e o arco do ângulo do joelho é redesenhado na vista lateral ao vivo.
• Halvorsen Tide Charters: você desliza o relógio da maré e o barco sobe e desce contra o cais real.

Regras para a ideia (veja regras de ofício 1 a 3):

• Um objeto, um verbo, um mundo. Se você precisar de "e" duas vezes, são duas ideias. Escolha uma.
• A metáfora vem do mundo do cliente, nunca de uma tendência. Uma garagem fala em ordens de reparo, um merceeiro em circulares semanais, uma agência de transportes em diagramas de linha.
• Dê à cor de destaque um único trabalho. Se vermelho significa "uma falha foi encontrada", não significa mais nada em nenhum outro lugar da página.
• O carregador, cursor, navegação, estados de hover, transições e o erro 404 falam todos a mesma língua.

Saída: a frase, o verbo, a cor de destaque e seu significado, e três ideias rejeitadas com uma linha sobre por que cada uma perdeu.

Etapa 2. Escolha uma arquitetura de página

Abra page-architecture.md. Escolha um arquétipo de navegação, uma composição de herói e uma sequência de seções que venham do mesmo mundo que a ideia. Nunca reutilize o esqueleto do projeto anterior. Registre a escolha no README do projeto para que a próxima construção possa evitá-la.

Saída: um cartão de arquitetura curto (navegação, herói, lista de seções, rodapé, 404) com os padrões nomeados que você usou.

Etapa 3. Escreva o roteiro visual (beat sheet)

Escreva o roteiro antes de qualquer código. Use o template em beat-sheet.md. Cada batida informa seu intervalo de rolagem, o que o visitante vê, o que se move, o texto, a câmera, o enquadramento no celular, a versão de movimento reduzido e o custo. O exemplo prático mostra o nível de detalhe esperado.

Saída: o roteiro visual preenchido. Toda decisão posterior é verificada contra ele. Se uma seção não servir à frase da Etapa 1, corte-a aqui, onde é barato.

Etapa 4. Faça a caixa cinza da mecânica

Construa o movimento com geometria e texto provisórios. Esta etapa prova o tempo, a câmera e a interação antes que qualquer ativo exista.

1. Escreva o DOM primeiro: títulos reais, blocos de texto reais, botões e formulários reais, uma <section class="shot"> por batida. A página deve ser legível de cima para baixo com scripts desligados.
2. Adicione um canvas fixo atrás do DOM e um loop de renderização. Rolagem, ponteiro, áudio e renderização compartilham esse loop (regra 8).
3. Mapeie a rolagem para um único float t que conta as batidas, e mova a câmera através de uma lista de planos com pausas suaves (smoothstep) (receitas de rolagem e câmera).
4. Use caixas cinzas, esferas e planos para cada objeto. Se a história não funcionar em cinza, a vestimenta não a salvará.
5. Adicione o controle de pausa e o ramo de movimento reduzido agora, não no final (receitas de interação e acesso).

Iniciador de caixa cinza. A página precisa do mapa de importação acima, de um canvas fixo e de uma seção .shot por entrada em SHOTS:

<style>
  #gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
  .shot { min-height: 100svh; display: grid; align-items: center; padding: 16px 6vw; }
  .no-gl #gl { display: none; }
</style>
<canvas id="gl" aria-hidden="true"></canvas>
<main>
  <section class="shot" id="top"><h1>Título da batida 0</h1></section>
  <section class="shot" id="detail"><h2>Batida 1</h2></section>
  <section class="shot" id="side"><h2>Batida 2</h2></section>
</main>
<script type="module" src="main.js"></script>

main.js:

import * as THREE from "three";

const canvas = document.getElementById("gl");
let renderer = null;
try { renderer = new THREE.WebGLRenderer({ canvas, antialias: true, powerPreference: "high-performance" }); }
catch { document.body.classList.add("no-gl"); } // a página DOM se sustenta sozinha

if (renderer) {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x111114);
  scene.add(new THREE.HemisphereLight(0xffffff, 0x222233, 1.4));
  const camera = new THREE.PerspectiveCamera(35, 1, 0.1, 100);
  // representante cinza para o objeto herói até o roteiro visual ser aprovado
  scene.add(new THREE.Mesh(new THREE.BoxGeometry(2, 1, 1.2), new THREE.MeshStandardMaterial({ color: 0x8a8a8a, roughness: 0.6 })));

  const V = (x, y, z) => new THREE.Vector3(x, y, z);
  const SHOTS = [
    { pos: V(4, 3, 8), at: V(-1.5, 0, 0) },  // herói: objeto à direita do título
    { pos: V(0, 9, 0.1), at: V(0, 0, 0) },   // detalhe de cima
    { pos: V(-6, 1.2, 3), at: V(1.5, 0, 0) }, // lado baixo, texto à direita
  ];
  const sections = [...document.querySelectorAll(".shot")];
  let centers = [];
  const measure = () => { centers = sections.map((s) => s.offsetTop + s.offsetHeight / 2); };
  const smooth = (a, b, x) => { const k = Math.min(1, Math.max(0, (x - a) / (b - a))); return k * k * (3 - 2 * k); };
  function scrollT() {
    const c = scrollY + innerHeight / 2;
    if (!centers.length || c <= centers[0]) return 0;
    for (let i = 0; i < centers.length - 1; i++) if (c < centers[i + 1]) return i + (c - centers[i]) / (centers[i + 1] - centers[i]);
    return centers.length - 1;
  }
  function resize() {
    renderer.setPixelRatio(Math.min(devicePixelRatio, innerWidth < 760 ? 1.5 : 1.75));
    renderer.setSize(innerWidth, innerHeight, false);
    camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();
    measure();
  }
  addEventListener("resize", resize);
  document.fonts?.ready.then(measure);
  resize();

  const pos = new THREE.Vector3(), at = new THREE.Vector3();
  let raf = 0;
  function frame() {
    raf = requestAnimationFrame(frame);
    const t = scrollT(), i0 = Math.floor(t), i1 = Math.min(SHOTS.length - 1, i0 + 1);
    const f = smooth(0.15, 0.85, t - i0); // pausa em cada plano, transição no meio
    pos.lerpVectors(SHOTS[i0].pos, SHOTS[i1].pos, f);
    at.lerpVectors(SHOTS[i0].at, SHOTS[i1].at, f);
    camera.position.copy(pos);
    camera.lookAt(at);
    renderer.render(scene, camera);
  }
  raf = requestAnimationFrame(frame);
  document.addEventListener("visibilitychange", () => {
    cancelAnimationFrame(raf); // nunca execute dois loops
    if (!document.hidden) raf = requestAnimationFrame(frame);
  });
}

Critérios de saída para a Etapa 4: role para frente e para trás por cada batida e a câmera aterrisa da mesma forma em ambas as direções; cada plano deixa espaço para seu texto; o enquadramento no celular funciona em 390 x 844; o controle de pausa interrompe todo movimento contínuo; a página é legível com WebGL desabilitado.

Etapa 5. Vista-a

Agora substitua o cinza pelo mundo. Puxe receitas do índice de técnicas. Vista nesta ordem, verificando o roteiro visual após cada camada:

1. Forma: o objeto herói, construído a partir de primitivas, um glTF, um filme ou uma foto de profundidade.
2. Luz: luz principal, de contorno e um destaque motivado. Sombras de contato sob qualquer coisa que esteja sobre uma superfície.
3. Material e textura: rótulos e painéis desenhados em canvas antes de texturas fotográficas. Eles são nítidos, pequenos e editáveis.
4. Tipografia: no máximo duas famílias tipográficas. Movimento do título ligado ao ritmo da página, nunca um fade genérico.
5. Som: opcional, por adesão, sintetizado com Web Audio para não custar bytes.
6. Pequenas recompensas: um gesto oculto, um estado ocioso, um 404 na linguagem da marca.

Gaste tempo de quadro em interação, não em física que ninguém percebe. Finja o que é caro (regra 17).

Etapa 6. Olhe e corrija

Você não terminou até ter olhado. Passe a página para a skill motion-review (../motion-review/SKILL.md) para a rubrica, a lista de verificação de QA e capturas de tela das seções nos tamanhos desktop e celular, e para a skill motion-analytics (../motion-analytics/SKILL.md) para avaliação de tempo de quadro, peso e comparação com referências. Em seguida, corrija o pior achado primeiro e olhe novamente. Duas rodadas completas de olhar e corrigir é o mínimo para qualquer coisa que você chame de finalizada.

Auto-verificações rápidas antes de uma revisão formal:

• Role para baixo e depois todo o caminho de volta para cima. Cada revelação deve reverter de forma limpa.
• Pressione o controle de pausa no meio do movimento. Tudo que é contínuo deve parar, e a página ainda deve parecer composta.
• Ative o movimento reduzido no sistema operacional. A página deve contar a mesma história com imagens estáticas.
• Abra o console. Zero erros, zero avisos que você causou.
• Largura do celular 390 px: nenhum texto abaixo de 11 px, nenhum alvo de toque abaixo de 44 px, nenhuma rolagem horizontal.

Etapa 7. Entregue

Entregue a pasta da página (index.html, style.css, main.js mais módulos, assets/), um README com a frase da ideia única, o cartão de arquitetura, o roteiro visual, a lista de ativos com licenças e os valores de ajuste que valem a pena mudar. Mantenha a página inteira abaixo de 10 MB.

Inegociáveis

• HTML real por baixo. Conteúdo, navegação e formulários vivem no DOM. WebGL é um aprimoramento com um fallback no-gl.
• Um único relógio. Nunca coloque valores por quadro no estado do framework. Use variáveis simples, uniforms e propriedades personalizadas CSS.
• Um controle de pausa visível para qualquer movimento que dure mais de 5 segundos, além de um ramo completo de prefers-reduced-motion.
• A rolagem nunca é sequestrada. A barra de rolagem nativa funciona, a rolagem por teclado funciona e links de âncora saltam.
• Marcas fictícias e pessoas inventadas em demonstrações. Nunca copie código, copie texto, ativos ou um conceito de herói de um site de referência. Estude a ideia, escreva a sua própria.
• Cada número na página (preços, horários, estatísticas) é plausível, consistente e no local do cliente.

Mapa de referência

Arquivo	Use quando
references/craft-rules.md	Tomar qualquer decisão de gosto. 30 regras numeradas com valores concretos.
references/beat-sheet.md	Planejar a história. Template mais um exemplo prático.
references/page-architecture.md	Escolher navegação, herói e seções sem mesmice de template.
references/techniques/INDEX.md	Procurar uma receita por necessidade, custo ou uau.
techniques/scroll-and-camera.md	Mapeamento de rolagem, planos de câmera, enquadramento no celular, valores de modo.
techniques/scene-craft.md	Vestimenta three.js: chamadas, morphs, cidades, céus, rótulos, sombras.
techniques/film-and-photo.md	Heróis de vídeo, loops, texto sincronizado com filme, hotspots rastreados, fotos de profundidade.
techniques/sound-and-rhythm.md	Vozes Web Audio, agendamento, visuais sincronizados com batida.
techniques/interaction-and-access.md	Controle de pausa, âncoras, portas de espera, visualizações de arrastar, níveis de qualidade.

---

Parte de RegesCore AI MotionCraft Skills por LIKE A KING INC. Modelos de movimento gratuitos e o catálogo completo estão em animatedwebs.com.