DEV Community

Cécile Lebleu
Cécile Lebleu

Posted on

I really want to know how to make this

Hi everyone!
I would love to make things like this. I would really appreciate if anyone can help guide me in the right direction — how it's built, maybe any tutorials, or what I should learn.
https://www.tuftandpaw.com/pages/beautiful-cats-of-instagram-3d#hamilton

Thanks in advance!! 😸

Top comments (8)

Collapse
 
nicolus profile image
Nicolus • Edited

That's.... Really uncanny XD

Anyway, from what I can tell it's using a regular picture of a cat and applying a "depth" texture with WebGL like is demonstrated in this tutorial : tympanus.net/codrops/2019/02/20/ho...

Then I'm guessing they map the texture of the eyes on a sphere that follows the mouse pointer.

In any case, it's mostly WebGL.

Collapse
 
cecilelebleu profile image
Cécile Lebleu

I like that depth effect. Thanks for the answer!

Collapse
 
giorgosk profile image
Giorgos Kontopoulos 👀 • Edited

Its really cool.

I think its custom made. Perhaps start digging in the source code of this //cdn.shopify.com/s/files/1/1511/7434/t/14/assets/cats.eyes.all.js.

Some plugins that do something similar can be found here
jb1905.github.io/universal-tilt.js/

Collapse
 
cecilelebleu profile image
Cécile Lebleu

Thank you! This is great :D

Collapse
 
flrnd profile image
Florian Rand

Sorry I'm a bit late to the party. It's using webgl among other things. You can see the source code from line 836 to 2261 (page source in your browser), but basically the animation is WebGL.

Hope it helps!

Collapse
 
cecilelebleu profile image
Cécile Lebleu

I wasn't sure where to start looking in the code 😅
Thanks!

Collapse
 
cecilelebleu profile image
Cécile Lebleu

😸

 
cecilelebleu profile image
Cécile Lebleu

Now I only need to make the interactive animation! Wait, there’s no emoji for that..? I guess I’ll have to code it 🤷🏼‍♀️