Skip to content
A React Three Fiber Portfolio That's Fluid

A React Three Fiber Portfolio That's Fluid

Scroll and the work sloshes. Toggle and a carousel snaps into an alphabetized grid, the whole 3D scene graph rearranging while the DOM shadows it underneath. Maxi Ruti built it in React Three Fiber and wired reduced-motion in from the start, so the ambition ships without the spinner.

Details

Published

What it is

One toggle and the lazy carousel snaps into an alphabetized grid, the entire 3D scene graph rearranging while a 2D DOM layout shadows it underneath, the two locked together through a transition that has no business being this smooth. Watch the edges: a post-process distortion that swells depending on which layout you're in, a small optical tell that the thing is reacting to you.

Underneath, React Three Fiber carries the scene, custom shaders handle that physics-informed drift, and the post-processing pass bends the edges on cue. GSAP runs the choreography. The part worth pausing on: Maxi wired the whole thing around prefers-reduced-motion from the start, not as a bolt-on apology. Flip that OS setting and the site degrades on purpose, trading the fluid for a calm, legible layout that loses none of the work and none of the speed. That's the point. Ambitious 3D on the web doesn't have to ship with a spinner and a laptop fan working overtime. So pop it open, read the shaders, and browse the repo.

How it’s made

Technology
WebGL
Domain
Portfolio