Enhanced a I Platform - Copy this Html, Bootstrap Component to your project
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Vanta Globe Effect</title> <link rel="stylesheet" href="css/style.css"> <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script> </head> <body> <div class="custom spinner"> <span></span> <span></span> <span></span> </div> <div class="scroll bar"> <div class="scroll bar inner"> </div> </div> <div id="header"> <h2 class="text home">RaF: <div id="container"> RaF: <span id="typing effect"></span> </div></h2> <div id="container"> RaF: <span id="typing effect"></span> </div> <button class="button home" data text="Awesome"> <span class="actual text"> More </span> <span aria hidden="true" class="hover text"> More </span> </button> </div> <br style="top: 20px;"> <div class="class2"> </div></div> <h1>hola</h1> <script> new Typed('#typing effect', { strings: [ 'Speed and accuracy', 'Unlimited potential', 'Solving complex problems', 'Enhancing creativity', 'Reliable and adaptive' ], // النصوص typeSpeed: 50, // سرعة الكتابة backSpeed: 30, // سرعة الحذف loop: true // تكرار الكتابة }); </script> <! Scripts > <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script> <script src="https://unpkg.com/vanta/dist/vanta.globe.min.js"></script> <script src="JavaScript/script.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> </body> <style> /* إعادة تعيين القيم الافتراضية */ * { margin: 0; padding: 0; box sizing: border box; } body, html { height: 100%; background: #000; font family: Arial, sans serif; } /* تنسيق عنصر #header */ #header { height: 100vh; width: 100%; display: flex; justify content: center; align items: center; text align: center; flex direction: column; } /* تنسيق النص داخل #header */ #header h2 { font size: 3em; color: #fff; margin bottom: 20px; } #header p { font size: 1.2em; color: #fff; margin bottom: 30px; } /* زر button home */ .button home { margin: 0; height: auto; background: transparent; padding: 0; border: none; cursor: pointer; position: relative; text transform: uppercase; font size: 2em; letter spacing: 3px; color: transparent; font family: Arial, sans serif; text decoration: none; webkit text stroke: 1px rgba(255, 255, 255, 0.6); border right: 6px; text stroke color: rgba(255, 255, 255, 0.6); animation color: #37FF8B; fs size: 2em; margin top: 20px; /* Adjusted margin */ } /* النص الخاص بعنصر hover */ .hover text { position: absolute; box sizing: border box; color: var( animation color); width: 0%; inset: 0; border right: var( border right) solid var( animation color); overflow: hidden; transition: 0.5s; webkit text stroke: 1px var( animation color); } /* التأثير عند التحويم */ .button home:hover .hover text { width: 100%; filter: drop shadow(0 0 23px var( animation color)); } /* Spinner styles */ .custom spinner { clr: rgb(0, 113, 128); /* Custom color */ gap: 6px; /* Gap between each circle */ width: 100px; height: 100px; display: flex; justify content: center; align items: center; gap: var( gap); position: fixed; /* Fix the spinner in place */ top: 50%; /* Position it vertically at the center */ left: 50%; /* Position it horizontally at the center */ transform: translate( 50%, 50%); /* Centering adjustment */ z index: 9999; /* Ensure it appears on top */ } .custom spinner span { width: 20px; height: 20px; border radius: 100%; background color: var( clr); opacity: 0; } .custom spinner span:nth child(1) { animation: fade effect 1s ease in out infinite; } .custom spinner span:nth child(2) { animation: fade effect 1s ease in out 0.33s infinite; } .custom spinner span:nth child(3) { animation: fade effect 1s ease in out 0.66s infinite; } @keyframes fade effect { 0%, 100% { opacity: 1; } 60% { opacity: 0; } } /* Media Queries for responsiveness */ @media (max width: 768px) { #header h2 { font size: 2.5em; } #header p { font size: 1em; } .button home { font size: 1.5em; letter spacing: 2px; } .custom spinner { width: 80px; height: 80px; } .custom spinner span { width: 16px; height: 16px; } } @media (max width: 480px) { #header h2 { font size: 2em; } #header p { font size: 0.9em; } .button home { font size: 1.2em; letter spacing: 1.5px; } .custom spinner { width: 60px; height: 60px; } .custom spinner span { width: 12px; height: 12px; } } .class2 { background color: #001d2b; color: white; } .scroll bar { position: fixed; top: 0px; left: 0; width: 100%; height: 10px; background color: ; z index: 10; } .scroll bar inner { height: 100%; background color: #7a00ff; width: 0%; /* الشريط يبدأ بدون عرض */ </style> <script> // تفعيل تأثير الـ VANTA Globe VANTA.GLOBE({ el: "#header", // العنصر الذي سيظهر فيه التأثير mouseControls: true, // تفعيل التحكم بالفأرة touchControls: true, // تفعيل التحكم باللمس gyroControls: false, // تعطيل التحكم بالجيروسكوب minHeight: 200.00, // الحد الأدنى لارتفاع التأثير minWidth: 200.00, // الحد الأدنى لعرض التأثير scale: 2.00, // مقياس التأثير scaleMobile: 1.00 // مقياس التأثير على الأجهزة المحمولة }); // عند تحميل الصفحة بالكامل، إخفاء الـ spinner وإظهار المحتوى window.onload = function() { // إخفاء الـ spinner var spinner = document.querySelector('.custom spinner'); if (spinner) { spinner.style.display = 'none'; // إخفاء الـ spinner } // إظهار المحتوى (في حال كان لديك محتوى لعرضه) var content = document.querySelector('.content'); if (content) { content.style.display = 'block'; // إظهار المحتوى } }; window.addEventListener('scroll', function() { const docHeight = document.documentElement.scrollHeight window.innerHeight; const scrollPosition = window.scrollY; const scrollPercentage = (scrollPosition / docHeight) * 100; gsap.to('.scroll bar inner', { width: `${scrollPercentage}%`, duration: 0.40 }); }); </script> </html> ``` Add more elements, buttons and texts to your site. ai Displays and provides api Free trials and advanced artificial intelligence for images, texts, etc. Add many beautiful effects, for example. https://dixonandmoe.com/rellax/ and https://gsap.com/text/ and The most important thing is the real time animation like the one in https://motion.dev/ It moves, but it doesn't move the entire page.
