Directory // 02 — Research & Explorations

THE LAB

A transparent testing ground for prototypes, graphics shaders, animation mechanics, and architectural hypotheses. Not every experiment succeeds — the failures document valuable constraints.

lab-01 // 2026-02STATUS: Active

High-Frequency Cursor Physics via gsap.quickTo

Investigating performance differences between requestAnimationFrame mouse interpolation vs GSAP quickTo single-tween pipes.

HYPOTHESIS

Standard GSAP to() tweens invoked on every mousemove event cause memory churn and trigger unnecessary tween allocations. Reusing a single gsap.quickTo instance should eliminate garbage collection pauses.

KEY TAKEAWAYS & FINDINGS
  • →gsap.quickTo is significantly more memory-efficient for continuous 60fps tracking than recreating tweens.
  • →Must always gate custom cursor instantiation with `@media (hover: hover) and (pointer: fine)` to avoid breaking mobile touch interactions.
GSAP 3TypeScriptPerformance APIDOM
lab-02 // 2026-01STATUS: Experiment

Procedural Skybox Fog Shader for WebGL

Evaluating GLSL distance fog functions that blend horizon lines seamlessly into dynamic background skies.

HYPOTHESIS

A custom fragment shader calculating exp2 depth fog with a vertical horizon gradient can simulate realistic atmospheric haze with negligible fragment shader overhead.

KEY TAKEAWAYS & FINDINGS
  • →Exponential squared fog (`exp2(-density * depth * depth)`) looks significantly more natural than linear fog for low-poly horizons.
  • →Uniform updates must be throttled during camera movements to avoid CPU-to-GPU bus bottlenecks.
Three.jsGLSLWebGLShaderMaterial
lab-03 // 2025-11STATUS: Active

Zero-Dependency Print Engine for Web Invoices

Generating pixel-perfect PDF export invoices using CSS @media print and CSS Paged Media without Puppeteer or heavy client canvas PDF libraries.

HYPOTHESIS

Modern browser print engines (`window.print()`) combined with strict CSS page margin boxes and print color adjustment can produce production-grade invoices without 2MB+ PDF generation libraries like jsPDF.

KEY TAKEAWAYS & FINDINGS
  • →CSS `@media print` with `-webkit-print-color-adjust: exact` produces crisp vector text and eliminates external serverless PDF rendering workers.
  • →Must explicitly set `display: none !important` on global layout overlays (grain, noise, cursor, navbar) inside print stylesheets.
Next.jsCSS Paged MediaTypeScriptTailwindCSS
VIEW PROTOTYPE ↗
lab-04 // 2025-09STATUS: Failed

CSS Houdini Paint Worklet for Animated Brutalist Shards

Attempting to generate animated geometric refraction shards using CSS Paint Worklets instead of DOM elements.

HYPOTHESIS

Rendering background shards off the main thread via CSS Houdini Paint API would reduce DOM node count to zero while enabling 60fps procedural animations.

KEY TAKEAWAYS & FINDINGS
  • →CSS Houdini Paint API remains poorly supported across Safari/WebKit and Firefox, making it unsuitable for cross-browser production.
  • →A lightweight SVG polygon overlay or controlled GSAP DOM pool provides much more predictable rendering and full browser compatibility.
CSS HoudiniPaint APIJavaScript
lab-05 // 2025-08STATUS: Active

ScrollTrigger Normalization on Mobile WebKit

Diagnosing and fixing the iOS Safari URL bar resize jumping issue during ScrollTrigger pinned timelines.

HYPOTHESIS

Using ScrollTrigger.normalizeScroll(true) prevents mobile browser address bar collapse from re-evaluating viewport heights and triggering infinite resize loops.

KEY TAKEAWAYS & FINDINGS
  • →Always wrap GSAP animations in `gsap.context()` for idempotent cleanup during Next.js client-side route transitions.
  • →Skip smooth scroll libraries on touch devices; native inertial scrolling provides the best input responsiveness.
GSAP ScrollTriggerMobile WebKitTouch Events
lab-06 // 2025-06STATUS: Prototype

Multi-Octave 3D Simplex Cave Generator

Prototyping volumetric 3D noise carve-outs for subterranean cave systems in voxel worlds.

HYPOTHESIS

Evaluating 3D Simplex noise thresholding where `noise(x, y, z) > 0.4` hollows out stone blocks into natural subterranean tunnels.

KEY TAKEAWAYS & FINDINGS
  • →3D noise computation is an order of magnitude more expensive than 2D heightmap sampling.
  • →Volumetric terrain generation must be offloaded to Web Workers or compiled to WebAssembly to maintain interactive frame rates.
Simplex NoiseThree.jsVoxel EngineWeb Workers