Animated 3D Hero image

Generate depth map for any image using Depth Anything V2 Model then create 3D effect for it.

Open in GitHub
  • AI Model ready
  • Reading image
  • Generating depth map
  • Generating the animation
Original
Original image
Depth map
Depth map
Download
HTML React
Make sure to include the JS file image3d.js then the images and
make sure to pass right container id and that container to have a width and height.
And if you want to yse gyronorm make sure to include the gyronorm.js script. 
React code
Make sure to import the JS file image3d.js and in case you're using typescript then import from that file image3d.ts
Then the images and
Make sure to path right container id and that container to have a width and height.
And if you want to yse gyronorm make sure to install the gyronorm.js script before image3d.