Repolode
Enviar
SeanWong17

SeanWong17/Future-Style-Periodic-Table

Uma tabela periódica interativa com estilo cyberpunk, os 118 elementos, modelos 3D de orbitais, mapas de calor e interface bilíngue, feita com TypeScript e Vite.

Ver no GitHubSite
Estrelas
614
Forks
80
Issues abertas
0
Último commit
há 9 dias

O que é?

Future Style Periodic Table é uma tabela periódica interativa que roda no navegador e apresenta os 118 elementos químicos em um estilo visual escuro inspirado no cyberpunk, com destaques em neon para as categorias e painéis com efeito de vidro. Ao abrir um elemento, uma tela de detalhes exibe número atômico, massa atômica, configuração eletrônica, isótopos e estados de oxidação comuns.

O projeto inclui um modo de mapa de calor que colore a tabela de acordo com propriedades como raio atômico, eletronegatividade, energia de ionização, ponto de fusão e ponto de ebulição. Ao clicar em um elemento, é aberto um modelo 3D simplificado de estilo Bohr, feito com transformações 3D de CSS, que pode ser arrastado para girar e exibido em tela cheia com zoom pela roda do mouse. O projeto ressalta que esse modelo é voltado ao ensino e não representa uma nuvem eletrônica real baseada em probabilidades.

O site é escrito em TypeScript com Vite, usa CSS Grid para organizar a tabela e permite alternar entre chinês e inglês. Ele pode ser executado localmente com npm, compilado para o GitHub Pages ou servido em um contêiner Docker.

Recursos principais

  • 01Tabela periódica interativa com os 118 elementos, filtros por categoria e busca por símbolo, nome ou número atômico.
  • 02Modo de mapa de calor que colore os elementos de acordo com propriedades como eletronegatividade e ponto de fusão.
  • 03Modelo atômico 3D simplificado de estilo Bohr, que pode ser girado, exibido em tela cheia e ampliado.
  • 04Cartões de detalhes com configuração eletrônica, isótopos e estados de oxidação comuns.
  • 05Alternância entre as interfaces em chinês e inglês e layouts responsivos para desktop e dispositivos móveis.

Casos de uso

  • Ensinar química geral ou apresentar a tabela periódica aos alunos.
  • Comparar visualmente as propriedades dos elementos por meio de mapas de calor.
  • Estudar um projeto de referência sobre transformações 3D de CSS e TypeScript com Vite.
  • Hospedar uma tabela periódica de referência própria usando GitHub Pages ou Docker.

Início rápido

  1. 1

    Clone o repositório

    git clone https://github.com/SeanWong17/Future-Style-Periodic-Table.git
  2. 2

    Acesse a pasta do projeto

    cd Future-Style-Periodic-Table
  3. 3

    Instale as dependências

    npm install
  4. 4

    Inicie o servidor de desenvolvimento e abra http://localhost:5173/

    npm run dev

Antes de usar

  • Os modelos atômicos 3D são visualizações simplificadas do modelo de Bohr para fins didáticos e não representam distribuições reais de nuvens eletrônicas.

Em coleções

Ferramentas de aprendizado e educação de código abertoDiagramas, gráficos e visualizações animadas

Tópicos

#periodic-table#education#chemistry#visualization#typescript#vite#css3#interactive#3d-models#cyberpunks

Perguntas frequentes

O que é Future-Style-Periodic-Table?
Uma tabela periódica interativa com estilo cyberpunk, os 118 elementos, modelos 3D de orbitais, mapas de calor e interface bilíngue, feita com TypeScript e Vite. Future Style Periodic Table é uma tabela periódica interativa que roda no navegador e apresenta os 118 elementos químicos em um estilo visual escuro inspirado no cyberpunk, com destaques em neon para as categorias e painéis com efeito de vidro. Ao abrir um elemento, uma tela de detalhes exibe número atômico, massa atômica, configuração eletrônica, isótopos e estados de oxidação comuns.
Future-Style-Periodic-Table é gratuito? Qual é a licença?
Future-Style-Periodic-Table é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
Future-Style-Periodic-Table ainda é mantido?
Manutenção ativa. O último commit de Future-Style-Periodic-Table foi em 29 de out. de 2026.
Para que posso usar Future-Style-Periodic-Table?
Ensinar química geral ou apresentar a tabela periódica aos alunos. Comparar visualmente as propriedades dos elementos por meio de mapas de calor. Estudar um projeto de referência sobre transformações 3D de CSS e TypeScript com Vite. Hospedar uma tabela periódica de referência própria usando GitHub Pages ou Docker.
Como instalar Future-Style-Periodic-Table?
Clone o repositório: git clone https://github.com/SeanWong17/Future-Style-Periodic-Table.git Acesse a pasta do projeto: cd Future-Style-Periodic-Table Instale as dependências: npm install Inicie o servidor de desenvolvimento e abra http://localhost:5173/: npm run dev
Onde consigo Future-Style-Periodic-Table?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/SeanWong17/Future-Style-Periodic-Table

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

Projetos relacionados