STRIDE: Kinetic Preloader & View Transitions

stride/
├── src/
│   ├── app/
│   │   ├── layout.tsx             # Root layout & font definitions
│   │   ├── template.tsx           # React 19 native <ViewTransition> boundary
│   │   ├── page.tsx               # Home landing & Lenis lock sync
│   │   └── globals.css            # ::view-transition-old / ::view-transition-new
│   ├── components/
│   │   ├── Header/                # Shared luxury sticky navigation header
│   │   ├── Landing/               # Editorial showcase & interactive elements
│   │   ├── Lenis/                 # Smooth momentum scrolling provider
│   │   └── Preloader/
│   │       ├── index.tsx          # Dual-slot GSAP letter roll & exit staging
│   │       └── style.module.scss  # Overflow masking & responsive typography
│   ├── context/
│   │   └── PreloaderContext.tsx   # React context controlling ready state
│   └── hooks/
│       └── useIsMounted.ts        # SSR hydration safety guard
└── next.config.ts                 # experimental.viewTransition: true

// Dual-element character slot tumbling with parity-driven counter-rotation
const chars = gsap.utils.toArray<HTMLSpanElement>(`.${styles.char}`);

chars.forEach((char, i) => {
  const original = char.querySelector<HTMLDivElement>(`.${styles.originalText}`);
  const clone = char.querySelector<HTMLDivElement>(`.${styles.cloneText}`);
  if (!original || !clone) return;

  const isEven = i % 2 === 0;

  // Alternate initial offset so adjacent letters roll in opposite directions
  gsap.set(clone, {
    yPercent: isEven ? -100 : 100,
  });

  // Create infinite tumbling cycle per character
  const roll = gsap.to([original, clone], {
    repeat: LOOP_COUNT, // 8 continuous revolutions
    ease: "none",
    yPercent: isEven ? "+=100" : "-=100",
    duration: 1,
  });

  tl.add(roll, 0);
});

// Inertial kinetic deceleration scrubbing over the linear loop
gsap.to(tl, {
  progress: 1,
  duration: 4,
  ease: "power4.out", // Exponential spin-down settling into exact brand letters
  onComplete: () => {
    const exitTl = gsap.timeline();

    // 1. Text lifts out of masked viewport bounds
    exitTl.to(headingRef.current, {
      yPercent: -110,
      duration: 0.8,
      ease: "power4.inOut",
    })
    // 2. Fullscreen cream background curtain wipes upward
    .to(preloaderRef.current, {
      yPercent: -100,
      duration: 0.5,
      ease: "power4.inOut",
      onComplete: () => {
        // Discard preloader from render tree to unblock mouse interactions
        if (preloaderRef.current) {
          preloaderRef.current.style.display = "none";
        }
        onComplete?.(); // Notify PreloaderContext to unlock Lenis scroll
      },
    }, "-=0.4");
  },
});

// src/app/page.tsx - Synchronizing preloader completion with Lenis smooth momentum scroll
export default function Home() {
  const { isReady, setIsReady } = usePreloader();

  useEffect(() => {
    const handleLenis = () => {
      const lenis = (window as unknown as { lenis?: Lenis }).lenis;
      if (!isReady) {
        document.body.style.overflow = "hidden";
        if (lenis) lenis.stop(); // Freeze momentum during preloader
      } else {
        document.body.style.overflow = "";
        if (lenis) lenis.start(); // Restore buttery smooth scroll
      }
    };

    handleLenis();
    window.addEventListener("lenis-ready", handleLenis);

    return () => {
      document.body.style.overflow = "";
      const lenis = (window as unknown as { lenis?: Lenis }).lenis;
      if (lenis) lenis.start();
      window.removeEventListener("lenis-ready", handleLenis);
    };
  }, [isReady]);

  return (
    <main className={styles.page}>
      <Preloader onComplete={() => setIsReady(true)} />
      <Landing isReady={isReady} />
    </main>
  );
}

// next.config.ts - Next.js 16 native View Transition flag
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  reactCompiler: true,
  experimental: {
    viewTransition: true, // Integrates Next.js App Router with View Transition API
  },
};

export default nextConfig;

// src/app/template.tsx - React 19 ViewTransition boundary per route change
"use client";

import React, { ViewTransition } from "react";

interface TemplateProps {
  children: React.ReactNode;
}

export default function Template({ children }: TemplateProps) {
  return (
    <ViewTransition enter="page-enter" exit="page-exit">
      {children}
    </ViewTransition>
  );
}

/* src/app/globals.css - Pure CSS View Transition Pseudo-Elements */

/* 1. Freeze navbar in place across route transitions */
::view-transition-group(navbar) {
  animation: none;
  z-index: 100;
}

/* 2. Animate outgoing page snapshot */
::view-transition-old(.page-exit) {
  animation: 600ms cubic-bezier(0.75, 0, 0.1, 1) both page-out;
}

/* 3. Animate incoming page snapshot */
::view-transition-new(.page-enter) {
  animation: 600ms cubic-bezier(0.75, 0, 0.1, 1) both page-in;
}

@keyframes page-in {
  from {
    transform: translateY(15%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes page-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-8%);
    opacity: 0;
  }
}