Guide
- 3D
- Image scan
Guide
- 3D
- Image scan
Guide
- 3D
- Image scan
How to Add a 3D Image Scan Effect to Your Framer Sites
In this Framer blog, I'm showing you how to create "impossible" 3D scan. It’s crazy how simple something like this can actually be. It’s perfect for pushing the boundaries of what's possible in web design.
Posted by
Nandi
Table of contents
What’s the secret?
The 3D image scan effect is pretty cool right? Basically what’s happening is there’s a flat image and layers of a depth map on top of it. The scan lines animate across your image, creating a 3D-like illusion that feels alive. It’s especially powerful for:
AI-style scanning effects
Interactive hover reveals
Trading card or product showcases
Adding subtle futuristic vibes to hero sections
What’s the secret?
The 3D image scan effect is pretty cool right? Basically what’s happening is there’s a flat image and layers of a depth map on top of it. The scan lines animate across your image, creating a 3D-like illusion that feels alive. It’s especially powerful for:
AI-style scanning effects
Interactive hover reveals
Trading card or product showcases
Adding subtle futuristic vibes to hero sections
What’s the secret?
The 3D image scan effect is pretty cool right? Basically what’s happening is there’s a flat image and layers of a depth map on top of it. The scan lines animate across your image, creating a 3D-like illusion that feels alive. It’s especially powerful for:
AI-style scanning effects
Interactive hover reveals
Trading card or product showcases
Adding subtle futuristic vibes to hero sections
3D image scan effect.
3D image scan effect.
3D image scan effect.
Think of it like taking a still image and giving it motion, depth, and personality, all in just a few clicks. And now for the secret, my 3D Image scan effect component.
How to use it in Framer
Like most Framer components, this one is dead simple to set up:
Copy and paste the component into your Framer project.
Upload your image into the properties panel.
Customize settings, you can pick between built-in effect types, tweak the animation, and even set it to loop forever.
Add hover interactions if you want the scan to trigger when someone hovers over the image.
Within a few minutes, you’ll have an image that looks like it belongs in a sci-fi movie.
The secret sauce: depth maps
You’ll notice there’s a property called “Depth” when you add the component. Don’t let it intimidate you, it’s just asking for the depth map of your image.
A depth map is basically a black-and-white (or grayscale) version of your image that tells the effect which parts are “closer” and which parts are “further.” White is near, black is far.
Here’s how to get one:
Use a free online generator (you’ll need to sign up, but it’s quick).
Or experiment with your own black-and-white edits. Sometimes simple versions work surprisingly well.
(Here’s a little free website I found.)
Pro tip: In the image settings, set the depth image resolution to “Auto (Lossless)”. This keeps the map sharp and avoids pixelation, giving you a much smoother scan effect.
Customization options
You’re not locked into one look. The component lets you:
Switch effect types (different scanning styles).
Loop the animation so it plays endlessly.
Trigger on hover for an interactive feel.
Fine-tune gradients and speed in the properties panel.
This flexibility means you can go subtle (a soft depth scan on a hero image) or bold (a looping sci-fi card effect).
Think of it like taking a still image and giving it motion, depth, and personality, all in just a few clicks. And now for the secret, my 3D Image scan effect component.
How to use it in Framer
Like most Framer components, this one is dead simple to set up:
Copy and paste the component into your Framer project.
Upload your image into the properties panel.
Customize settings, you can pick between built-in effect types, tweak the animation, and even set it to loop forever.
Add hover interactions if you want the scan to trigger when someone hovers over the image.
Within a few minutes, you’ll have an image that looks like it belongs in a sci-fi movie.
The secret sauce: depth maps
You’ll notice there’s a property called “Depth” when you add the component. Don’t let it intimidate you, it’s just asking for the depth map of your image.
A depth map is basically a black-and-white (or grayscale) version of your image that tells the effect which parts are “closer” and which parts are “further.” White is near, black is far.
Here’s how to get one:
Use a free online generator (you’ll need to sign up, but it’s quick).
Or experiment with your own black-and-white edits. Sometimes simple versions work surprisingly well.
(Here’s a little free website I found.)
Pro tip: In the image settings, set the depth image resolution to “Auto (Lossless)”. This keeps the map sharp and avoids pixelation, giving you a much smoother scan effect.
Customization options
You’re not locked into one look. The component lets you:
Switch effect types (different scanning styles).
Loop the animation so it plays endlessly.
Trigger on hover for an interactive feel.
Fine-tune gradients and speed in the properties panel.
This flexibility means you can go subtle (a soft depth scan on a hero image) or bold (a looping sci-fi card effect).
Think of it like taking a still image and giving it motion, depth, and personality, all in just a few clicks. And now for the secret, my 3D Image scan effect component.
How to use it in Framer
Like most Framer components, this one is dead simple to set up:
Copy and paste the component into your Framer project.
Upload your image into the properties panel.
Customize settings, you can pick between built-in effect types, tweak the animation, and even set it to loop forever.
Add hover interactions if you want the scan to trigger when someone hovers over the image.
Within a few minutes, you’ll have an image that looks like it belongs in a sci-fi movie.
The secret sauce: depth maps
You’ll notice there’s a property called “Depth” when you add the component. Don’t let it intimidate you, it’s just asking for the depth map of your image.
A depth map is basically a black-and-white (or grayscale) version of your image that tells the effect which parts are “closer” and which parts are “further.” White is near, black is far.
Here’s how to get one:
Use a free online generator (you’ll need to sign up, but it’s quick).
Or experiment with your own black-and-white edits. Sometimes simple versions work surprisingly well.
(Here’s a little free website I found.)
Pro tip: In the image settings, set the depth image resolution to “Auto (Lossless)”. This keeps the map sharp and avoids pixelation, giving you a much smoother scan effect.
Customization options
You’re not locked into one look. The component lets you:
Switch effect types (different scanning styles).
Loop the animation so it plays endlessly.
Trigger on hover for an interactive feel.
Fine-tune gradients and speed in the properties panel.
This flexibility means you can go subtle (a soft depth scan on a hero image) or bold (a looping sci-fi card effect).
The properties of the 3D image scan component.
The properties of the 3D image scan component.
The properties of the 3D image scan component.
Ideas for where to use it
To spark some inspiration, here are a few creative use cases:
Portfolio images → make your profile photo look alive when someone hovers.
E-commerce → give product shots a futuristic scan to grab attention.
Cards or collectibles → think trading cards, game stats, or fantasy designs with scan lines moving across them.
AI-themed websites → reinforce that cutting-edge vibe with animated imagery.
Final thoughts
The 3D Image Scan Effect is one of those components that instantly levels up a site without requiring hours of animation work. Drop it into your Framer project, upload a depth map, tweak a few settings, and you’re done. If you’ve been looking for a way to make your images stand out, this is it.
Ideas for where to use it
To spark some inspiration, here are a few creative use cases:
Portfolio images → make your profile photo look alive when someone hovers.
E-commerce → give product shots a futuristic scan to grab attention.
Cards or collectibles → think trading cards, game stats, or fantasy designs with scan lines moving across them.
AI-themed websites → reinforce that cutting-edge vibe with animated imagery.
Final thoughts
The 3D Image Scan Effect is one of those components that instantly levels up a site without requiring hours of animation work. Drop it into your Framer project, upload a depth map, tweak a few settings, and you’re done. If you’ve been looking for a way to make your images stand out, this is it.
Ideas for where to use it
To spark some inspiration, here are a few creative use cases:
Portfolio images → make your profile photo look alive when someone hovers.
E-commerce → give product shots a futuristic scan to grab attention.
Cards or collectibles → think trading cards, game stats, or fantasy designs with scan lines moving across them.
AI-themed websites → reinforce that cutting-edge vibe with animated imagery.
Final thoughts
The 3D Image Scan Effect is one of those components that instantly levels up a site without requiring hours of animation work. Drop it into your Framer project, upload a depth map, tweak a few settings, and you’re done. If you’ve been looking for a way to make your images stand out, this is it.
