A portfolio of project thumbnails that move with fluid, physics-like motion and reorganize between a carousel and an alphabetized grids.
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.
- Live Demo: https://www.maxiruti.com
- Source Code: https://github.com/maxrpark
- Author: Maxi Ruti (X, GitHub, LinkedIn)