• 118 Elements with detailed information
• Click any element to view comprehensive data
• Smooth 3D atom visualization with electron shells
• Category-based color coding (Alkali Metal, Noble Gas, etc.)

• Monatomic & Polyatomic Ions database
• Custom animations for each ion's properties
• Visual hints for flame tests, solubility, and more
• Real-time charge calculations

• Mobile-first landing refreshed with softer background motion text stream.
• Mobile landing no longer triggers desktop onboarding/welcome flow.
• Element modal export/download button was removed.
• Custom mobile assets were organized into the images/ folder:
  • images/mobile-bg-1.png
  • images/mobile-atom-2.png

• Generate balanced equation practice problems
• Multiple reaction types (Synthesis, Decomposition, Combustion, etc.)
• Adjustable difficulty levels
• Print-ready PDF export

• Arrow Keys (← →) - Navigate between info slides
• Space Bar - Next slide
• Fully accessible modal navigation

# Clone the repository
git clone https://github.com/YOUR_USERNAME/zperiod.git

# Navigate to project directory
cd zperiod

# Install dependencies
npm install

# Start dev server (with hot reload)
npm run dev

# Lint + syntax check + production build
npm run check

# Build static files to dist/
npm run build

# Preview production build locally
npm run preview

zperiod/
├── .github/workflows/ci.yml # CI pipeline
├── package.json            # Vite scripts and dependencies
├── index.html              # Main HTML file
├── script.js               # Main JavaScript logic
├── three.min.js            # Legacy local Three.js copy
├── logo.svg                # Project logo
├── public/                 # Static files copied directly by Vite
├── css/
│   ├── base.css            # Design tokens, layout, navigation
│   ├── grid.css            # Periodic table grid
│   ├── modal.css           # Element detail modals
│   ├── tools.css           # Chemistry tools styles
│   ├── ions.css            # Ion engine styles
│   ├── ion-animations.css  # Ion-specific animations
│   ├── mobile-landing.css  # Mobile landing page
│   └── worksheet-styles.css
├── js/
│   ├── ion-animations.js   # Ion animation logic
│   ├── worksheet-generator.js
│   ├── data/
│   │   ├── elementsData.js # Element database
│   │   └── ionsData.js     # Ion database
│   └── modules/
│       ├── chemistryTools.js
│       ├── ionsController.js
│       ├── threeRenderer.js
│       └── uiController.js
├── images/                 # Preview screenshots
└── README.md

Zperiod follows modern design principles:

• Minimal & Clean - Inspired by Apple's design language
• Glassmorphism - Subtle frosted glass effects
• Responsive - Works on all screen sizes
• Dark/Light Friendly - Neutral color palette
• Micro-animations - Smooth, delightful interactions

• Grade 9-12 Chemistry Students
• AP Chemistry / IB Chemistry
• Teachers looking for classroom tools
• Anyone interested in chemistry visualization

© 2026 Philip. All rights reserved.

This project is created for educational purposes. Unauthorized copying, modification, or redistribution without explicit permission is prohibited.

• Three.js - 3D graphics library
• Google Fonts (Inter) - Typography
• The Chemistry Community - For inspiration