About: Brand identity designer learning to be a proper dev. My tabs are 3 spaces long.
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!! 😸
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/
Now I only need to make the interactive animation! Wait, there’s no emoji for that..? I guess I’ll have to code it 🤷🏼♀️
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!
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.