How it works. The Flowmap utility from OGL tracks the mouse speed and stocks it in an off-screen RG texture for each frame. The shader samples this texture to distort the text's UV coordinates and applies a directional form of chromatic aberration, which shifts the RGB channels based on the vector from the cursor to the pixel.

// Directional chromatic aberration: not centered, guided by cursor
vec2 toMouse = vUv - uMouse;

float influence =
    smoothstep(uRadius, 0.0, length(toMouse)) * uVelo;

vec2 offset =
    normalize(toMouse) * influence * uChromaticIntensity;

// RGB split sampling
float r = texture2D(tWater, baseUV - offset * 1.5).r;
float g = texture2D(tWater, baseUV + offset * 0.5).g;
float b = texture2D(tWater, baseUV + offset * 1.8).b;

// Rainbow kick when velocity is high: sin() with 120° phase offsets
if (uVelo > 0.01) {
    float hueShift =
        uTime * 0.01 + length(toMouse) * 2.0;

    r = mix(
        r,
        sin(hueShift) * 0.5 + 0.5,
        uVelo * uColorShift
    );

    g = mix(
        g,
        sin(hueShift + 2.094) * 0.5 + 0.5,
        uVelo * uColorShift
    );

    b = mix(
        b,
        sin(hueShift + 4.188) * 0.5 + 0.5,
        uVelo * uColorShift
    );
}

The rainbow effect relies on a classic method using three sin() functions, offset by 2π/3 radians. It activates only when the cursor is moving quickly, maintaining visibility during rapid movement while remaining subdued during steady pauses.

One-time mount, texture swapping. This optimization is one of my proudest achievements. My initial version created a new WebGL context for each project title, which was clear in React but disastrous for performance. GPU memory usage spiked, and the rainbow effect became choppy by the fourth hover. The revised approach retains a single FlowmapEffect mounted at the HomePage level, allowing texture swapping without creating new contexts. Coupled with an idle guard that halts the rendering loop after 90 frames of inactivity, this method significantly cuts resource costs during idle moments.

Next-Project Scroll Morph

Scrolling to the bottom of each project page unveils the "Next Project" preview, which expands and reveals a clipped background, while an SVG circle tracks a progression from 0% to 100%. When the circle hits 100%, the page navigates automatically; scrolling back up cancels the navigation.

How it works. A single ScrollTrigger with scrub: 1 orchestrates the entire animation, updating four DOM values each frame through its onUpdate callback—bypassing React's state management to maximize performance.

onUpdate: (self) => {
  const progress = self.progress;
  const percent = Math.round(progress * 100);

  // Counter
  numberEl.textContent = String(percent >= 99 ? 100 : percent);

  // Background morph: scale + inset clip-path
  const bgScale = 1.3 - 0.3 * progress;

  const insetV = Math.max(0, 20 - 20 * progress);
  const insetH = Math.max(0, 40 - 40 * progress);

  bgEl.style.transform = `scale(${bgScale})`;
  bgEl.style.clipPath = `inset(${insetV}% ${insetH}% ${insetV}% ${insetH}%)`;

  // SVG progress circle
  circleEl.style.strokeDashoffset =
    String(CIRCUMFERENCE - progress * CIRCUMFERENCE);

  // Auto-navigation check
  if (percent >= 100 && state === "idle" && hasSeenLowProgress) {
    // trigger page change
  }
};

This direct manipulation of element.style.* avoids the overhead of a full React render for each frame. On a 120 Hz display, this distinction translates to fluid motion versus stuttering.

A state machine to handle scroll unpredictability. The automatic navigation isn't simply based on reaching 100%—users might flick scroll through this section, land on a fragment at 100%, and then change their minds. I implemented a three-state machine (idle → triggered → navigating), complete with guard clauses like hasSeenLowProgress to prevent accidental triggers.

Identical animations, dual triggers. Interestingly, the section doubles as a clickable area. Clicking activates a GSAP tween that transitions from the existing scroll progress to 1 while scrolling the page simultaneously to match the animated states. This maintains consistency in DOM manipulation, yielding the same visual effect from two different triggers.

Page Transitions (GSAP + View Transitions)

Exiting the homepage isn’t jarring; elements such as the WebGL backdrop, grid overlay, side texts, and custom cursor fade out together. After a brief pause, the content layer fades out before the browser's View Transition API takes over for the final effect.

Preload speeds up the fadeout. Upon clicking a link, two processes initiate simultaneously: the visual fadeout alongside data fetching. The dynamic import() of the next route’s JavaScript chunk, coupled with preloading the hero image, commence before GSAP executes any frames. By the time the timeline completes (approximately 0.6 seconds), both tasks typically finalize.

// Begin preloads immediately: they race GSAP fadeout
const chunkReady = chunkPreloaders[routeChunk]().catch(() => {});
const imageReady = project?.heroImage
  ? preloadImage(project.heroImage)
  : Promise.resolve();

// Sequential fadeout, parallel with network operations
const tl = gsap.timeline();

tl.to(
  [webglBg, gridOverlay, sideTexts, customCursor],
  { opacity: 0, duration: 0.3, ease: "power2.inOut" },
  0
).to(
  contentEl,
  { opacity: 0, duration: 0.35, ease: "power2.inOut" },
  0.25
);

await tl.then();
await Promise.all([chunkReady, imageReady]);

await startPageTransition(() => {
  flushSync(() => {
    navigate(path);
  });
});

flushSync is the key to the View Transition functionality. The method document.startViewTransition allows for capturing the DOM state before making changes. React Router’s navigate() function runs asynchronously, which can interfere with the View Transition process if not handled properly. Wrapping it in flushSync ensures that React renders the new route synchronously within the transition callback, resolving a common bug that can disrupt the experience.

Text Reveal: A Unified Technique

Throughout the site, a consistent text reveal strategy is employed: using GSAP’s SplitText for character or line organization, coupled with a scramble effect to bring characters into view, layered with a clip-path wipe. Centralizing this logic into a single utility allows any adjustments to the animation curve to ripple through the entire site.

Concurrent effects instead of sequential. When a line scrambles from random characters to its final form, the left edge resolves first. Implementing a clip-path reveal from left to right at the same speed maintains visual coherence, so users only see the part of the text that is already readable.

gsap.to(lineEl, {
  duration,
  ease: "none",
  scrambleText: {
    text: lineText,
    chars: SCRAMBLE_CHARS,
    revealDelay,
    speed,
  },
  onStart: () => {
    // The wipe runs concurrently with scrambling
    gsap.to(lineEl, {
      clipPath: "inset(0 0% 0 0)",
      duration: 0.6,
      ease: "power2.out",
    });
  },
});

This strategy ensures a smooth transition without layout disruption during the reveal.