🔥 Only 4.1MB! - Small, Lightweight, Highly Performant three.js/R3F/Drei Portfolio Website

URL: https://apps.praxxys.global/

Video URL


We are a digital agency based in the Philippines :philippines:. One of the main challenges in South East Asia and other developing countries is that mobile internet is painfully slow/unreliable, and wifi is not too great outside the city centers.

Hence, our goal was to create a small, lightweight, highly performant yet visually appealing three.js experience to showcase a few projects from our portfolio. After all, what good is an experience that just gets stuck at the loading screen :confused:

We are very pleased with the results, particularly as the performance freaks we are, as we have been able to trim down the entire base experience to 4.16 MB (gzipped) :fire: which performs extremely well even on lower-end devices.

Our long term goal is to make three.js experiences more accessible to the internet-underprivileged.

Website Features

  • Ultra-lightweight base experience only at 4.16 mb (gzipped)
  • Highly performant, runs at 30+ fps even on lower-end devices
  • Minimal dependencies, powered only by three.js, R3F, drei, and GSAP.

Featured Sections

Landing Section

  • Meet our main protagonist, the iPhone, which tells the story throughout the experience.
  • We see some instanced mesh triangles flying about with a bit of randomization, animated via (a pretty long) Catmull-Rom curve.
  • Then we see the logo rendered in drei’s MeshTransmissionMaterial

Portfolio Section

  • We see logos of some of our present and past clients behind our company motto: Make it Happen

Featured Project: Kawasaki

  • Say hello to Kawasaki Ninja 250 as well as a global map rendered via map/alphaMap textures

Featured Project: Philippines LRT 1 Train Ride

  • Experience a simulated train ride in Metro Manila’s LRT1 line, feel free to ride again!

Featured Project: Nature’s Spring Ecommerce

  • Walkthrough the entire app experience and say hello once again to Kawasaki Ninja

Ending Frame

  • Open a magical portal to another galaxy
  • The “sigil” is made up of the symbols of the sun, all of the major planets, and 16 minor planets of the solar system
  • For the glow effect, unfortunately Unreal Bloom was too expensive to use so we ended up using textures/alphaMap cheat codes instead, still looks pretty decent!
  • We rewrote the old lightning example in three.js docs into ES6 to be able to use it in this scene
  • The galaxy scene is something inspired from a lesson from Three.js Journey by Bruno Simon. We added a few mouse interactions to the vertex and fragment shaders to simulate warping space time.

Overall, we’re happy with the results, since we feel that we have been able to achieve the goal of making three.js experiences more accessible by making them load extremely fast (4.16 mb!) and perform well, framerate-wise, even on older devices, all while making it still look pretty decent.

Any feedback is very much appreciated! Especially on how to trim performance even further :+1:

Do let us know what you think and we hope that we can all work together to make more accessible three.js experiences for the global community.

  • John, PRAXXYS Team

Near perfect score on Google Lighthouse :star_struck:

But to be fair this was taken on Mac Mini M2 so YMMV :sweat_smile:

Nice website!

I got stuck loading Nature’s Spring Experience though, there was no error in the console, the last message was: `video (ns-rider-30.webm) buffering…

Hi @raaaahman, thanks so much for the feedback!

Since we want to keep the base experience as lean as possible, the assets for the sub experiences are loaded once you click the Start button.

The experience timeline fires when all assets are loaded so I suppose something just got stuck loading or could have been a network issue.

Perhaps we can add a progress indicator for better UI. Let me know if the issue persists! :pray:

looks good but what i found distracting when loading in on my primary display is all the text at the far right hand side of the screen waiting to be brought into focus as you scroll to the topics


this screen is 3440x1440 and I noticed the text is not visible when I shrink the size of the window