Repolode
Enviar
ivarvong

ivarvong/lantern

Biblioteca TypeScript sem dependências para criar explicações animadas de código, passo a passo, renderizadas em SVG no navegador, no Cloudflare Workers ou no Node.

Ver no GitHubSite
Estrelas
247
Forks
6
Issues abertas
2
Último commit
há 11 dias

O que é?

Lantern é uma portabilidade para JavaScript/TypeScript do modelo central do manim, o mecanismo de animação em Python, voltada a explicar visualmente mudanças no código. As cenas são classes com um método assíncrono construct() que declara etapas e animações. Cada etapa pode ser acessada por uma URL como ?scene=&step=, e cada cena também pode gerar uma versão em texto e um rastreamento estruturado do estado, o que torna o resultado legível para agentes.

A biblioteca não tem dependências em tempo de execução e renderiza em SVG. No navegador, atualiza um elemento SVG do DOM em tempo real a cada quadro da animação; no Cloudflare Workers ou no Node, retorna strings SVG. O texto é incorporado como contornos de glifos usando fontes incluídas na biblioteca, então a renderização não depende das fontes instaladas no host. Os diagramas podem ser escritos como fluxogramas Mermaid ou como documentos JSON com nós, arestas, código e operações, e uma API HTTP no Worker expõe esses recursos como endpoints de renderização.

Recursos principais

  • 01Etapas animadas que podem ser acessadas diretamente pelo nome da cena e da etapa
  • 02Renderiza em SVG no navegador (DOM em tempo real) ou como strings no Workers e no Node
  • 03Texto renderizado a partir de contornos de glifos incorporados, sem depender das fontes instaladas
  • 04Análise de fluxogramas Mermaid e entrada de documentos JSON para cenas
  • 05Saídas em texto, rastreamento de estado e índice, além de SVG e exportações de quadros
  • 06API HTTP no Cloudflare Workers para renderizar cenas descritas em JSON

Casos de uso

  • Orientar revisores por uma mudança no código, passo a passo, usando um link compartilhável
  • Gerar diagramas animados de fluxos de requisições ou arquiteturas a partir de Mermaid ou JSON
  • Produzir quadros explicativos em SVG no servidor, sem navegador headless
  • Fornecer a agentes de IA um texto estruturado e um rastreamento de estado de uma explicação animada

Início rápido

  1. 1

    Clone o repositório

    git clone https://github.com/ivarvong/lantern && cd lantern
  2. 2

    Instale as dependências

    npm install
  3. 3

    Inicie o servidor de desenvolvimento e abra uma cena de demonstração

    npm run dev

Antes de usar

  • Ainda não foi publicado no npm; é necessário clonar o repositório para usá-lo.
  • É necessário usar o Node 24 para executar as ferramentas e os testes diretamente como TypeScript.
  • Fora do escopo por enquanto: 3D, operações booleanas de caminhos, LaTeX e morphs correspondentes.

Em coleções

Diagramas, gráficos e visualizações animadas

Tópicos

#typescript#svg#animation#code-explanation#visualization#cloudflare-workers#mermaid#zero-dependency

Perguntas frequentes

O que é lantern?
Biblioteca TypeScript sem dependências para criar explicações animadas de código, passo a passo, renderizadas em SVG no navegador, no Cloudflare Workers ou no Node. Lantern é uma portabilidade para JavaScript/TypeScript do modelo central do manim, o mecanismo de animação em Python, voltada a explicar visualmente mudanças no código. As cenas são classes com um método assíncrono construct() que declara etapas e animações. Cada etapa pode ser acessada por uma URL como ?scene=&step=, e cada cena também pode gerar uma versão em texto e um rastreamento estruturado do estado, o que torna o resultado legível para agentes.
lantern é gratuito? Qual é a licença?
lantern é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
lantern ainda é mantido?
Manutenção ativa. O último commit de lantern foi em 27 de out. de 2026.
Para que posso usar lantern?
Orientar revisores por uma mudança no código, passo a passo, usando um link compartilhável Gerar diagramas animados de fluxos de requisições ou arquiteturas a partir de Mermaid ou JSON Produzir quadros explicativos em SVG no servidor, sem navegador headless Fornecer a agentes de IA um texto estruturado e um rastreamento de estado de uma explicação animada
Como instalar lantern?
Clone o repositório: git clone https://github.com/ivarvong/lantern && cd lantern Instale as dependências: npm install Inicie o servidor de desenvolvimento e abra uma cena de demonstração: npm run dev
Onde consigo lantern?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/ivarvong/lantern

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados