Cool and inspiring code demos we’ve featured in our newsletter over the past few weeks. We’ve been spotlighting some fun, cool, and wonderfully weird code experiments in our recent newsletters, so we decided to round them all up in one place. Featuring nice animations, GSAP magic, and WebGL/Three.js goodness, these demos are exactly the kind […]
Some Recent Creative & Fun Coding Experiments Read More »
Why Create a Personal Portfolio? Considering I am already the co-founder of Overpx studio, this is a question many might ask. The reasons are mainly two: 1. The need for a personal space: from 2008 to 2014 I had a blog, fedeweb.net, where I used to write articles about WordPress, JavaScript, Gimp (does it still
Case Study: Federico Pian Portfolio — 2024 Read More »
This project demonstrates a custom jitter shader inspired by the visual style of PS1-era games. The shader replicates the nostalgic ‘jitter’ effect, adding a retro aesthetic to 3D models—perfect for developers looking to add a retro feel to low-poly projects. I’ve always found PS1 games fascinating. Inspired by their nostalgic 3D environments, I decided to
How to Create a PS1-Inspired Jitter Shader with React-Three-Fiber Read More »
In this tutorial, you will learn how to create a pixel/grid displacement effect using Three.js, enhanced with shaders and GPGPU techniques. The guide covers the application of a subtle RGB shift effect that dynamically responds to cursor movement. By the end, you’ll gain a solid understanding of manipulating textures and creating interactive visual effects in
Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders Read More »
Threepipe is a new framework for creating 3D web applications using JavaScript or TypeScript. It provides a high-level API built on top of Three.js, offering a more intuitive and efficient way to develop 3D experiences for the web. Threepipe comes with a plugin system (and many built-in plugins), making it easy to extend functionality and integrate various
Interactive 3D Device Showcase with Threepipe Read More »
A set of twelve free 3D animations created with React Three Fiber and GSAP. Today we have something special for you: 12 awesome animated 3D objects that you can use for free in your projects. Created with React Three Fiber and GSAP, these animations are easy to integrate and perfect for adding a bit of
Origami: 12 Free Animated 3D Objects Read More »
Introduction Designing and developing a portfolio is a tough challenge for any designer or developer, and doing so while juggling client projects is even more demanding. It often means working long nights and weekends, constantly questioning whether your concept effectively showcases your vision and skills. For me, it was no different. I had to go
Case Study: Rogier de Boevé Portfolio — 2024 Read More »
With shaders, we can, with just a few lines of code, a bit of math, and a lot of experimenting and trial and error success, create amazing stuff. In this tutorial, I’m going to show you my setup and how I got an interesting distortion and grain effect working on scroll using shaders in Three.js.
How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js Read More »
I’ve always been fascinated by shaders. The idea that pieces of code can create some of the most awe-inspiring visuals you see in video games, movies, and on the web has driven me to learn as much as I can about them. During that journey, I came across a video by Inigo Quilez called Painting
How to Create a Liquid Raymarching Scene Using Three.js Shading Language Read More »
In this tutorial we are going to explore the possibilities of creating a custom material using shaders based on built-in Three.js materials with React Three Fiber. Overview We will learn: How to hook into a built-in Three.js material to modify it the way we want How to displace vertices of a mesh to get a
Creating an Animated Displaced Sphere with a Custom Three.js Material Read More »
