Spaces:
Running
Running
In Partnership section add this image write about successful partnership between TIFR and NanoMatter . NanoMatter Technologies Partners with TIFR Hyderabad to Advance 2D Materials Research
15fac76
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NanoMatter Technologies - Advanced Semiconductor Equipment</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| .atom-animation { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| pointer-events: none; | |
| } | |
| .hero-background { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-video { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .video-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); | |
| } | |
| .grid-pattern { | |
| background-image: linear-gradient(rgba(255,102,0,0.05) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255,102,0,0.05) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white text-gray-800 font-poppins"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden hero-background"> | |
| <video class="hero-video" autoplay muted loop playsinline> | |
| <source src="https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/videos/Untitled design.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <div class="video-overlay"></div> | |
| <div class="atom-animation" id="atomCanvas"></div> | |
| <div class="relative z-20 text-center px-4 max-w-6xl mx-auto"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 text-white"> | |
| Enabling Next-Generation<br>Semiconductor Innovation | |
| </h1> | |
| <p class="text-xl md:text-2xl text-orange-100 mb-8 max-w-3xl mx-auto"> | |
| Advanced deposition tools for FEOL and BEOL | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="#technologies" class="bg-orange-500 hover:bg-orange-600 text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg"> | |
| Explore Technologies | |
| </a> | |
| <a href="#contact" class="border border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300 shadow-md"> | |
| Get in Touch | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-4 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">About NanoMatter</h2> | |
| <div class="w-24 h-1 bg-orange-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-6 text-orange-500">30+ Years of Combined Expertise</h3> | |
| <p class="text-gray-600 text-lg mb-6"> | |
| NanoMatter Technologies specializes in advanced semiconductor equipment manufacturing, | |
| focusing on MOCVD and PVD systems that enable breakthroughs in electronics, optoelectronics, | |
| and quantum devices. | |
| </p> | |
| <p class="text-gray-600 text-lg mb-6"> | |
| Our team blends deep technical expertise with precision engineering to design reliable, | |
| high-performance deposition platforms tailored for advanced materials research and | |
| semiconductor innovation. | |
| </p> | |
| <div class="flex items-center gap-8 text-sm text-gray-500"> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-orange-500">30+</div> | |
| <div>Years Experience</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-orange-500">2</div> | |
| <div>Global Locations</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-orange-500">50+</div> | |
| <div>Research Partners</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-8"> | |
| <div class="bg-gradient-to-br from-orange-50 to-white rounded-2xl p-8 border border-orange-100 shadow-sm"> | |
| <h4 class="text-xl font-semibold mb-4 text-orange-500">Founder's Message</h4> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe | |
| src="https://www.youtube.com/embed/VENZo4UrnuE" | |
| title="Founder's Video" | |
| class="w-full h-64 md:h-80 rounded-xl shadow-lg" | |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | |
| allowfullscreen> | |
| </iframe> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-orange-50 to-white rounded-2xl p-8 border border-orange-100 shadow-sm"> | |
| <h4 class="text-xl font-semibold mb-4 text-orange-500">Global Presence</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="map-pin" class="text-orange-500"></i> | |
| <span class="text-gray-700">India - R&D & Manufacturing Hub</span> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="map-pin" class="text-orange-500"></i> | |
| <span class="text-gray-700">Germany - European Operations</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technologies Section --> | |
| <section id="technologies" class="py-20 px-4 bg-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Advanced Technologies</h2> | |
| <div class="w-24 h-1 bg-orange-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <!-- MOCVD Card --> | |
| <div class="bg-white rounded-2xl p-8 border border-gray-200 hover:border-orange-500 transition-all duration-300 shadow-md hover:shadow-lg"> | |
| <div class="mb-6"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="layers" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold text-gray-900">MOCVD Systems</h3> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| Metal Organic Chemical Vapor Deposition systems for high-precision thin film growth | |
| of 2D materials and transition metal dichalcogenides (TMDs). | |
| </p> | |
| <ul class="space-y-2 text-gray-500 mb-6"> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="text-orange-500 w-4 h-4"></i> | |
| Atomic-level thickness control | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="text-orange-500 w-4 h-4"></i> | |
| Multi-wafer processing capability | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="text-orange-500 w-4 h-4"></i> | |
| In-situ monitoring and control | |
| </li> | |
| </ul> | |
| <div class="bg-orange-50 rounded-lg p-4 border-l-4 border-orange-500"> | |
| <h4 class="font-semibold text-orange-500 mb-2">Applications</h4> | |
| <p class="text-sm text-gray-600">Quantum devices, photonics, flexible electronics, advanced sensors</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/images/Specfication.png" download="NanoMatter-MOCVD-Brochure.pdf" class="w-full bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| Download Product Brochure | |
| </a> | |
| </div> | |
| <!-- PVD Card --> | |
| <div class="bg-white rounded-2xl p-8 border border-gray-200 hover:border-orange-500 transition-all duration-300 shadow-md hover:shadow-lg"> | |
| <div class="flex items-center gap-4 mb-6"> | |
| <div class="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="zap" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold text-gray-900">PVD Systems</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| Physical Vapor Deposition systems for back-end-of-line (BEOL) applications | |
| including Aluminum, TiN, Ti, and TiO thin films with exceptional uniformity | |
| and reproducibility. | |
| </p> | |
| <ul class="space-y-2 text-gray-500 mb-6"> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="text-orange-500 w-4 h-4"></i> | |
| Ultra-high vacuum compatibility | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="text-orange-500 w-4 h-4"></i> | |
| Multi-target configuration | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="text-orange-500 w-4 h-4"></i> | |
| Sub-nanometer film uniformity | |
| </li> | |
| </ul> | |
| <div class="bg-orange-50 rounded-lg p-4 border-l-4 border-orange-500"> | |
| <h4 class="font-semibold text-orange-500 mb-2">Applications</h4> | |
| <p class="text-sm text-gray-600">Interconnect metallization, MEMS, protective coatings, optical films</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Service Section --> | |
| <section id="service" class="py-20 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Deposition as a Service</h2> | |
| <div class="w-24 h-1 bg-red-600 mx-auto"></div> | |
| </div> | |
| <div class="bg-gradient-to-br from-gray-800 to-red-900/20 rounded-2xl p-12"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-6 text-red-400">Custom Thin Film Solutions</h3> | |
| <p class="text-gray-300 text-lg mb-6"> | |
| Access our state-of-the-art deposition capabilities without capital investment. | |
| Our service model provides research institutes, startups, and industrial clients | |
| with high-quality thin film growth solutions. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center"> | |
| <i data-feather="check" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="text-gray-300">Material characterization and analysis</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center"> | |
| <i data-feather="check" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="text-gray-300">Process optimization and development</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center"> | |
| <i data-feather="check" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="text-gray-300">Technical support and consultation</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-gray-800 rounded-2xl p-8 inline-block"> | |
| <i data-feather="cloud" class="w-16 h-16 text-red-500 mx-auto mb-4"></i> | |
| <h4 class="text-xl font-semibold mb-2">Service Tiers</h4> | |
| <div class="space-y-3 text-gray-400"> | |
| <div>Research & Development</div> | |
| <div>Prototype Development</div> | |
| <div>Production Scale-up</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partnerships Section --> | |
| <section id="partnerships" class="py-20 px-4 bg-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Research & Partnerships</h2> | |
| <div class="w-24 h-1 bg-orange-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-6 text-orange-500">Global Collaborations</h3> | |
| <p class="text-gray-600 text-lg mb-6"> | |
| We actively collaborate with leading universities, research institutions, and R&D centers | |
| worldwide to push the boundaries of material synthesis and device integration. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="bg-orange-50 rounded-xl p-6 border-l-4 border-orange-500"> | |
| <h4 class="font-semibold text-orange-500 mb-2">Academic Partnerships</h4> | |
| <p class="text-gray-600">Joint research projects with top-tier universities</p> | |
| </div> | |
| <div class="bg-orange-50 rounded-xl p-6 border-l-4 border-orange-500"> | |
| <h4 class="font-semibold text-orange-500 mb-2">Industrial Collaborations</h4> | |
| <p class="text-gray-600">Technology transfer and co-development with industry leaders</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center"> | |
| <i data-feather="book" class="w-8 h-8 text-orange-500"></i> | |
| </div> | |
| <div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center"> | |
| <i data-feather="users" class="w-8 h-8 text-orange-500"></i> | |
| </div> | |
| <div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center"> | |
| <i data-feather="award" class="w-8 h-8 text-orange-500"></i> | |
| </div> | |
| <div class="bg-orange-50 rounded-xl p-6 flex items-center justify-center"> | |
| <i data-feather="globe" class="w-8 h-8 text-orange-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TIFR Partnership Success Story --> | |
| <div class="mt-16 bg-gradient-to-br from-orange-50 to-white rounded-2xl p-8 border border-orange-100 shadow-sm"> | |
| <div class="grid md:grid-cols-2 gap-8 items-center"> | |
| <div> | |
| <img src="https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/images/WhatsApp Image 2025-06-28 at 14.26.24_3bf2c256.jpg" | |
| alt="TIFR MOCVD Installation" | |
| class="w-full h-64 object-cover rounded-xl shadow-lg"> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-4 text-orange-500"> | |
| NanoMatter Technologies Partners with TIFR Hyderabad to Advance 2D Materials Research | |
| </h3> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <i data-feather="map-pin" class="text-orange-500"></i> | |
| <span class="text-gray-700 font-medium">Hyderabad, India</span> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| We are thrilled to announce the successful installation of NanoMatter's state-of-the-art MOCVD | |
| (Metal Organic Chemical Vapor Deposition) system at the Tata Institute of | |
| Fundamental Research (TIFR), Hyderabad. | |
| </p> | |
| <p class="text-gray-600 mb-6"> | |
| This partnership marks a major milestone in enabling cutting-edge research on 2D materials | |
| and transition metal dichalcogenides (TMDs) — paving the way for the next generation | |
| of semiconductor and quantum devices. | |
| </p> | |
| <div class="bg-orange-100 rounded-lg p-4 border-l-4 border-orange-500"> | |
| <h4 class="font-semibold text-orange-500 mb-2">The collaboration brings together:</h4> | |
| <ul class="text-gray-600 text-sm space-y-1"> | |
| <li>• TIFR Hyderabad's expertise in nanoscale materials and device physics</li> | |
| <li>• NanoMatter's innovative deposition technology and process engineering</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Contact Us</h2> | |
| <div class="w-24 h-1 bg-orange-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-6 text-orange-500">Get in Touch</h3> | |
| <form class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Name</label> | |
| <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-orange-500 transition-all duration-300" placeholder="Your Name"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Email</label> | |
| <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-orange-500 transition-all duration-300" placeholder="[email protected]"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Subject</label> | |
| <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-orange-500 transition-all duration-300" placeholder="Inquiry Subject"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Message</label> | |
| <textarea class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-orange-500 transition-all duration-300" rows="5" placeholder="Your message..."></textarea> | |
| </div> | |
| <button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-6 text-orange-500">Global Offices</h3> | |
| <div class="space-y-6"> | |
| <div class="bg-white rounded-xl p-6 border border-gray-200 shadow-sm"> | |
| <h4 class="font-semibold text-gray-900 mb-3">India - R&D & Manufacturing Hub</h4> | |
| <div class="space-y-2 text-gray-600"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="map-pin" class="text-orange-500"></i> | |
| <span>Bangalore, Karnataka</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="phone" class="text-orange-500"></i> | |
| <span>+91 7994785886</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl p-6 border border-gray-200 shadow-sm"> | |
| <h4 class="font-semibold text-gray-900 mb-3">Germany - European Operations</h4> | |
| <div class="space-y-2 text-gray-600"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="map-pin" class="text-orange-500"></i> | |
| <span>Berlin</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="phone" class="text-orange-500"></i> | |
| <span>+49 1628528047</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Simple atom animation for hero section | |
| function initAtomAnimation() { | |
| const canvas = document.createElement('canvas'); | |
| const container = document.getElementById('atomCanvas'); | |
| container.appendChild(canvas); | |
| const ctx = canvas.getContext('2d'); | |
| let width = container.clientWidth; | |
| let height = container.clientHeight; | |
| canvas.width = width; | |
| canvas.height = height; | |
| const atoms = []; | |
| const numAtoms = 15; | |
| for (let i = 0; i < numAtoms; i++) { | |
| atoms.push({ | |
| x: Math.random() * width, | |
| y: Math.random() * height, | |
| radius: Math.random() * 3 + 1, | |
| speedX: (Math.random() - 0.5) * 0.5, | |
| speedY: (Math.random() - 0.5) * 0.5, | |
| connections: [] | |
| }); | |
| } | |
| function animate() { | |
| ctx.clearRect(0, 0, width, height); | |
| // Draw connections | |
| ctx.strokeStyle = 'rgba(255,102,0,0.2)'; | |
| ctx.lineWidth = 1; | |
| for (let i = 0; i < atoms.length; i++) { | |
| for (let j = i + 1; j < atoms.length; j++) { | |
| const dx = atoms[i].x - atoms[j].x; | |
| const dy = atoms[i].y - atoms[j].y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 150) { | |
| ctx.beginPath(); | |
| ctx.moveTo(atoms[i].x, atoms[i].y); | |
| ctx.lineTo(atoms[j].x, atoms[j].y); | |
| ctx.stroke(); | |
| } | |
| } | |
| } | |
| // Draw atoms | |
| for (let atom of atoms) { | |
| ctx.beginPath(); | |
| ctx.arc(atom.x, atom.y, atom.radius, 0, Math.PI * 2); | |
| ctx.fillStyle = 'rgba(255,102,0,0.6)'; | |
| ctx.fill(); | |
| // Update position | |
| atom.x += atom.speedX; | |
| atom.y += atom.speedY; | |
| // Bounce off walls | |
| if (atom.x <= 0 || atom.x >= width) atom.speedX *= -1; | |
| if (atom.y <= 0 || atom.y >= height) atom.speedY *= -1; | |
| } | |
| requestAnimationFrame(animate); | |
| } | |
| animate(); | |
| window.addEventListener('resize', () => { | |
| width = container.clientWidth; | |
| height = container.clientHeight; | |
| canvas.width = width; | |
| canvas.height = height; | |
| }); | |
| } | |
| // Initialize animation when page loads | |
| document.addEventListener('DOMContentLoaded', initAtomAnimation); | |
| </script> | |
| </body> | |
| </html> | |