Back to Selected Work
Creative FrontendHyperion Design Lab • 3 Months (2025)
Hyperion Interactive Design Showcase
Editorial creative agency digital experience featuring pinned horizontal reels and interactive 2D canvas particle dynamics.
The Engineering Challenge
Combining heavy interactive canvas graphics, scroll-linked video playback, and typography transitions without triggering memory leaks or layout jank on low-end mobile devices.
The Architectural Solution
Eliminated heavy WebGL dependencies by writing a lightweight 200-line 2D HTML5 canvas particle engine powered by standard vector math.
Key Architectural Decisions
Pure CSS 3D perspective transforms with mouse tilt matrix math for zero GPU context loss.
Dynamic asset preloader loading next-section images on background idle callbacks.
Custom cursor spatial proximity interaction recalculating magnetic pull vectors at 60Hz.
Responsive typography scale powered by fluid CSS clamp() equations.
Figma Design Spec vs. Live Rendered Code
Live Next.js Output
Figma Spec Canvas
Quantifiable Metrics & Impact
4m 12s
Average user engagement time per session, 3x industry standard.
Awwwards SOTD
Recognized for outstanding creative direction and frontend craftsmanship.
100%
Accessibility compliance score with full screen-reader keyboard fallback support.
Technology Stack & Bundle Footprint
React 19
GSAP & ScrollTrigger
Framer Motion
HTML5 Canvas 2D