Fitworld

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.

Qué incluye

• 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)

La 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.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/fitworld/. 6 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.