Repolode
Submit
SeanWong17

SeanWong17/Future-Style-Periodic-Table

An interactive, cyberpunk-styled periodic table of all 118 elements with 3D orbital models, heatmaps and bilingual UI, built with TypeScript and Vite.

View on GitHubWebsite
Stars
614
Forks
80
Open issues
0
Last commit
9 days ago

What is it?

Future Style Periodic Table is a browser-based interactive periodic table that presents all 118 chemical elements with a dark, cyberpunk-inspired visual style, neon category highlights and glassmorphism panels. Each element opens a detail view with atomic number, atomic mass, electron configuration, isotopes and common oxidation states.

The project adds a heatmap mode that colors the table by properties such as atomic radius, electronegativity, ionization energy, melting point and boiling point. Clicking an element opens a simplified 3D Bohr-style model built with CSS 3D transforms, which can be dragged to rotate and viewed in a full-screen mode with wheel zoom. The project notes that this model is for teaching and is not a real probability-based electron cloud.

The site is written in TypeScript with Vite, uses CSS Grid for the table layout, and supports switching between Chinese and English. It can be run locally with npm, built for GitHub Pages, or served from a Docker container.

Key features

  • 01Interactive periodic table covering all 118 elements with category filtering and search by symbol, name or atomic number.
  • 02Heatmap mode that colors elements by properties such as electronegativity and melting point.
  • 03Simplified 3D Bohr-style atom model that can be rotated, and viewed full screen with zoom.
  • 04Detail cards with electron configuration, isotopes and common oxidation states.
  • 05Chinese and English interface switching and responsive layouts for desktop and mobile.

Use cases

  • Teaching general chemistry or introducing the periodic table to students.
  • Comparing element properties visually through heatmaps.
  • Studying a reference project for CSS 3D transforms and TypeScript with Vite.
  • Hosting a self-run periodic table reference via GitHub Pages or Docker.

Quick start

  1. 1

    Clone the repository

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

    Enter the project folder

    cd Future-Style-Periodic-Table
  3. 3

    Install dependencies

    npm install
  4. 4

    Start the development server, then open http://localhost:5173/

    npm run dev

Things to know

  • The 3D atom models are simplified Bohr-style visualizations for teaching, not real electron cloud distributions.

In collections

Learning & education toolsDiagrams, charts & animated visualizations

Topics

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

FAQ

What is Future-Style-Periodic-Table?
An interactive, cyberpunk-styled periodic table of all 118 elements with 3D orbital models, heatmaps and bilingual UI, built with TypeScript and Vite. Future Style Periodic Table is a browser-based interactive periodic table that presents all 118 chemical elements with a dark, cyberpunk-inspired visual style, neon category highlights and glassmorphism panels. Each element opens a detail view with atomic number, atomic mass, electron configuration, isotopes and common oxidation states.
Is Future-Style-Periodic-Table free to use? What license does it have?
Future-Style-Periodic-Table is open source under the MIT license. Check the license terms before using it in commercial products.
Is Future-Style-Periodic-Table still maintained?
Actively maintained. The last commit to Future-Style-Periodic-Table was on Oct 29, 2026.
What can I use Future-Style-Periodic-Table for?
Teaching general chemistry or introducing the periodic table to students. Comparing element properties visually through heatmaps. Studying a reference project for CSS 3D transforms and TypeScript with Vite. Hosting a self-run periodic table reference via GitHub Pages or Docker.
How do I install Future-Style-Periodic-Table?
Clone the repository: git clone https://github.com/SeanWong17/Future-Style-Periodic-Table.git Enter the project folder: cd Future-Style-Periodic-Table Install dependencies: npm install Start the development server, then open http://localhost:5173/: npm run dev
Where can I get Future-Style-Periodic-Table?
The source code and installation instructions are on GitHub: https://github.com/SeanWong17/Future-Style-Periodic-Table

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects