Fitworld

Fitworld is an editorial wellness and botanical beauty template for skincare brands, spas, and slow-living studios. Six pages cover a long-form homepage, brand story with founder profile and values grid, a four-product ritual catalog, a journal with an interactive category filter, six full article pages, and contact. The hero runs a scrubbed ScrollTrigger timeline: an animated SVG fractalNoise grain overlay fades to zero while the photo parallaxes back and scales to 0.92, the fog literally clears as you scroll. Three data-skin themes (stark white, warm dusk cream, dark night) swap every token from one attribute. Built on Astro 6, React 19, Tailwind v4 and a shared GSAP system with SplitText line and word reveals, clip-path image reveals, magnetic buttons, and Lenis smooth scroll.

What’s inside

• 6 routes, Home, About, Products, Journal, Journal Article (6 posts), Contact
• Fog-dissolve hero, scrubbed ScrollTrigger timeline fades the grain overlay to 0 while the image parallaxes -30% and scales to 0.92
• 3 color skins swapped by a single data-skin attribute, Default white #FFFFFF, Dusk cream #FAF0E6, Night dark #0E0E0C
• Shared GSAP animation system in BaseLayout, SplitText line and word reveals, blur reveals, stagger groups, parallax, and scroll-progress CSS variables
• Clip-path image reveals, inset(100% → 0%) wipe paired with a 1.3 → 1 image scale on every feature row
• Magnetic buttons, data-magnetic tracks the cursor and springs back with elastic.out(1, 0.5)

The signature

The hero is a fog-dissolve. A scrubbed ScrollTrigger timeline (scrub: 1.5) fades an animated SVG fractalNoise grain overlay to zero while the background photo drops its opacity, parallaxes -30% and scales down to 0.92, the mist clears and the image recedes as the headline rises through it and dissolves. Underneath, the photo runs a 20-second yoyo Ken Burns loop, and five floating decorative marks drift at independent parallax speeds set per element with data-float-speed.

See it live

The demo is public: https://fpsjago.github.io/fitworld/. 6 pages, built with Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.