React 19, NextJS 15, TypeScript, CSS Modules, Zustand, ThreeJS, Recharts
Atom animation from this repository you can find on homepage here https://atomanimation.com/
The live link for code of this repository is a separate website https://atom3d.vercel.app/
├── src
│ ├── app
│ ├── assets
│ │ └── icons
│ ├── components
│ │ ├── common
│ │ ├── layout
│ │ └── views
│ │ └── atomModel
│ │ ├── atomParts
│ │ ├── bottomMenu
│ │ ├── elementModalMobile
│ │ └── elementModalSimple
│ ├── elementsData
│ ├── hooks
│ ├── store
│ ├── styles
│ └── utils
└── package.json
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:3000 |
npm run build |
Build your production site |
This application uses the classic Bohr model to represent atomic structure, showing electrons in clear, planet-like orbits. However, modern quantum theory describes electrons existing in "electron clouds" or orbitals, which are regions of probability. Furthermore, the scale shown here is not realistic; the nucleus is actually minuscule compared to the vast space the electrons occupy.
All chemical data for the elements has been sourced from the world's leading scientific databases to ensure accuracy. Key sources include PubChem, the National Institute of Standards and Technology (NIST), and recommendations from the International Union of Pure and Applied Chemistry (IUPAC).
This project is licensed under the Personal Use License - see the license file for more information.
Your feedback is invaluable for the development of this project. If you have any ideas, suggestions, or found a bug, please share your thoughts on the Discussion page within the application.
If you want to support this project and its future development, you can use Github Sponsors or Buy Me A Coffee service