El cliente solicitó una landing page interactiva para su campaña navideña de 2025, mostrando técnicas modernas de desarrollo web con animaciones avanzadas, gráficos 3D y optimización de rendimiento.
Astro + Tailwind
Ligero y de alto rendimiento100% SEO
Optimizado para buscadores<0.3s
First Contentful Paint
Resumen
Landing page construida para la floristería más conocida de Mataró. Este proyecto muestra técnicas avanzadas de desarrollo web incluyendo animaciones suaves, gráficos 3D interactivos y optimización de todos los assets para rendimiento y SEO.
Secciones Destacadas
Sección Hero
La sección hero incluye un carrusel de imágenes a pantalla completa con animaciones fluidas impulsadas por GSAP. El titular usa SplitText para un efecto de revelación letra a letra mientras el usuario hace scroll.
Sección Producto Principal
La sección del producto principal destaca la información del producto estrella con una imagen grande y de alta calidad que crece ligeramente al hacer scroll, creando un efecto visual dinámico y atractivo.
Sección Lista de Productos
Esta landing fue construida para mostrar los productos más populares de la temporada. Cada tarjeta de producto se anima al entrar en vista con un suave efecto de fade y slide mientras el usuario baja por la página.
Sección de Storytelling
Esta sección cuenta la historia de la marca con una combinación de texto e imágenes. El texto se revela con una animación activada por scroll, mientras las imágenes aparecen con fade para una narrativa cohesiva.
Carrusel Cuidar la Frèsia
Un carrusel con consejos para cuidar una Poinsettia. Creado con CSS puro y la función scroll-snap, proporciona una navegación fluida e intuitiva.
Sección Tarjeta de Regalo 3D
Esta sección incluye una tarjeta de regalo 3D interactiva que los usuarios pueden rotar y con la que pueden interactuar. Construida con React Three Fiber y el motor de física Rapier, proporciona una experiencia única y atractiva que destaca.
Detalles Técnicos
Para desarrolladores y mentes curiosas
Como en todos mis proyectos, el rendimiento y el SEO fueron las principales prioridades. La landing page alcanza una puntuación de rendimiento Lighthouse de 99+, con un First Contentful Paint (FCP) inferior a 0.3 segundos, gracias a la generación de sitios estáticos de Astro y el manejo optimizado de assets.
Animaciones Avanzadas
- Interacciones con GSAP: Animaciones suaves aceleradas por hardware con ScrollTrigger
- Revelación texto letra a letra: Animaciones de tipografía personalizadas con delays escalonados
- Animaciones basadas en transform: Sin layout thrashing para rendimiento a 60fps
- Estrategia de importación dinámica: Librerías de animación divididas por código
Escena 3D Interactiva
- Integración React Three Fiber: Tarjeta de regalo 3D en tiempo real con simulación de física
- Motor de física Rapier: Dinámica realista de cuerdas/bandas con restricciones de unión
- Materiales shader personalizados: Implementación MeshLine para renderizado de bandas texturizadas
- Posicionamiento 3D responsive: Cámara y objetos adaptados al viewport
Stack Tecnológico
- Astro 5.14 - Generador de sitios estáticos moderno con hidratación parcial
- React 19 - Componentes UI para islas interactivas
- TypeScript - Desarrollo con seguridad de tipos
- Tailwind CSS 4.1 - Framework CSS utility-first
- GSAP 3.13 - Librería de animación profesional con ScrollTrigger y SplitText
- React Three Fiber 9.4 - Three.js declarativo en React
- Rapier 2.2 - Simulación de física
Qué Aprendí
Encontrar ejemplos de casos reales de animaciones web avanzadas e implementaciones de gráficos 3D ha sido bastante difícil, ya que la mayoría de proyectos tienden a mantener estos detalles privados. Sin embargo, encontré recursos valiosos y casos de estudio que aportaron ideas sobre mejores prácticas y técnicas innovadoras.
Empecé creando un conjunto complejo de animaciones y transiciones con GSAP, pero eliminé partes del código para mantener una experiencia limpia y de alto rendimiento centrada en las interacciones clave que mejorarían la experiencia del usuario sin abrumarlo.
El resultado final es un equilibrio entre atractivo visual y rendimiento.
Enlaces
