SeasonScape

Key Metrics

Overview

SeasonScape is a luxury travel discovery platform covering India's five travel seasons (Summer, Monsoon, Winter, Spring, and Autumn). Spanning 25 distinct client-side routes, the project translates a static Figma design into a living, scroll-driven experience using advanced GSAP ScrollTrigger APIs, custom React hooks for SplitText animations without paid plugins, and a deterministic client-side recommendation engine for natural-language trip planning.

Problem

Translating a complex, professional Figma design into a fully interactive React application while maintaining clean component boundaries, preventing React 18 DOM reconciler conflicts with GSAP SplitText animations, and delivering intelligent trip recommendations without relying on backend infrastructure.

Solution

Engineered a 25-route SPA using React 18 and React Router 6, featuring pinned season-morphing scroll timelines, horizontal card galleries using containerAnimation, an SVG circuit route draw, a safe useSplitText React hook using useLayoutEffect, and a client-side NLP scoring engine for natural-language budget and preference parsing.

Architecture

Pure client-side Single Page Application (SPA) built with React 18, Vite 6, and TypeScript 5. State management and routing are powered by React Router 6 with URL query parameters for shareable search filters. GSAP handles scroll-driven storytelling and page transitions, while a typed static data layer under src/app/lib/ fuels all 25 content routes without backend latency.

Challenges

• Handling GSAP DOM mutations (SplitText) within React 18's reconciler without triggering removeChild errors.
• Implementing nested scroll contexts where vertical scrolling drives horizontal card movement via GSAP containerAnimation.
• Drawing complex SVG circuit routes synchronized to scroll position using strokeDashoffset and dynamic getTotalLength() calculations.
• Building a free, React-safe custom SplitText implementation without GSAP Club paid plugins.
• Maintaining URL-driven filter state across disconnected components using useSearchParams.
• Preventing forced reflows and pin offset errors by deferring ScrollTrigger.refresh() via requestAnimationFrame.

Lessons Learned

• Safe DOM manipulation in React 18 using useLayoutEffect and strict cleanup functions (ctx.revert()).
• Advanced GSAP ScrollTrigger techniques including pinned master timelines and containerAnimation.
• Faithful design-to-code implementation practices from Figma prototypes.
• Using the browser URL as the primary source of application filter state.
• Building deterministic client-side NLP and weighted scoring algorithms for AI prototypes.
• Performance optimizations for animation-heavy static SPAs.

Future Improvements

• Migration to Next.js App Router with per-slug Static Site Generation (SSG) for enhanced SEO.
• Headless CMS integration (Sanity or Contentful) for dynamic content editing.
• Server-side AI trip planner powered by vector embeddings and cosine similarity.
• Route-level code splitting using React.lazy() and Suspense to shrink bundle size.
• Real authentication, wishlist persistence, and Razorpay/Stripe payment gateway integration.
• Accessibility enhancements including prefers-reduced-motion media query guards.