site-motion

O que site-motion faz?

Cenas marcadas como Pro, ou nomeadas nestas notas mas ausentes de scenes/, são cenas Pro do site-motion. Aprenda com o que as notas dizem sobre elas; construa a partir das cenas que estão aqui (site-motion list).

Uma cena é uma função pura do tempo. render(t) desenha o mesmo quadro para o mesmo t, independentemente do que veio antes. Essa única regra é o motivo pelo qual o mesmo arquivo pode ser executado ao vivo em um site e renderizar quadros exatos para vídeo: o exportador apenas avança para cada quadro no tempo e tira uma captura de tela.

Raiz do repositório: a pasta que contém este arquivo (instale-o com git clone https://github.com/Shivraj97/site-motion ~/.claude/skills/site-motion, ou vincule um clone lá). Node 22+, Chrome, ffmpeg. Sem instalações npm. A partir de qualquer projeto, execute a CLI pelo seu caminho completo; as builds e renderizações vão para a pasta out/ desse projeto, e --tokens / --content usam caminhos relativos a ele:

SM=~/.claude/skills/site-motion/bin/site-motion.mjs
node $SM init card-story --tokens ledger          # escreve ./brand.json (a partir do preset) e ./card-story.json para editar
node $SM make card-story --tokens ./brand.json --content ./card-story.json --out public/motion/story.html

Para colocar uma cena no código-fonte do próprio projeto para que a equipe possa editá-la, use add em vez de make. Ele copia scene.js, scene.css, content.json e tokens.json para public/motion/<scene>/ (ou motion/<scene>/ quando não há public/), o player e as bibliotecas de fornecedores para runtime/, e escreve <scene>.html, um arquivo incorporável único. A pasta copiada é uma cena válida para build, render e make:

node $SM add ledger-stamp --tokens ./brand.json --content ./ledger.json          # → public/motion/ledger-stamp/ + ledger-stamp.html
node $SM make public/motion/ledger-stamp --tokens public/motion/ledger-stamp/tokens.json --formats png,sheet

Dentro do próprio repositório, a forma abreviada funciona:

node bin/site-motion.mjs list                                   # cenas e presets de tokens
node bin/site-motion.mjs make iso-blocks --tokens mint          # construir + renderizar mp4, webp, poster
node bin/site-motion.mjs make card-story --tokens ./brand.json --content ./my-story.json --formats mp4,webm,webp,gif,png,sheet
node bin/site-motion.mjs build window-stack --tokens night --out public/hero.html   # apenas incorporação ao vivo
node bin/site-motion.mjs render out/hero.html --formats mp4 --scale 2 --range loop        # exportar uma build existente

Os resultados vão para out/<content>-<tokens>/. --range loop exporta apenas o loop contínuo (o padrão para GIF e WebP); full é a introdução mais um loop (o padrão para MP4 e WebM). sheet escreve uma folha de contato 4×3: sempre faça uma e leia-a.

Fluxo de trabalho

Um site inteiro (várias seções ou páginas) começa com um plano, não com uma cena. Execute node $SM plan no projeto:

• com --brief brief.md quando você conhece as seções. Esta é a melhor entrada. Escreva o resumo a partir do texto real do site:

  # Acme: o que o produto faz, em uma linha
  ## home
  - hero: a manchete do herói
  - feature: o título de cada seção de recurso e uma linha abaixo dele
  ## pricing
  - hero: …
  

• ou com --url https://site-deles.com[,https://site-deles.com/precos] para ler os títulos das próprias páginas ao vivo;
• ou com --pages home,recursos,precos --about "…" quando não há mais nada (escolhas genéricas; diga isso).

Ele mapeia cada seção para uma cena, cada uma usada uma vez, todas com a mesma aparência. A aparência é a do herói da home, bloqueada em site-motion.json. Ele gera site-motion-plan.png: cada seção como o quadro de sua cena na marca e na aparência, com o veredito da pontuação no topo. Mostre ao usuário a folha e obtenha aprovação antes de plan apply.

• Uma escolha marcada com ? não teve uma correspondência forte. Leia sua nota ("ledger-stamp se encaixa melhor, mas está em home.hero") e troque (plan swap <slot> <scene>), reutilize a cena melhor ou diga ao usuário que a biblioteca não tem uma cena para aquela história ainda.
• Nunca aplique sobre uma escolha fraca sem avisar.

plan apply adiciona cada cena e imprime a incorporação de cada seção. Em seguida, escreva o texto de cada cena em seu content.json, execute sync e termine com score --project.

Para uma cena, siga os passos abaixo.

1. Obtenha o sistema de design primeiro. Os tokens são a única fonte de cor e tipo. Encontre-os nesta ordem: o arquivo de tokens/tema do projeto (variáveis CSS, configuração do Tailwind, tokens.json), depois o site ao vivo (meça estilos computados), depois pergunte. Escreva-os como tokens/<brand>.json (formato abaixo). Nunca invente uma cor depois que a paleta existir; derive tons com h.mix(a, b, p) a partir dos tokens.
2. Escolha o arquétipo que conta a história do produto, ou escreva uma nova cena:

   Cena	História que conta	Renderizador
   iso-blocks	infraestrutura, plataformas, "muitas partes funcionando": blocos com dados ao vivo em suas faces sobre um piso de azulejos	SVG
   card-story	um fluxo de trabalho que remove trabalho: uma lista de recursos orienta um cartão de produto através de estados	DOM
   window-stack	"funciona onde você trabalha": janelas de aplicativo sobre um fundo Canvas pintado, um agente executando etapas	Canvas + DOM
   live-room Pro	multijogador: cursores nomeados sobre uma janela de aplicativo, uma proposta, uma votação que é aprovada, uma mudança sendo enviada, um ticker de atividade	Canvas + DOM
   leaderboard	crédito e posição: contribuições caem em linhas, pontos são contados, linhas reordenam	DOM
   bloom-flow	automação: um evento percorre um gráfico de fluxo de trabalho e cada etapa floresce em flores generativas	Canvas + SVG
   signal-field	bagunçado → estruturado: fios ruidosos passam por um portão e saem como pistas limpas	p5.js
   drop-pile	muitos → um: itens de trabalho caem em uma única bandeja com física real, um contador os totaliza	Matter.js (pré-renderizado)
   galton-router	roteamento, aprovações, A/B: pagamentos caem através de um quadro de pinos; uma regra aciona um interruptor e o fluxo se move para as melhores caixas	SVG (passeio aleatório com semente)
   receipt-printer	bagunçado → estruturado: documentos alimentam uma fenda, um recibo imprime cada campo extraído com sua confiança	DOM + SVG
   score-sheet	orquestração, multiagente: uma execução escrita como uma partitura musical, pautas vibram enquanto cada agente trabalha	SVG
   css3d-stack	arquitetura, camadas: caixas HTML reais em CSS 3D se levantam enquanto uma solicitação cai através delas	CSS 3D
   loom	muitos → um, integrações: cada ferramenta é uma faixa de fios de urdidura tecidos em um único tecido diagonal que rola para o eixo do produto	Canvas 2D
   domino-run	automação, gatilhos: uma bola derruba uma corrente de dominós agrupados em etapas, cada etapa acende quando a onda a atinge	Matter.js (pré-renderizado)
   weather-board	confiabilidade, failover: uma tempestade (nuvens shader, chuva, relâmpagos) se forma sobre uma região de um mapa de status, o tráfego é redirecionado, ela limpa com 0 solicitações com falha	Shader WebGL + DOM
   ledger-stamp	aprovações, conformidade, confiança: pagamentos andam em uma esteira indexada passando por um scanner de política, uma prensa de carimbo APROVADO e uma prensa de assinar e selar em uma trilha de auditoria; um acima do limite é carimbado como RETIDO e espera por um segundo aprovador	SVG + DOM
   grain-tally	métricas, escala: milhares de grãos (cada um um lote fixo de eventos reais) respiram como um anel de poeira, despejam nos dígitos do total, então se ordenam em uma barra por fonte com sua contagem exata; o número é construído a partir de seus dados, não contado	Canvas 2D (partículas, t puro)
   lens-of-order	bagunçado → estruturado, classificação, IA que vê: um campo de 1 bit com pontilhado de blobs à deriva (ainda não compreendidos); uma lente de aumento preenche cada blob em sua cor de classe, o contorna e o rotula com uma confiança, deixando um rastro de cor desbotada	Canvas 2D (campo por célula, pontilhado Bayer)
   water-slide-funnel	funil de conversão: pilotos deslizam uma rampa por estágio; a piscina de cada beira pega as desistências daquele estágio	SVG
   gold-pan Pro	pesquisa enquanto digita: cada tecla gira a bateia até que três pepitas com preço permaneçam	Canvas 2D
   museum-heatmap Pro	análise de produto: pegadas de visitantes aquecem o chão ao redor dos recursos onde as pessoas param; o ranking vem do calor	Canvas 2D
   cell-division	ramificação de banco de dados: principal se divide em branches, uma é descartada, uma mescla de volta com sua mudança	Canvas 2D (metaballs)
   scratch-off Pro	previsão: a folha de metal raspa para revelar o horário de partida real antes do painel da companhia aérea alcançar	Canvas 2D
   sieve-tray Pro	detecção precoce: marcadores caem através de uma malha fina; os poucos que ficam presos são levantados e sinalizados	Matter.js (pré-renderizado)
   rube-goldberg Pro	antes / depois: uma bolinha de recibo trava em cinco engenhocas antigas, então cai por uma rampa em um segundo	SVG
   language-balloons Pro	localização: bolhas de palavras em oito escritas flutuam e montam a frase de cada localidade, RTL incluído	Matter.js (pré-renderizado)
   balloon-deploy Pro	deploys: cada etapa de build infla o envelope; a 100% o release decola	SVG
   pufferfish Pro	escalonamento automático: um peixe-balão incha para corresponder a cada onda de tráfego enquanto um peixe de capacidade fixa é sacudido	SVG
   gear-tiers Pro	preços: planos desenhados como kit de acampamento, de tenda a acampamento base, com um alternador mensal / anual	SVG
   permission-chessboard Pro	funções e permissões: cada peça de função pousa no tabuleiro e acende apenas os quadrados que pode usar	SVG
   tree-rings	ano em revista: um anel por ano, tão largo quanto o ano foi movimentado, com entalhes para as primeiras vezes	SVG
   parchment-changelog	changelog: um pergaminho desenrola um release de cada vez, cada um tinta quando é lançado	SVG + DOM
   moving-boxes	migração: um carrinho de mão carrega cada caixa da ferramenta antiga para o novo prédio, nada perdido	SVG + DOM
   privacy-pebbles Pro	redação de PII: um rodo transforma cada detalhe pessoal em um seixo idêntico; a frase ainda é legível	SVG + DOM
   ant-trail Pro	categorização automática: formigas carregam o recibo, memorando e aprovação de cada swype para o slot de razão correto	Canvas 2D
   sunrise-payroll Pro	folha de pagamento global: um nascer do sol cruza oito fusos horários e paga cada cidade às suas 9h locais	SVG
   whiteout Pro	calma: um painel movimentado se dissolve em névoa, deixando o único número que importa	Shader WebGL + DOM
   ink-flood Pro	theming, white-label: um chip de tinta inunda todo o produto em um novo esquema de cores	SVG
   integration-deck Pro	integrações: cada ferramenta é uma tecla em um teclado isométrico grande; um fluxo de trabalho toca como um acorde enquanto um log de execução digita cada etapa	Three.js
   margin-rails Pro	proveniência: um memorando se escreve enquanto passagens transportadas de arquivos passados deslizam em trilhos nomeando sua fonte	SVG + DOM
   pigeonhole-wall	memória: documentos arquivam em escaninhos etiquetados, e uma solicitação puxa as três fontes de que precisa	SVG + DOM
   redline-front Pro	revisão de contrato: uma frente de revisão varre o documento e o devolve como um redline finalizado com autoridades verificadas	SVG + DOM
   step-rail	como funciona, integração: um token viaja por etapas numeradas; cada cartão abre no que sua etapa produziu e o último pousa o resultado	SVG + DOM
   pipeline-board	fluxos de trabalho, pipeline: cartões avançam coluna por coluna em um quadro kanban enquanto contagens e totais os seguem	DOM
   account-health	retenção, sucesso do cliente: uma tabela de saúde reproduz o mês; uma conta escorrega para em risco, um playbook dispara e ela se recupera	SVG
   split-wipe	antes / depois, consolidação: um divisor varre o trabalho manual disperso e cada fragmento se encaixa em uma superfície de produto	DOM
   roadmap-rail	roadmap, marcos: um marcador de Hoje caminha pelo eixo do tempo; marcos enviados são preenchidos e o lançamento-chave se abre em um cartão	SVG
   trust-rings	segurança, conformidade: solicitações passam por anéis de controle concêntricos ao redor dos dados; a não autorizada é parada e registrada	SVG
   balance-scale	preços, qualidade vs custo: três balanças de prato, cada inclinação computada a partir das pontuações; a nossa inclina para a qualidade	SVG
   crate-discrepancy	reconciliação: bandejas levantam de uma caixa e conferem o romaneio; a que está faltando flutua com sua nota	SVG + DOM
   press-qa	teste, CI: builds saem de uma prensa; um braço joga aquele com um teste com falha por uma rampa e ele passa na reexecução	SVG
   radar-sweep	observabilidade: cada trabalho em execução é um ponto em um escopo de radar; um cursor alcança e pausa o que está falhando	Canvas 2D + DOM
   agent-checkout	demonstração de UI de produto, pagamentos de agente: uma solicitação de compra, um cartão virtual mascarado é preenchido automaticamente, o medidor de limite se move pelo valor, o recibo se junta à lista	DOM + ui-kit
   click-to-done	demonstração de UI de produto, qualquer recurso de uma ação (convidar, enviar, aprovar, publicar): uma tela real em um quadro de navegador, o cursor digita, seleciona e clica, a câmera se aproxima e se afasta no resultado	DOM + ui-kit
   dashboard-push	demonstração de UI de produto, análise e relatórios: o valor principal é construído a partir do gráfico enquanto ele desenha, o cursor varre uma dica de ferramenta, a câmera foca no momento que importa, um interruptor de intervalo transforma cada série	DOM + SVG + ui-kit
   phone-stack	demonstração de UI de produto, celular e notificações: alertas pousam em uma tela de bloqueio com um anel de sinal cada, um toque abre o mais novo na tela do app, um swipe home limpa	DOM + ui-kit
   shot-demo	demonstração de UI de produto a partir de uma captura de tela: a própria captura de tela do cliente em um quadro; o cursor digita em seus campos reais e clica em seu botão real, os valores mudam na cara da marca, um holofote e um balão de chamada pousam no resultado	DOM + captura de tela + ui-kit
   integration-deck é o padrão 3D: um objeto tátil, uma ação física, bandas planas toon, um contorno a tinta, uma câmera isométrica verdadeira e rótulos no tipo da marca. As outras cenas de objeto Three.js (um hub de órbita, uma parede de classificação, um logotipo extrudado, uma vitrine glTF) ficam fora do conjunto público até serem retrabalhadas; as ferramentas 3D (vendor/three-full.min.js, ve

…

[truncado para tradução]