Frontend
React 19
A interface é uma aplicação React que gerencia controles, estado do preview ao vivo, timing, seleção de modo de animação e interações de exportação no navegador.
Stack principal
O que sustenta esta ferramenta de estudo visual e por que ela é diferente de uma demo estática comum.
Linguagem
TypeScript
Código da aplicação, definições de cena, lógica de exportação e configuração do Vite são escritos em TypeScript, o que ajuda a manter consistência entre parâmetros visuais e estrutura de saída.
Build tool
Vite 7
Vite cuida do servidor local, da build de produção, do preview e dos pontos de extensão via plugin que alimentam a rota de exportação local.
Modelo de animação
Geração de SVG baseada em cena
O app gera visuais SVG a partir de dados estruturados de cena/estado, em vez de embutir animações fixas. Isso torna o sistema visual paramétrico e orientado à exportação.
Camada de exportação
Saída em arquivos locais
A ferramenta exporta não apenas SVG, mas também snapshots em markdown, usando rota local e utilitários de filesystem em Node.js em vez de downloads simples no navegador.
Ferramentas de desenvolvimento
ESLint + plugins React
O projeto usa lint moderno e uma cadeia padrão de React/Vite/TypeScript, ficando muito mais próximo do Glossary Builder do que dos utilitários estáticos deste conjunto de projetos.
Como roda
O app combina controles no navegador com uma rota local de exportação sustentada por Node.js.
1
Vite serve a aplicação React
O projeto começa como um app React normal com Vite, em que src/main.tsx monta a interface e src/App.tsx conduz a ferramenta principal.
2
A UI edita os parâmetros da animação
Os controles do navegador ajustam estado de cena, modo, timing, parâmetros de design e comportamento de preview da composição visual ativa.
3
Helpers de cena geram o visual
src/lib/scene.ts define designs, metadados de controle, defaults e a lógica de geração SVG que alimenta o preview.
4
A rota de exportação recebe o snapshot
O app envia o SVG e os dados estruturados do snapshot para /api/export, implementado via middleware customizado do Vite em vez de um backend separado.
5
Node grava SVG e markdown no disco
O middleware de exportação usa utilitários de filesystem para salvar SVG e um markdown correspondente em svg-export/ com nomes incrementados.
Mapa da arquitetura
É um app frontend com um backend local de exportação embutido na própria cadeia de build.
Pastas principais
src/Aplicação React principal, estilos e lógica de cena/exportação.
src/lib/Definições de cena e helpers de markdown de exportação.
public/Assets estáticos como favicon.
svg-export/Arquivos SVG e snapshots markdown gerados.
video-examples/Exemplos gravados de uso da ferramenta.
dist/Saída de build frontend do Vite.
Análise da Arquitetura
package.json vite.config.ts src/App.tsx src/main.tsx src/index.css src/lib/scene.ts src/lib/export.ts svg-export/
A decisão arquitetural mais marcante aqui é implementar o comportamento de exportação dentro do middleware do Vite, e não como um serviço de API hospedado separadamente.
Dados e modelo de exportação
O valor central da ferramenta está na exploração visual e na exportação local estruturada.
Modelo de estado
A saída da animação deriva do estado do app
Os designs são parametrizados, não hard-coded como uma única animação fixa.
O estado em React dirige o preview ao vivo.
Os modos Orbit e Lines representam famílias visuais diferentes.
O app é feito para iteração e variação.
Modelo de exportação
Arquivos locais fazem parte do fluxo
Os SVGs são gravados em disco, não apenas baixados no navegador.
Cada export inclui um snapshot em markdown do estado atual.
A rota do Vite gera nomes numerados para os arquivos.
O fluxo é otimizado para uso criativo local, não para um deployment puramente estático.
Comandos para rodar
O app segue o fluxo normal do Vite, com o suporte a exportação embutido na configuração do servidor.
Scripts
npm install npm run dev npm run build npm run preview npm run lint
npm run dev é especialmente importante aqui, porque a rota local de exportação fica conectada à configuração do servidor Vite.
Ambiente esperado
O que o app precisa
Node.js e npm.
Nenhuma API key externa.
Permissão de escrita em disco para exportar localmente.
Fluxo local quando a exportação faz parte do uso.
Resumo final
Dots Animation Tool é uma ferramenta criativa em Vite + React + TypeScript com um backend local de exportação embutido no Vite. Ela está mais próxima de uma ferramenta de trabalho para design do que de um site estático ou app CRUD convencional.