namec's picture
it's not the same i want like in the website using webgl to make it smoother
cbcab40 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trae.AI Background</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body style="margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden;">
<custom-navbar></custom-navbar>
<main style="position: relative; z-index: 10;">
<div style="height: 100vh; display: flex; align-items: center; justify-content: center; color: white; text-align: center;">
<h1 style="font-size: 3rem; margin-bottom: 1rem; font-weight: 700;">DigitalNebula</h1>
<p style="font-size: 1.25rem; opacity: 0.8;">Inspired by trae.ai</p>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
// Initialize Vanta.NET background with WebGL optimization
VANTA.NET({
el: "body",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3b82f6,
backgroundColor: 0x1a202c,
points: 12.00,
maxDistance: 25.00,
spacing: 18.00,
showLines: true
});
</script>
</body>
</html>