Eclipse AFK
Cinematic Interactive 3D Developer Portfolio Experience
Overview
Eclipse AFK is Hemanath's portfolio showcase, combining advanced WebGL rendering, 3D animations, and a search-optimized DOM overlay.
Problem Statement
Most 3D WebGL portfolios are invisible to search engines and AI agents because the text is embedded inside a canvas element, leading to low ranking metrics.
Our Solution
Eclipse AFK solves this by layering a search-engine crawlable HTML5 DOM overlay exactly below the WebGL canvas. A custom scroll script coordinates GSAP camera movements in 3D space with DOM text fades, providing a premium visual experience that remains fully crawlable by bots.
Detailed Technology Stack
Next.js
Routing controls and static rendering configurations.
Three.js & R3F
Volumetric lighting, shaders, and 3D canvas models.
GSAP
Scroll position tracking and camera path interpolation.
Framer Motion
Transitions and neumorphic tactile clicks.
Key Operational Features
WebGL Scene Parallax: Interactive particle loops and 3D camera shifts.
Crawlable DOM Overlay: Structured texts fully visible to web crawlers.
Scroll Choreography: GSAP timelines mapping scroll percentages to camera Z vectors.
Pebble UI styling: Sand-toned glassmorphism cards and clean Outfit typography.
Engineering Challenges Solved
Keeping WebGL renders at 60 FPS while running CSS animations: Solved by moving heavy calculations into useFrame loops, using CSS transition transforms, and avoiding page layout reflows.
Making Three.js canvas data crawlable: Solved by placing complete semantic HTML structures in the DOM overlay, mapping every WebGL element to a crawlable text node.
Outcome & Project Results
“ Delivered a premium 3D creative site that achieves a 100/100 Lighthouse SEO score and remains fully indexable by search engines. ”