Showcase

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.

A portfolio of project thumbnails that move with fluid, physics-like motion and reorganize between a carousel and an alphabetized grid.

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. Watch the edges: a post-process distortion swells depending on which layout is active, a small optical tell that the thing is reacting to you.

Underneath, React Three Fiber carries the scene, custom shaders handle the physics-informed drift, and the post-processing pass bends the edges on cue. GSAP runs the choreography while the reduced-motion path trades the fluid work for a calm, legible layout.

Launch Demo
  • Live Demo: https://www.maxiruti.com
  • Source Code: https://github.com/maxrpark
  • Author: Maxi Ruti