Ruya Studios
Cinematic digital agency website and branding showcase.
A next-generation showcase site for Ruya Studios design agency. Features custom interactive WebGL fluid simulations, GSAP page transitions, and progressive asset preloading.
01 The Challenge
Maintaining 60FPS with WebGL Physics
Visual agencies demand immersive interactions like WebGL fluid simulations. However, running math-heavy WebGL physics pipelines on mobile devices causes severe stutter and rapid battery drain.
02 The Solution
Adaptive Render Loops & Canvas Sizing
We engineered an adaptive render engine that dynamically scales viewport resolution based on CPU thread capacity. On mobile viewports, the fluid physics compute grid is optimized to preserve a smooth 60fps frame rate without heating the device.
We also created custom scroll-bound GSAP animations that animate agency project cards using transform matrices, bypassing CSS layout recalculations entirely to keep animations hardware-accelerated.
03 Engineering Stack
Next.js
Optimized core layouts, server-side structure, and fast edge routing.
WebGL / Three.js
Cinematic home page shader math, fluid physics rendering, and interaction grid.
GSAP
Complex page routing swipe animations, letter scramble loops, and scroll offsets.
04 Interface Showcase
