Skip to Content
Back

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.

cloud.tsx
() => {
  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!

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... . 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:

0
htnx: a htmx-like experience in Next.js (seriously)

Get notified!

I promise to send you updates with the best content.
I hate writing emails as much as you hate spam.

r19

A dead-simple React 19 "framework" implementation from scratch

#bun#esm#react#rsc

ds

Think "docker stats" but with beautiful, real-time charts into your terminal. 📊

#cli#docker#hacktoberfest#rust#stats

htnx

a htmx like experience in Next.js with RSC and quite a bit of questionable code.

#htmx#nextjs#react#rsc

quix

Supercharge Your VTEX IO Workflow with a Lightning-Fast CLI Alternative. Enhance Developer Experience and Boost Productivity.

#performance-analysis#rust-lang#vtex#vtex-io#wip

raw

Uma stack sob-medida escrita em Rust para os desafios da rinha e somente isso. Incluindo load balancer, servidor HTTP e banco de dados.

#rust

tailwindcss-expose-colors

Expose specific colors from your Tailwind CSS theme as CSS variables

#tailwind#tailwindcss#tailwindcss-plugin
CC BY-NC 4.0©rafaelrcamargo.