Building an Interactive 3D Portfolio with Next.js 16, React Three Fiber, and GSAP

1. The Creative Engineering Dilemma

Modern engineering portfolios often face a strict trade-off: flashy 3D interactions that drag down Lighthouse performance, or static pages that lack memorable impact.

When rebuilding mothilal.dev, the objective was uncompromising: maintain 100/100 SEO and 95+ Core Web Vitals while rendering an interactive 3D WebGL particle field and custom GSAP scroll choreography.

2. Lazy-Loading Three.js via Client Boundaries

Three.js and React Three Fiber are heavy libraries (~600KB+ uncompressed). If included in the main bundle, First Contentful Paint (FCP) and Largest Contentful Paint (LCP) suffer severely.

By dynamic-importing the 3D scene canvas with ssr: false, the initial server-rendered HTML streams immediately with pure HTML/CSS. The WebGL context only mounts after the critical rendering path is clear.

import dynamic from "next/dynamic";
import { SceneFallback } from "./SceneFallback";

export const HeroSceneLoader = dynamic(
  () => import("./HeroScene").then((m) => m.HeroScene),
  {
    ssr: false,
    loading: () => <SceneFallback />,
  }
);

3. Synchronizing Lenis Smooth Scroll with GSAP Ticker

One of the biggest causes of visual stutter in animated websites is conflicting scroll physics between smooth-scroll libraries and GSAP ScrollTrigger.

Driving Lenis directly inside the GSAP global ticker eliminates synchronization lag, ensuring pinned sections and card-deck stacks scrub at a rock-solid 60/120 FPS.

useEffect(() => {
  const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
  lenis.on("scroll", ScrollTrigger.update);

  const update = (time: number) => {
    lenis.raf(time * 1000);
  };
  gsap.ticker.add(update);
  gsap.ticker.lagSmoothing(0);

  return () => {
    gsap.ticker.remove(update);
    lenis.destroy();
  };
}, []);

4. Respecting Reduced Motion Preferences

Accessibility is paramount. All motion, cursor-following repulsion, and text-reveal splitters are wrapped in gsap.matchMedia with (prefers-reduced-motion: no-preference). Users with vestibular disorders receive clean, instantly readable static layouts with native scrolling.

5. Search Engine Optimization & Generative AI Indexing

Beyond visual flair, the site includes comprehensive JSON-LD graphs (Person, FAQPage, ItemList), Dublin Core metadata, geographic tags, and an llms.txt endpoint. This ensures search engines like Google and Bing as well as AI answer engines like Perplexity can parse and cite the portfolio accurately.