Tao Tajima's WebGL portfolio website showing a folding paper transition effect between film project thumbnails, built with Three.js and custom GLSL shaders by Yuichiroh Arai at Homunculus Inc.
If you haven't seen Tao Tajima's portfolio yet, do yourself a favor and go scroll through it right now. Tao Tajima is a director and filmmaker working with Tokyo visual design studio TANGRAM, and his portfolio site is built around this incredibly satisfying infinite scroll mechanic. The transitions between work pieces feel like folding paper, with images bending and flowing into each other as you navigate. It's one of those sites that makes you want to just keep scrolling to watch the effect happen again.
The development was handled by Yuichiroh Arai at Homunculus Inc., and the technical execution is delightfully elegant. What looks like a complex 3D mesh morphing is actually a clever fragment shader illusion. Rather than deforming geometry, it uses a flat plane covering the viewport with UV-based texture blending and offset calculations. The infinite scroll behavior comes from splitting the scroll position into fractional and integer parts, so the transition loops smoothly regardless of how fast or far you scroll. Yuri Artiukh did a great deconstruction breaking down the shader math if you want to dig into the specifics.
For the filmmaker, you can find Tao Tajima on Facebook and Vimeo. The developer Yuichiroh Arai maintains a personal site with more WebGL experiments, and he's active on Twitter in both Japanese and English. His GitHub has some useful GLSL modules including rotation matrices and HSV conversions.
- Live Demo: https://taotajima.jp
- Author(s):