Science Experiments

An interactive 3D science experiment platform built with Next.js, TypeScript, Three.js, and Tailwind CSS.

Features

• 🎨 Chemistry Lab Aesthetic: Warm brown and beige color scheme creating an immersive lab environment

• 🧬 5 Interactive Experiments:

  1. Color-Changing Solutions - Oxidation-reduction reactions
  2. Momentum Collision - Conservation of momentum and Newton's laws
  3. Crystal Formation - Crystallography and molecular structure
  4. Pendulum Waves - Harmonic motion and wave interference
  5. Particle Acceleration - Electromagnetic field interactions

• 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile devices

• ⚡ 3D Animations: Powered by Three.js (ready for animation implementation)

• 🎯 Educational Content: Each experiment includes detailed explanations and learning objectives

Pages

• Home (/) - Welcome page with feature overview
• Experiments (/experiments) - Gallery of all available experiments
• Individual Experiment Pages - Detailed views with 3D visualizations
• Contact (/contact) - Contact form and information

Tech Stack

• Framework: Next.js 15.1.7
• Language: TypeScript
• Styling: Tailwind CSS
• 3D Graphics: Three.js
• Runtime: Node.js

Getting Started

Installation

npm install

Development

npm run dev

Open http://localhost:3000 in your browser to see the application.

Build for Production

npm run build
npm start

Project Structure

├── app/
│   ├── components/          # Shared components (Navigation, Footer)
│   ├── experiments/         # Experiments section
│   │   ├── components/      # Experiment-specific components
│   │   ├── color-changing/  # Individual experiment pages
│   │   ├── momentum/
│   │   ├── crystal-formation/
│   │   ├── pendulum-waves/
│   │   └── page.tsx         # Main experiments gallery
│   ├── contact/             # Contact page
│   ├── layout.tsx           # Root layout
│   ├── globals.css          # Global styles
│   └── page.tsx             # Home page
├── public/                  # Static assets
├── package.json
├── tsconfig.json
├── tailwind.config.ts
├── next.config.ts
└── .eslintrc.json

Color Palette (Chemistry Lab Theme)

• Dark: #4a3728
• Medium: #6b5344
• Light: #9d8b7e
• Beige: #d4c5b0
• Cream: #ede4d3
• Accent Brown: #8b6f47
• Accent Copper: #b87333

Tailwind Custom Colors

All colors are available as Tailwind utilities:

• bg-lab-dark, bg-lab-medium, bg-lab-light, bg-lab-beige, bg-lab-cream
• text-lab-dark, text-lab-medium, text-lab-light, text-lab-beige
• bg-accent-brown, text-accent-brown
• bg-accent-copper, text-accent-copper

Animation Implementation

The Three.js scene infrastructure is set up in ExperimentCanvas.tsx. Each experiment page is ready for custom animations:

1. Color-Changing Solutions: Implement molecular reaction animations
2. Momentum Collision: Add realistic ball physics and collision detection
3. Crystal Formation: Create growing crystal lattice structures
4. Pendulum Waves: Simulate multiple pendulums with wave patterns
5. Particle Acceleration: Implement charged particle movement in electromagnetic fields

To add animations, modify the animate loop or useEffect in individual ExperimentCanvas implementations.

Features Ready for Development

• ✅ Project scaffold complete with all pages and routes
• ✅ Responsive navigation and footer
• ✅ Three.js scene setup and rendering pipeline
• ✅ Contact form (validation and submission logic ready)
• ✅ Tailwind CSS with custom chemistry lab color scheme
• ⏳ 3D experiment animations (ready to implement)

Browser Compatibility

• Chrome (recommended)
• Firefox
• Safari
• Edge

License

This project is open source and available for educational use.

Support

For questions or issues, please contact us through the Contact page or email info@sciencelab.com.