Fitworld

Sobre Este Template

Fitworld es una plantilla editorial de wellness y belleza botánica para marcas de skincare, spas y estudios de slow living. Seis páginas cubren un homepage long-form, historia de marca con perfil de fundadora y grilla de valores, un catálogo de cuatro productos, un journal con filtro de categorías interactivo, seis artículos completos y contacto. El hero corre un timeline de ScrollTrigger con scrub: un overlay de grano SVG fractalNoise se desvanece a cero mientras la foto hace parallax hacia atrás y escala a 0.92 — la niebla se disipa literalmente con el scroll. Tres skins vía data-skin (blanco puro, crema cálido dusk, oscuro night) cambian todos los tokens desde un solo atributo. Sobre Astro 6, React 19, Tailwind v4 y un sistema GSAP compartido con reveals de líneas y palabras con SplitText, reveals de imagen con clip-path, botones magnéticos y smooth scroll con Lenis.

Firma

El hero es un fog-dissolve. Un timeline de ScrollTrigger con scrub: 1.5 lleva a cero un overlay animado de grano SVG fractalNoise mientras la foto de fondo baja su opacidad, hace parallax -30% y escala a 0.92 — la niebla se disipa y la imagen retrocede mientras el titular sube a través de ella y se desvanece. Debajo, la foto corre un loop Ken Burns yoyo de 20 segundos, y cinco marcas decorativas flotantes se desplazan a velocidades de parallax independientes definidas por elemento con data-float-speed.

Características

• 6 rutas — Inicio, About, Productos, Journal, Artículo de Journal (6 posts), Contacto
• Hero fog-dissolve — timeline de ScrollTrigger con scrub que lleva el overlay de grano a 0 mientras la imagen hace parallax -30% y escala a 0.92
• 3 skins de color que cambian con un solo atributo data-skin — Default blanco #FFFFFF, Dusk crema #FAF0E6, Night oscuro #0E0E0C
• Sistema de animación GSAP compartido en BaseLayout — reveals de líneas y palabras con SplitText, blur reveals, grupos con stagger, parallax y variables CSS de progreso de scroll
• Reveals de imagen con clip-path — barrido inset(100% → 0%) junto a un escalado de imagen 1.3 → 1 en cada fila de features
• Botones magnéticos — data-magnetic sigue el cursor y vuelve con elastic.out(1, 0.5)
• Marquee de logos sensible a la velocidad — getVelocity() de ScrollTrigger sube el timeScale del tween hasta 4× mientras haces scroll
• Filtro de journal interactivo — estado de React más swap de cards con fade-out/stagger-in en GSAP y pill indicador animado
• Borde shimmer en la card de precios — @property --shimmer-angle de CSS animando un conic-gradient en hover
• Navbar que se oculta al bajar, controlado por un onUpdate de ScrollTrigger que detecta la dirección
• Smooth scroll con Lenis (duración 1.2s, wheelMultiplier 1.4) conectado al ticker de GSAP con lagSmoothing(0)
• 22 fotos de Unsplash en src/assets optimizadas a WebP en build con getImage() a calidad 85
• View Transitions de Astro (ClientRouter) con teardown completo de ScrollTrigger, SplitText y Lenis en cada navegación
• prefers-reduced-motion respetado en cada componente, más fallback en noscript y skip link al contenido
• Listo para SEO — @astrojs/sitemap, URLs canónicas, tags Open Graph, robots.txt y llms.txt
• GA4 condicional (solo carga si PUBLIC_GA_ID está definido) y TypeScript en modo estricto — cero any

Despliegue