An interactive 3D visualization of the periodic table of elements built with Three.js. Experience chemistry in a video game-inspired UI with a dark, atmospheric design featuring blueish, yellowish, pinkish, and purplish color schemes.
- 3D Interactive Visualization: Rotate and explore the periodic table in 3D space
- Element Information: Click on any element to view detailed information
- Color-Coded Categories: Elements are color-coded by their chemical category
- Semi-Transparent 3D Boxes: Each element is represented as a semi-transparent 3D box
- Video Game UI Style: Throne-like aesthetic with dark backgrounds and glowing accents
- Responsive Design: Works on different screen sizes
npm installStart the development server:
npm run devThe application will open in your browser at http://localhost:3000
Build for production:
npm run buildPreview the production build:
npm run preview- Rotate: Click and drag to rotate the periodic table
- Hover: Move your mouse over elements to see them highlight
- Click: Click on any element to view its information in the sidebar
Elements are color-coded by category:
- Nonmetals: Blue (#4a90e2)
- Noble Gases: Purple (#9b59b6)
- Alkali Metals: Yellow/Orange (#f39c12)
- Alkaline Earth Metals: Orange (#e67e22)
- Transition Metals: Red (#e74c3c)
- Metalloids: Light Blue (#3498db)
- Post-Transition Metals: Teal (#1abc9c)
- Lanthanides: Yellow (#f1c40f)
- Actinides: Pink (#e91e63)
- Three.js: 3D graphics library
- Vite: Build tool and development server
- SCSS: Styling with Sass
- ESLint: Code linting (JavaScript Standard Style)
- Prettier: Code formatting
MIT