I really want to know how to make this

github logo ・1 min read

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!! 😸

twitter logo DISCUSS (10)
markdown guide
 

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.

 

I like that depth effect. Thanks for the answer!

 

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/

 
 

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!

 

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

 
 
 

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

Classic DEV Post from May 10

What do you wish you knew about Developer Relations?

A conversation... what do DevRel professionals wish devs knew about their job? And what do devs wish they knew about DevRel?

Cécile Lebleu profile image
Brand identity designer learning to be a proper dev. My tabs are 3 spaces long.

Where the wild code grows

Sign up (for free)