cada ves mas astetic

httpsalejandro · httpsalejandro · commit a0fa35782974 · 2025-11-23T23:37:21.000-06:00
se agrego el inicio de pantalla
diff --git a/app.js b/app.js
@@ -1,3 +1,63 @@
+// Nueva animación de intro
+const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
+
+// Aparecer el logo
+tl.to(".logo", {
+    opacity: 1,
+    duration: 0.5
+})
+
+// Efecto de pulso (repetir 3 veces)
+.to(".pulse-effect", {
+    opacity: 1,
+    scale: 1,
+    duration: 0.5,
+    repeat: 3,
+    yoyo: true,
+    onStart: function() {
+        // Iniciar el efecto de pulso (shadow)
+        gsap.set(".pulse-effect", {
+            boxShadow: "0 0 0 0 rgba(255, 255, 255, 0.7)"
+        });
+    },
+    onRepeat: function() {
+        // En cada repetición, reiniciar la sombra para el pulso
+        gsap.set(".pulse-effect", {
+            boxShadow: "0 0 0 0 rgba(255, 255, 255, 0.7)"
+        });
+        gsap.to(".pulse-effect", {
+            boxShadow: "0 0 0 20px rgba(255, 255, 255, 0)",
+            duration: 0.5
+        });
+    }
+})
+
+// Efecto glitch rápido
+.to(".glitch", {
+    opacity: 0.4,
+    duration: 0.1
+})
+.to(".glitch", {
+    opacity: 0,
+    duration: 0.1
+})
+
+// Desvanecer la intro
+.to("#intro", {
+    opacity: 0,
+    duration: 0.5,
+    onComplete: function() {
+        document.getElementById("intro").style.display = "none";
+        // Iniciar la aplicación principal
+        new NeuronNavigation();
+    }
+})
+
+// Revelar el contenido principal
+.to("#mainContent", {
+    opacity: 1,
+    duration: 0.5
+}, "-=0.3");
 class NeuronNavigation {
     constructor() {
         this.currentSection = 'hero';
diff --git a/index.html b/index.html
@@ -9,8 +9,14 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="styles.css" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
 </head>
 <body>
+<div id="intro">
+    <div class="logo"></div>
+    <div class="pulse-effect"></div>
+    <div class="glitch"></div>
+</div>
   <!-- Audio Ambiental -->
   <div class="audio-control">
     <button id="audioToggle" class="audio-btn" aria-label="Controlar audio ambiental">
diff --git a/logo.png b/logo.png
diff --git a/styles.css b/styles.css
@@ -1,3 +1,51 @@
+/* Estilos para la intro simplificada */
+#intro {
+    position: fixed;
+    inset: 0;
+    background: #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.logo {
+    width: 200px;
+    height: 200px;
+    background-image: url("logo.png"); /* Reemplaza con tu logo */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    position: relative;
+    z-index: 2;
+}
+
+.pulse-effect {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    background: transparent;
+    border: 2px solid transparent;
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+    opacity: 0;
+    z-index: 1;
+}
+
+.glitch {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    background: repeating-linear-gradient(
+        to bottom,
+        rgba(255,255,255,0.05) 0 2px,
+        rgba(0,0,0,0) 2px 4px
+    );
+    opacity: 0;
+    mix-blend-mode: overlay;
+    z-index: 3;
+}
 :root {
   --primary: #93B9E0;
   --lilac: #C4A2FC;
