Fitworld

About This Template

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.

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.

Features

• 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)
• Velocity-aware logo marquee — ScrollTrigger getVelocity() boosts the tween timeScale up to 4× while you scroll
• Interactive journal filter — React state plus a GSAP fade-out/stagger-in card swap and an animated indicator pill
• Shimmer border on the pricing card — CSS @property --shimmer-angle animating a conic-gradient on hover
• Hide-on-scroll-down navbar driven by a ScrollTrigger onUpdate direction check
• Lenis smooth scroll (1.2s duration, wheelMultiplier 1.4) wired into the GSAP ticker with lagSmoothing(0)
• 22 Unsplash photos in src/assets optimized to WebP at build time via getImage() at quality 85
• Astro View Transitions (ClientRouter) with full ScrollTrigger, SplitText and Lenis teardown on every navigation
• prefers-reduced-motion honored in every component, plus a noscript fallback and a skip-to-content link
• SEO ready — @astrojs/sitemap, canonical URLs, Open Graph tags, robots.txt and llms.txt
• Conditional GA4 (loads only when PUBLIC_GA_ID is set) and TypeScript strict mode — zero any

Deployment