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

Details

Title
A React Three Fiber Portfolio That's Fluid
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

Enjoyed it? Pass it on.

Sharing is the simplest way to thank a maker. Your post credits Maxi Ruti.

Post it on

Copy post text

If a composer opens empty, copy this text. For long posts, split it across posts and keep every maker’s credit.

WebGL / WebGPU

A home for the cross-platform GPU community. Independently run, open to contribution.

CommunityNewsProfiles
AboutAboutLegalSite index

An independent community site, not affiliated with The Khronos Group or the W3C.