Port Gravity
A high-performance interactive portfolio framework featuring native scroll storytelling.
Overview
The Problem
Most digital portfolios rely on heavy video files or simplistic scroll-jacking libraries that compromise performance and user experience.
The Solution
Port Gravity implements a custom requestAnimationFrame loop over an HTML5 Canvas to synchronously map 190 high-resolution image frames to native scroll vectors. This delivers silky smooth 120hz interaction without the typical DOM layout thrashing.
The Purpose
Built as an exploratory architecture piece to demonstrate that uncompromising aesthetic beauty can coexist with perfect Lighthouse performance metrics.
Technical
Architecture
Uses React Server Components where possible, isolating client-side motion layout exclusively to interaction nodes.
Decisions & Challenges
The primary challenge was managing memory. Fetching 190 high-resolution images synchronously crashed mobile browsers. The solution was implementing a chunked preloading strategy—prioritizing the first 5 frames for instant First Contentful Paint, then lazily batch-loading the rest with low fetchPriority.
Impact
Outcome Achieved
A 100/100 Lighthouse performance score across desktop and mobile, with zero dropped frames during active scroll.
Real World Relevance
Directly applicable to highly interactive enterprise landing pages, luxury brand showcases, and premium SaaS marketing.