AirPods Pro 2 Hero Animation Clone

📋 Descripción

Proyecto de aprendizaje centrado en la recreación de la animación del hero de AirPods Pro 2 de Apple, con foco en animaciones avanzadas con GSAP y sincronización con scroll.

🔗 Demo: https://airpods-animation-eight.vercel.app/

⚖️ Aviso legal: Proyecto sin fines comerciales. Las imágenes, recursos visuales y marcas pertenecen a Apple Inc. y se usan exclusivamente con fines de práctica y aprendizaje.

🛠️ Tecnologías

• Astro
• GSAP + ScrollTrigger
• Canvas API
• HTML5 y CSS3

✨ Funcionalidades

• Animación de secuencia de imágenes en Canvas sincronizada con el scroll.
• Header dinámico con comportamiento de ocultación durante el desplazamiento.
• SubNav con efecto blur y cambio de fondo en función del scroll.
• Animaciones de entrada en la carga inicial de la página.
• Diseño responsive con fidelidad visual respecto a la referencia original.
• Precarga de 65 frames para mejorar fluidez y rendimiento.

🗂️ Estructura del proyecto

/
├── public/
│   └── images/             # Secuencia de 65 frames
├── src/
│   ├── components/
│   │   ├── Header.astro    # Navegación principal y SubNav
│   │   ├── Hero.astro      # Hero principal con Canvas
│   │   └── SubNav.astro    # Navegación secundaria
│   └── pages/
│       └── index.astro     # Entrada principal
└── package.json

📦 Instalación y desarrollo

git clone https://github.com/Fr4n0m/airpods-animation.git
cd airpods-animation
npm install
npm run dev

Disponible en http://localhost:4321.

📜 Scripts disponibles

Comando	Descripción
npm run dev	Servidor de desarrollo
npm run build	Build de producción en dist/
npm run preview	Sirve localmente el build

🎯 Objetivo del proyecto

Desarrollado con fines formativos para profundizar en:

• GSAP Timelines y coordinación de animaciones.
• ScrollTrigger con scrub para interacción ligada al scroll.
• Renderizado de secuencias de imágenes con Canvas.
• Estrategias de precarga para minimizar parpadeos.
• Optimización de animaciones para mantener una experiencia fluida.

🤝 Contribuciones

1. Haz un fork del repositorio.
2. Crea una rama descriptiva (feature/nombre-cambio).
3. Mantén el estilo del proyecto y verifica que todo funcione.
4. Abre la PR con una descripción clara de lo que cambia y por qué.

📄 Licencia

El código fuente se distribuye bajo licencia MIT. Los recursos visuales y marcas pertenecen a sus respectivos propietarios.