🌊 Efecto Parallax con Astro y Lenis

Hero interactivo para Astro con video de fondo y efecto parallax sincronizado con el scroll. Utiliza Lenis para navegación fluida y animaciones suaves que escalan el video, desplazan el hero y desvanecen el contenido progresivamente. Diseñado con Tailwind CSS y optimizado para mobile y desktop, logrando una experiencia visual moderna con código ligero y alto rendimiento.

---

🛠️ Stack Tecnológico

• Astro: Framework principal utilizado para estructurar los componentes del proyecto.
• Tailwind CSS: Utilizado para construir el diseño responsive mediante clases utilitarias.
• Lenis: Librería ligera para crear smooth scrolling y animaciones basadas en scroll.
• Lucide Astro: Librería de iconos minimalistas utilizada en la navegación y botones.

---

📂 Estructura del Proyecto

public/
│ └─ assets/
│   └─ sea-waves.mp4
src/
├─ components/
│ └─ Hero.astro
│
├─ layouts/
│ └─ Layout.astro
│
└─ pages/
  └─ index.astro

Archivos principales

• Hero.astro → Contiene el hero completo con video, navbar y animaciones.
• index.astro → Página principal que monta el Hero y el resto del contenido.
• Layout.astro → Layout base del proyecto.
• sea-waves.mp4 → Video de fondo utilizado en el hero.

---

🎬 Animaciones de Scroll

Las animaciones del hero reaccionan a la posición del scroll del usuario.

Efectos incluidos

• Parallax del contenedor Hero
• Zoom progresivo del video
• Fade out del contenido
• Desaparición del navbar

Ejemplo simplificado de la lógica utilizada:

const scrollY = window.scrollY;
const vh = window.innerHeight;

const progress = scrollY / vh;

hero.style.transform = `translateY(${-scrollY * 0.5}px)`;
video.style.transform = `scale(${1.05 + progress * 0.15})`;
content.style.opacity = (1 - progress * 2).toString();
nav.style.opacity = (1 - progress * 3).toString();

Este enfoque permite crear animaciones suaves sin depender de librerías pesadas.

---

⚙️ Personalización

Puedes modificar fácilmente diferentes partes del hero.

1. Cambiar el video

Reemplaza el archivo public/assets/sea-waves.mp4 por cualquier video optimizado para web.

2. Agregar secciones

Dentro de Hero.astro:

<Layout>
  <Hero />
  <OceanSection />

  <!-- Agrega más secciones aquí -->
</Layout>

3. Ajustar velocidad del scroll

En la configuración de Lenis:

const lenis = new Lenis({
  lerp: 0.1,
});

Valores menores producen un scroll más suave.

---

🚀 Scripts Disponibles

Comandos comunes utilizando pnpm:

Comando	Acción
pnpm install	Instala todas las dependencias del proyecto
pnpm dev	Inicia el servidor de desarrollo en localhost:4321
pnpm build	Genera el sitio optimizado en /dist
pnpm preview	Previsualiza la build de producción

---

📋 Requisitos

• Node.js (Versión 18 o superior).
• Gestor de paquetes (pnpm recomendado, npm o yarn).

---

Desarrollado con ❤️ por isnaroa