Clouds: A little UI meets 3D experiment

For quite some time, I've pondered the possibility of integrating 3D elements into user interfaces. Picture this: clouds gently drifting across your screen, seamlessly guiding you from one section to another. Intriguing, right? I decided then to sit down and make it a thing. These were the results:

#Tech Stack

This was made using Three.js, specifically the react-three-fiber abstraction, which makes it really easy to work with Three.js in a React environment. The clouds were made using drei which is a collection of useful helpers for react-three-fiber.

() => {
  useFrame(({ camera }) => (camera.position.y = -window.scrollY * 0.04 + 60))
 
  return (
    <Clouds material={THREE.MeshBasicMaterial}>
      <Cloud color="#e0e0e0" />
    </Clouds>
  )
}

And yes, it feels like magic, but it's just a few lines of code. Voilà, we have clouds!

In addition to the code snippets, we utilized a few useTransform hooks in conjunction with scrollYProgress from framer-motion to orchestrate the clouds' gentle drift across the screen as you scroll. And there you have it!

#But why? Or where?

I think this could be a really cool transition between sections in a website, or even a cool loading screen, or just a cool thing to have in your website. I mean, why not? It's cool, and this one is definitely just an experiment, but look at the possibilities!

• I can help you:
  • A 3D laptop floating around the screen with an interactive website on it
  • A parallax effect with 3D scroll and image animations
  • A 3D stair with interaction controls

All of those are made using Three.js and react-three-fiber, and they are definitely worth checking out if you're into this kind of stuff. All I'm here to say is that the web was created for HTML, the same way the DRS was created for F1 cars, but look at the Porsche 911 GT3 RS... (I'm a car guy, sorry for the analogy, but it fits perfectly here... I think). Anyway, I hope you enjoy this little experiment, and if you want to see more like this, artifact is another one of those!

P.S.: The original tweet that inspired this post can be found here: