Frontends com Vibecoding · Capítulo 33 de 33 · 17 min
Animar um grafo de conhecimento amplo em movimento
Terceiro capítulo do bônus: o grafo de conhecimento como mapa de entidades ligadas, o layout de força rodando fora da tela, a renderização em WebGL para milhares de nós e o modo massivo na placa de vídeo, com o grafo real deste curso como primeiro conjunto de dados.
Este capítulo faz parte do curso gratuito Frontends com Vibecoding.
Um grafo de conhecimento amplo se anima com fluidez quando o cálculo das posições roda fora da tela e o desenho fica com a placa de vídeo. Grafo de conhecimento é o mapa de coisas ligadas por relações com nome, como empresa fundada por pessoa. Com a conta no lugar certo, 20 mil entidades se organizam em aglomerados enquanto o quadro segue a 60 por segundo.
A unidade do grafo é a tripla: sujeito, relação e objeto. Brasil GEO, fundada por, Alexandre Caramaschi. Cada sujeito e cada objeto vira um nó, cada relação vira uma aresta com rótulo, e o mesmo nó reaparecendo em muitas triplas é o que transforma uma lista em grafo. O Google deu nome à ideia em 2012, ao lançar o Knowledge Graph com a frase coisas, e não palavras.
Para quem faz GEO, o grafo é o assunto do negócio. Os motores generativos citam entidades que reconhecem, e reconhecem pelo que está ligado a elas em dados estruturados, no schema.org e nas páginas que se referem umas às outras. Este curso tem o próprio grafo: 15 trilhas, 33 capítulos, 146 recursos, 46 categorias, 14 laboratórios e 22 bibliotecas. São 276 nós e 363 arestas gerados a partir do código.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
A figura abaixo mostra a tripla virando desenho. O nó é a coisa, a aresta é a relação com nome, e o React Flow aparece duas vezes porque é ensinado por um capítulo e pertence a uma categoria. Esse reaparecimento é a costura do grafo, e é ele que o layout precisa respeitar quando arruma os pontos na tela.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
O desenho nasce de três forças. Todos os pontos se repelem, os pontos ligados se puxam como por uma mola, e uma gravidade fraca puxa tudo para o centro. Repetida milhares de vezes, essa conta separa o grafo em aglomerados, que são as comunidades, e deixa no meio os poucos pontos que ligam um aglomerado ao outro. O algoritmo padrão é o ForceAtlas2, publicado em 2014 pela equipe do Gephi.
O custo dessa conta é o que trava a tela. Cada rodada compara pontos entre si, e com 20 mil pontos a comparação completa passa de 200 milhões de pares. Duas decisões resolvem: a aproximação de Barnes e Hut, que agrupa pontos distantes num só, e o Web Worker, o fio de execução separado que faz a conta enquanto a tela só desenha. O laboratório abaixo usa as duas, pela biblioteca graphology.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Desenhar é a outra metade. O sigma.js, na versão 3 de março de 2024, desenha o grafo em WebGL, a interface que entrega o desenho à placa de vídeo, e mantém dezenas de milhares de nós e arestas interativos. Acima de 5 mil nós ele esconde as arestas enquanto a câmera se move e mostra rótulo só nos nós maiores, e é isso que segura os 60 quadros por segundo.
Quando o grafo passa de 100 mil pontos, a própria conta das forças vai para a placa de vídeo. O cosmos.gl, motor entregue à OpenJS Foundation em 2025 e reescrito na versão 3 sobre o luma.gl, calcula as forças e desenha em WebGL 2 e chega a um milhão de pontos no navegador. O laboratório traz os dois motores, para a pessoa ver onde um para e o outro continua.
Que motor para que tamanho de grafo
| Motor | Onde roda o layout | Nós confortáveis | Rótulos e interação | Quando entra |
|---|---|---|---|---|
| React Flow 12 | Sem layout automático; posições vêm prontas | Até algumas centenas | Nó é HTML: qualquer texto, botão e estado | Fluxo com estado por nó, como o orquestrador da aula 1 |
| d3-force com Canvas 2D | Na thread principal, ou num worker que você escreve | Até cerca de 3 mil | Rótulo desenhado à mão no canvas | Grafo pequeno com desenho totalmente próprio |
| sigma.js 3 com graphology | ForceAtlas2 em Web Worker, com Barnes e Hut | Até dezenas de milhares | Rótulos nos maiores, destaque de vizinhos, busca e câmera | Grafo de conhecimento com leitura: o padrão desta aula |
| cosmos.gl 3 | Força e desenho na placa de vídeo (WebGL 2) | Centenas de milhares a um milhão | Ponto e ligação; rótulo por camada separada | Mostrar a escala: o modo massivo do laboratório |
| Cytoscape.js e vis-network | Vários layouts na thread principal | Até alguns milhares | Completos, com estilos por seletor | Ferramenta interna de análise, sem a exigência de fluidez |
Suba de motor só quando o de baixo travar a sua tela com o seu grafo; o medidor do laboratório é a prova.
O laboratório abaixo começa pelo grafo real do curso, com rótulos. Rode o layout e veja os aglomerados se formarem: as trilhas puxam os capítulos, os capítulos puxam os recursos e as categorias ficam no meio, ligando tudo.
O interruptor troca para o sintético de até 20 mil nós, e o segundo painel carrega o modo massivo na placa de vídeo, com até 200 mil pontos. O medidor mostra quadros por segundo e iterações do layout enquanto tudo acontece.
Ver o grafo real do curso e um grafo de milhares de nós se organizarem em aglomerados
Rode o layout no grafo real, passe o mouse pelos nós e busque uma entidade; troque para 20 mil nós e leia o medidor; depois carregue o modo massivo na placa de vídeo.
Demonstração em dois painéis. No primeiro, o sigma.js desenha em WebGL o grafo real deste curso, com 276 nós e 363 arestas rotulados, ou um grafo sintético de 1.000 a 20.000 nós; o ForceAtlas2 roda num Web Worker e a pessoa vê os aglomerados se formarem, com destaque de vizinhos ao passar o mouse, busca por entidade, ficha do nó com link e medidor de quadros por segundo e de iterações do layout. No segundo, o cosmos.gl calcula as forças e desenha na placa de vídeo um grafo de 50 mil a 200 mil pontos, com tempo até estabilizar. Sem WebGL 2, fica o primeiro painel. Com movimento reduzido ativo, o layout só roda por botão e a câmera não anima.
A demonstração interativa carrega quando este trecho entra na tela.
Quatro cuidados fazem a cena ensinar em vez de hipnotizar. O layout converge e para: grafo que se mexe para sempre é enfeite, e a pessoa não consegue ler.
A cor por tipo de nó tem legenda em texto ao lado do palco. O rótulo aparece só onde cabe, e a busca leva ao resto. E o número de nós aparece com a fonte: o grafo real diz de onde veio, e o sintético se declara cenário ilustrativo.
O trecho abaixo é o centro do laboratório. Ele mostra o grafo em graphology, o layout no worker com as configurações inferidas do tamanho, o sigma com o destaque de vizinhos e o cosmos recebendo posições e ligações em arrays tipados. O componente inteiro está no download.
import Graph from "graphology";
import forceAtlas2 from "graphology-layout-forceatlas2";
import FA2Layout from "graphology-layout-forceatlas2/worker";
import Sigma from "sigma";
// 1. O grafo: nós com rótulo, tipo, cor por token e tamanho por grau; posições iniciais em círculo.
const grafo = new Graph();
for (const n of dados.nodes) grafo.addNode(n.id, { label: n.label, tipo: n.type, size: 3, color: corDoTipo(n.type), x: 0, y: 0 });
for (const e of dados.edges) grafo.addEdge(e.source, e.target, { tipo: e.type });
grafo.forEachNode((id, a) => grafo.mergeNodeAttributes(id, { size: 3 + Math.sqrt(grafo.degree(id)), ...posicaoEmCirculo(a) }));
// 2. O layout fora da tela: ForceAtlas2 num Web Worker, com Barnes e Hut acima de 2.000 nós.
const layout = new FA2Layout(grafo, { settings: { ...forceAtlas2.inferSettings(grafo), barnesHutOptimize: grafo.order > 2000 } });
layout.start(); // a tela só desenha; layout.stop() quando os aglomerados assentarem
// 3. O desenho em WebGL, com destaque de vizinhos e rótulos só nos maiores.
const sigma = new Sigma(grafo, palco, { renderLabels: true, labelRenderedSizeThreshold: 8, hideEdgesOnMove: grafo.order > 5000 });
let focado: string | null = null;
sigma.on("enterNode", ({ node }) => { focado = node; sigma.refresh(); });
sigma.setSetting("nodeReducer", (id, a) => (focado && id !== focado && !grafo.areNeighbors(id, focado) ? { ...a, color: cinza, label: "" } : a));
sigma.setSetting("edgeReducer", (id, a) => (focado && !grafo.hasExtremity(id, focado) ? { ...a, hidden: true } : a));
// 4. O modo massivo: cosmos.gl calcula e desenha na GPU a partir de arrays tipados.
const { Graph: Cosmos } = await import("@cosmos.gl/graph");
const cosmos = new Cosmos(canvasGpu, { simulationGravity: 0.25, simulationRepulsion: 1, simulationLinkSpring: 1, onSimulationEnd: marcarTempo });
cosmos.setPointPositions(posicoes); cosmos.setLinks(ligacoes); cosmos.render(); cosmos.start();Antes de aprovar uma cena de grafo, peça o print do medidor com o seu grafo, e não com o de exemplo. Se o quadro cair abaixo de 30 por segundo enquanto o layout roda, a conta está na thread errada ou o motor é pequeno demais para o tamanho.
Se o grafo nunca para, falta o critério de convergência. E se a pessoa não encontra a própria empresa em cinco segundos, falta a busca, que vale mais que qualquer efeito.
Guia prático: o acervo de prompts e componentes como grafo navegável
Uma biblioteca grande só serve se a pessoa, ou o agente, acha o vizinho do que já funcionou. As duas bibliotecas estudadas em 07/10/2026 mostram como modelar isso. A de prompts tem 648 itens e 73 categorias em três eixos: 19 de caso de uso, 27 de estilo e 27 de assunto, separadas entre imagem e vídeo. O modelo de IA de cada item, entre 10, funciona como um quarto eixo. Cada prompt leva de 4 a 7 categorias na maior parte dos casos (mediana de 5), e 622 dos 648 (96%) tocam os três eixos ao mesmo tempo. Há ainda coleções, listas montadas à mão: duas, uma delas com 9 itens.
O acervo de cinema mostra o grafo mais rico. São 424 técnicas em 13 categorias, e cada técnica tem dois tipos de ligação. O "também chamado" aparece em 178 técnicas, com 396 nomes diferentes, e liga o vocabulário que a pessoa usa ao nome que o acervo usa. Os filmes de referência são 575, citados 1.163 vezes; 189 aparecem em duas ou mais técnicas. Ligando técnicas que dividem um filme, 365 das 424 ficam conectadas, com 2.109 ligações, e 81% delas atravessam categorias: o mesmo filme une uma luz, uma lente e um movimento de câmera.
O que isso dá ao agente é a busca por vizinhança. Em vez de procurar uma palavra, ele parte de um nó aprovado e pergunta quem está ligado: a mesma categoria em outro eixo, o mesmo filme, o sinônimo. Bibliotecas de grafo fazem isso numa chamada, como a lista de vizinhos de um nó na graphology, a mesma base do sigma.js deste capítulo.
{
"nos": [
{ "id": "prompt:topo-cafe-01", "tipo": "prompt", "aprovado": true },
{ "id": "eixo:caso-de-uso/topo-de-pagina", "tipo": "categoria" },
{ "id": "eixo:estilo/fotografia-de-pelicula", "tipo": "categoria" },
{ "id": "eixo:assunto/alimentos", "tipo": "categoria" },
{ "id": "modelo:[NOME DO MODELO]", "tipo": "modelo" },
{ "id": "tecnica:luz-de-janela", "tipo": "tecnica", "tambemChamado": ["luz lateral natural"] },
{ "id": "colecao:campanha-[NOME]", "tipo": "colecao" }
],
"arestas": [
["prompt:topo-cafe-01", "serve-a", "eixo:caso-de-uso/topo-de-pagina"],
["prompt:topo-cafe-01", "tem-estilo", "eixo:estilo/fotografia-de-pelicula"],
["prompt:topo-cafe-01", "mostra", "eixo:assunto/alimentos"],
["prompt:topo-cafe-01", "gerado-em", "modelo:[NOME DO MODELO]"],
["prompt:topo-cafe-01", "usa-tecnica", "tecnica:luz-de-janela"],
["prompt:topo-cafe-01", "faz-parte-de", "colecao:campanha-[NOME]"]
]
}Modelar o seu acervo como grafo que o agente percorre
Cinco passos para transformar uma pasta de prompts, componentes ou peças aprovadas num mapa navegável.
Passo 1: Escolha os eixos antes das etiquetas
Defina de três a quatro eixos independentes, como caso de uso, estilo, assunto e ferramenta, e uma lista curta de valores em cada um. Etiqueta solta, sem eixo, vira sinônimo duplicado.
Deu certo quando: Todo valor de etiqueta pertence a exatamente um eixo.
Erro comum: Criar "hero", "topo" e "banner principal" como etiquetas diferentes para a mesma coisa.
Passo 2: Classifique cada item nos eixos todos
Cada prompt ou componente recebe pelo menos um valor por eixo. É o cruzamento que permite pedir "o mesmo estilo, outro caso de uso".
Deu certo quando: Quase todos os itens tocam todos os eixos, como os 96% medidos na biblioteca estudada.
Erro comum: Etiquetar só o assunto e não conseguir achar outro item no mesmo estilo.
Passo 3: Guarde os sinônimos como ligação
Para cada nó, anote como as pessoas também chamam aquilo. O agente traduz o pedido do cliente para o nome do acervo antes de buscar.
Deu certo quando: Uma busca pelo nome popular chega ao nó certo.
Erro comum: Obrigar todo mundo a saber o termo técnico para achar o item.
Passo 4: Ligue por referência e por coleção
Referência em comum, como um filme, uma marca de inspiração ou uma campanha, liga itens de categorias diferentes. Coleções montadas à mão guardam o que já funcionou junto.
Deu certo quando: Um item aprovado leva a vizinhos de outras categorias que fazem sentido juntos.
Erro comum: Manter só a árvore de pastas, onde cada item mora num lugar e não conversa com os outros.
Passo 5: Ensine o agente a buscar por vizinhança
Grave o grafo em JSON, como no bloco acima, e peça ao agente que parta do item aprovado, liste os vizinhos por tipo de ligação e proponha três candidatos com o motivo de cada um.
Deu certo quando: O agente devolve candidatos com a ligação que os une ao item aprovado.
Erro comum: Pedir "algo parecido" e receber o resultado mais popular da biblioteca, sem relação com o que você aprovou.
No fim você tem: Um acervo com eixos claros, sinônimos e referências ligados, que o agente percorre a partir do que você já aprovou.
Guia prático: sigma 4, cosmos.gl 3.5 e o layout calculado antes da página abrir
O sigma.js chegou à versão 4 em 08/10/2026, com rótulos desenhados pela placa de vídeo e quebras de API, e o cosmos.gl separou a simulação do desenho. O guia mostra o que cada novidade resolve e como o explorador /educacao/grafo deste portal mostra 2.513 nós sem rodar layout no navegador: as posições saem prontas do build. No fim, o pedido para montar o mapa de entidades de uma marca do mesmo jeito.
Funções, casos de uso e aplicações
Funções
Novidades dos motores de grafo e o layout no build
| Função ou recurso | O que faz | Quando usar | Desde |
|---|---|---|---|
| sigma 4: rótulos em WebGL | Rótulos de nó e aresta passam para a placa de vídeo com campos de distância assinada, técnica que mantém a letra nítida em qualquer zoom; as camadas WebGL viram uma só e o WebGL 1 sai | Grafo com muitos rótulos que hoje pesa no desenho em canvas | 08/10/2026 |
| sigma 4: estados, arrasto e arestas paralelas | Estado de nó e de aresta, arrasto de nó, arestas paralelas e laços tratados sem código extra, eventos de rótulo e rotação da câmera com o botão direito | Explorador em que a pessoa reorganiza e investiga o mapa | 08/10/2026 |
| sigma 4: quebras de API | hidden e forceLabel viram visibility e labelVisibility; itemSizesReference passa a positions por padrão, então os tamanhos mudam de escala | Antes de subir de versão: revisar redutores e tamanhos | 08/10/2026 |
| cosmos.gl 3.4: desenho sob demanda | Para de desenhar quando o grafo fica parado, esconde pontos encobertos (occlusion culling) e refaz a força de repulsão para aglomerados mais legíveis | Cena massiva que não pode esquentar o aparelho depois de assentar | 27/07/2026 |
| cosmos.gl 3.5.1: simulação separada e camada deck.gl | GraphSimulation fica numa classe própria, há um Graph sem renderizador e o pacote @cosmos.gl/deck-layers põe o grafo dentro do deck.gl com as posições sempre na placa de vídeo; luma.gl vira dependência a instalar à parte (~9.3.0) | Mapa que já usa deck.gl ou que precisa só das posições calculadas | 08/10/2026 |
| ForceAtlas2 no build (forceAtlas2.assign do graphology) | Calcula as posições uma vez, no script de build, com semente fixa; a página recebe x e y prontos | Grafo que só muda quando o conteúdo é publicado | graphology-layout-forceatlas2 0.10.1 (17/10/2022) |
A versão 3.5.0 do cosmos.gl foi marcada como descontinuada; a recomendada é a 3.5.1.
Fonte: sigma.js, notas da versão 4.0.0; cosmos.gl, releases 3.4.0 e 3.5.1; registro npm; lidos em 12/10/2026
Casos de uso
Consultor de GEO de uma consultoria de marketing em São Paulo
Marketing digital, mapa de entidades da marca do cliente
Dor
O mapa de pessoas, produtos e páginas do cliente rodava o layout no navegador e levava segundos tremendo antes de assentar na reunião, no notebook do cliente.
Solução
O layout passou para o script de build, com detecção de comunidades e ForceAtlas2 de semente fixa. A página recebe o grafo e um arquivo separado de posições, e o sigma só desenha, com busca e destaque de vizinhos.
Resultado
O que observar: na próxima apresentação, o mapa aparece já arrumado no primeiro quadro, e o cliente encontra a própria marca pela busca em menos de cinco segundos.
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
Coordenadora de design instrucional de uma faculdade a distância em Porto Alegre
Educação, mapa de disciplinas e pré-requisitos
Dor
Os alunos não viam quais disciplinas abrem caminho para as seguintes, e o mapa estático em imagem não deixava investigar caminhos.
Solução
Ela pediu um explorador em sigma 4 com arrasto de nó e arestas paralelas para os dois tipos de ligação (pré-requisito e tema em comum), com o layout calculado no build e a lista das disciplinas no HTML do servidor.
Resultado
O que observar: no semestre, quantos alunos abrem o caminho entre duas disciplinas e se as dúvidas de matrícula sobre pré-requisito caem.
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
Na prática
O portal tem dois grafos. O do curso, em src/data/frontends-knowledge-graph.generated.json, tem 276 nós e 363 arestas e alimenta o laboratório desta aula, que roda o ForceAtlas2 num Web Worker para a pessoa ver os aglomerados se formarem. O do explorador /educacao/grafo é outra escala: 2.513 nós, 19.881 arestas e 26 comunidades, e ali o layout não roda no navegador.
O script scripts/build-educacao-grafo.mts detecta as comunidades com Louvain (algoritmo que agrupa nós mais ligados entre si do que com o resto), calcula o PageRank, posiciona cada nó perto da própria comunidade com semente fixa e roda 250 iterações do ForceAtlas2. As posições vão para src/data/educacao-grafo-layout.json, com 29,6 kB, separado do grafo de 1,24 MB e amarrado a ele pelo mesmo hash de conteúdo. O componente ExploradorDoGrafo.tsx diz no cabeçalho: nenhum layout roda aqui.
const comunidades = louvain(g, { getEdgeWeight: "peso", resolution: 2.4, rng: mulberry32(42) }) as Record<string, number>;
const pr = pagerank(g);
const rnd = mulberry32(7);
g.forEachNode((id) => {
const ang = rnd() * Math.PI * 2;
const raio = 50 + ((comunidades[id] ?? 0) % 12) * 8 + rnd() * 20;
g.setNodeAttribute(id, "x", Math.cos(ang) * raio);
g.setNodeAttribute(id, "y", Math.sin(ang) * raio);
});
forceAtlas2.assign(g, {
iterations: 250,
getEdgeWeight: "peso",
settings: { ...forceAtlas2.inferSettings(g), barnesHutOptimize: true, gravity: 1.2, scalingRatio: 8, adjustSizes: false, strongGravityMode: true },
});Layout no build e motor do tamanho certo
Quatro passos para o mapa abrir arrumado e continuar leve quando crescer.
Passo 1: Decida onde o layout roda
Grafo que muda a cada publicação calcula as posições no build. Grafo que a pessoa monta na hora, como o do laboratório, roda o ForceAtlas2 num Web Worker.
Deu certo quando: Você sabe dizer se o mapa muda por publicação ou por clique.
Erro comum: Rodar o layout no navegador para um grafo que só muda uma vez por semana.
Passo 2: Semente fixa e posições num arquivo à parte
Semente fixa faz o mapa sair igual a cada build. Posições num arquivo à parte deixam busca, MCP e páginas carregarem o grafo sem o peso do desenho.
Deu certo quando: Dois builds seguidos sem mudança de conteúdo geram o mesmo arquivo de posições.
Erro comum: Layout aleatório que embaralha o mapa a cada publicação e confunde quem já conhecia.
Passo 3: Fixe a versão do sigma antes de subir
O sigma 4 troca hidden e forceLabel por visibility e labelVisibility e muda a referência de tamanho. Com ^3.0.3 no package.json o projeto continua na 3; a troca é decisão separada, com teste.
Deu certo quando: A migração entra num pedido próprio, com print antes e depois.
Erro comum: Subir de versão junto com outra mudança e não saber o que mudou o tamanho dos nós.
Passo 4: Só quando o medidor pedir, suba de motor
Acima de dezenas de milhares de pontos, o cosmos.gl calcula e desenha na placa de vídeo; a 3.4 em diante para de desenhar quando o grafo assenta.
Deu certo quando: O medidor mostra o quadro acima de 30 por segundo com o grafo real do projeto.
Erro comum: Trocar de motor pela fama e perder rótulos e busca que o sigma já entregava.
No fim você tem: Um mapa que abre arrumado no primeiro quadro, sai igual a cada build e tem caminho claro para crescer.
Armadilhas
Grafo amplo: o que pesa e o que resolve
Evitar
evitar
- Layout rodando no navegador para um grafo que só muda na publicação
- Posições guardadas no mesmo arquivo que busca e MCP carregam
- Semente aleatória que muda o mapa a cada build
- Subir para o sigma 4 sem revisar hidden, forceLabel e tamanhos
- Instalar o cosmos.gl 3.5.0, já descontinuado
Recomendado
fazer
- ForceAtlas2 no build e só desenho na página
- Arquivo de posições à parte, amarrado ao grafo pelo hash do conteúdo
- Semente fixa e o mesmo resultado em dois builds seguidos
- Migração num pedido próprio, com print antes e depois
- cosmos.gl 3.5.1 com luma.gl ~9.3.0 instalado à parte
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- CursoClaude Code CLI: Programação com IA
- Função, Worker ou contêiner: o que estamos alugandosugerido pelo grafoApresenta o conceito “Worker”, usado em “Animar um grafo de conhecimento amplo em movimento”.
- As linhas que ninguém orça: build, medição e logsugerido pelo grafoApresenta o conceito “Build”, usado em “Animar um grafo de conhecimento amplo em movimento”.
- Montar vídeo em React com Remotion e renderizar na sua máquina ou na AWSsugerido pelo grafoApresenta o conceito “React”, usado em “Animar um grafo de conhecimento amplo em movimento”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- Vídeo com IA: Claude Code, Codex e ElevenLabsMontar vídeo em HTML com HyperFrames e escolher entre ele e o RemotionExaminar conexões de Montar vídeo em HTML com HyperFrames e escolher entre ele e o Remotion
- Bastidores: Como Este Portal Foi ConstruídoO motor de cursos: conteúdo como códigoExaminar conexões de O motor de cursos: conteúdo como código
- SEO ProgramáticoTestar o template no pior caso e achar o tetoExaminar conexões de Testar o template no pior caso e achar o teto
- Agentes de IA Autônomos: Do Conceito à ProduçãoLangGraph fundamentosExaminar conexões de LangGraph fundamentos
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.
Laboratórios ao vivo deste curso
Cada laboratório monta a biblioteca real dentro da aula, com controles para você mexer e o código do exemplo para copiar. O texto de reserva descreve a demonstração para quem lê sem JavaScript. O link abre o capítulo já no ponto do laboratório.
Base UI
Prenda o foco num diálogo sem escrever o comportamento
Abra a janela Agendar visita, percorra os campos com Tab, feche com Esc e acompanhe no painel onde o foco está e para onde ele volta.
Pacote
Abrir no capítuloConstruir componentes, usar o registro e publicar o catálogo@base-ui/reactLucide e Iconify
Mantenha uma família de ícones coerente e nomeie cada botão
Mude tamanho, traço e cor da barra, veja o símbolo do Iconify acompanhar o Lucide e rode a auditoria de nomes acessíveis.
Pacote
Abrir no capítuloProjetar uma linguagem de ícones e ilustraçãolucide-react, @iconify/reactMotion
Testar os três sinais que autorizam o terceiro degrau
Reproduza a entrada em sequência, aperte o botão com mola e arraste o cartão; ajuste rigidez e amortecimento e veja o que muda.
Pacote
Abrir no capítuloProjetar movimento, assinatura e narrativas por rolagemmotionVidstack
Ver o que separa um player de um vídeo cru
Dê o play, troque a velocidade e ligue a legenda; o painel ao lado mostra o estado que o player publica e que a etiqueta crua esconde.
Pacote
Abrir no capítuloProjetar movimento, assinatura e narrativas por rolagem@vidstack/reactcmdk
Achar um destino entre quarenta digitando três letras
Abra a paleta, digite fat e escolha um item só pelo teclado; o painel embaixo conta o que o filtro deixou passar e quanto tempo levou.
Pacote
Abrir no capítuloConstruir formulários e estados de interaçãocmdknumber-flow
Animar indicadores que mudam ao vivo com formato pt-BR
Veja três indicadores fictícios rolarem a cada troca e compare com o número em texto puro. Pause, reinicie e observe o separador de milhar.
Pacote
Abrir no capítuloProjetar gráficos e painéis pela decisão@number-flow/reactApache ECharts
Medir o custo de desenhar 200 mil pontos com o ECharts
Troque o tipo de gráfico e o volume de pontos, leia o tempo de desenho e alterne o eixo em zero. Mude o tema do site e veja as cores refazerem.
Pacote
Abrir no capítuloProjetar gráficos e painéis pela decisãoechartssharp e svgo
Escolher a variante certa da imagem e conferir o teto de 150 KB
Arraste a largura da tela simulada, troque a densidade entre 1x e 2x e veja qual arquivo o navegador escolhe, quanto ele pesa e se cabe no orçamento.
Pacote
Abrir no capítuloValidar desempenho, autenticação e segurançasharp, svgoReact Flow (xyflow)
Disparar um pedido e ver o orquestrador distribuir, conferir e responder
Alterne paralelo e sequencial, ligue e desligue a verificação e use a medição real; observe o tempo de parede em cada combinação.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robô@xyflow/reactGSAP, Web Workers e number-flow
Dividir mil tarefas entre trabalhadores reais e correr três ritmos de geração
Execute com um trabalhador, depois com quatro e oito, e compare o tempo; em seguida percorra a corrida e separe a espera inicial do ritmo.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robôgsap, @number-flow/reactThree.js com React Three Fiber, drei, Rapier e XR
Carregar o braço robótico, ver a física trabalhar e entrar na cena com o visor
Carregue a cena pelo botão, inicie o ciclo, mostre os ângulos das juntas, troque a câmera e a velocidade; com visor, entre em realidade virtual.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robôthree, @react-three/fiber, @react-three/drei, @react-three/rapier, @react-three/xrMotion
Ver quatro agentes em raias trocando mensagens e a revisão devolvendo um trecho
Reproduza os 60 s de modelo, percorra o tempo pelo controle e esconda as mensagens para comparar a leitura; repare no tempo de parede contra a soma.
Pacote
Abrir no capítuloEspecificar, medir e produzir as cenas da máquinamotionMediaRecorder, Canvas 2D e Long Animation Frames (plataforma)
Medir o quadro da cena e gravar seis segundos dela em vídeo
Suba as partículas, force um bloqueio de 300 ms e leia o medidor; depois grave seis segundos, veja o codec escolhido e baixe o arquivo.
Pacote
Abrir no capítuloEspecificar, medir e produzir as cenas da máquinasem pacotesigma.js, graphology com ForceAtlas2 e cosmos.gl
Ver o grafo real do curso e um grafo de milhares de nós se organizarem em aglomerados
Rode o layout no grafo real, passe o mouse pelos nós e busque uma entidade; troque para 20 mil nós e leia o medidor; depois carregue o modo massivo na placa de vídeo.
Pacote
Abrir no capítuloAnimar um grafo de conhecimento amplo em movimentosigma, graphology, graphology-layout-forceatlas2, graphology-generators, @cosmos.gl/graph