Guide
- Animated
- Product cards
Guide
- Animated
- Product cards
Guide
- Animated
- Product cards
How to Create Animated Product Cards with AI in 2025
In this Framer blog, I'm showing you how to create stunning 3D product cards using nothing but AI tools and Framer. No 3D modeling, no animation skills, no coding required. You'll learn my exact process: from generating scenes with ChatGPT-4o to creating animations with Kling AI, and finally assembling everything in Framer for that perfect interactive experience.
Posted by
Nandi
Table of contents
Getting started
Okay so to get it going, you’ll literally need just two assets for each card:
A static image for the product card.
An animated version of that image—typically a short looping video made with 3D software (or generated with AI tools like Runway, Kaiber, or Pika).
Let’s get started with the images first, then we can get into making it a component and using AI, let’s get started.
Creating images
To generate the images, I started by creating a JSON style guide using GPT-4. This wasn’t about creating visuals yet, it was all about setting the visual tone. The style guide defined things like colors, shadows, and lighting, making it easier to produce consistent image generations later. Once the guide was ready, I jumped into a new chat, pasted it in, and asked for a scene featuring a shopping basket filled with groceries.
The results weren’t perfect, the shadows were too soft, the background wasn’t quite right, and the object took up too much of the frame. But that’s the beauty of using AI. You can go back, tweak your guide, and regenerate with better precision each time.
I kept iterating by asking the AI to adjust the background to a darker gray, refine the shadows, and add more negative space around the object. Still, the images kept centering the subject and making it too large. So I got more specific, requesting the object to fill only 20% of the frame and sharpening the shadows further.
It’s a bit of a balancing act, but once you get the style guide dialed in, you can use it across multiple generations for consistent visuals. I avoided editing the image directly because I wanted to fine-tune the style guide instead. That way, I’d have a reusable system for generating cohesive assets later on.
Getting started
Okay so to get it going, you’ll literally need just two assets for each card:
A static image for the product card.
An animated version of that image—typically a short looping video made with 3D software (or generated with AI tools like Runway, Kaiber, or Pika).
Let’s get started with the images first, then we can get into making it a component and using AI, let’s get started.
Creating images
To generate the images, I started by creating a JSON style guide using GPT-4. This wasn’t about creating visuals yet, it was all about setting the visual tone. The style guide defined things like colors, shadows, and lighting, making it easier to produce consistent image generations later. Once the guide was ready, I jumped into a new chat, pasted it in, and asked for a scene featuring a shopping basket filled with groceries.
The results weren’t perfect, the shadows were too soft, the background wasn’t quite right, and the object took up too much of the frame. But that’s the beauty of using AI. You can go back, tweak your guide, and regenerate with better precision each time.
I kept iterating by asking the AI to adjust the background to a darker gray, refine the shadows, and add more negative space around the object. Still, the images kept centering the subject and making it too large. So I got more specific, requesting the object to fill only 20% of the frame and sharpening the shadows further.
It’s a bit of a balancing act, but once you get the style guide dialed in, you can use it across multiple generations for consistent visuals. I avoided editing the image directly because I wanted to fine-tune the style guide instead. That way, I’d have a reusable system for generating cohesive assets later on.
Getting started
Okay so to get it going, you’ll literally need just two assets for each card:
A static image for the product card.
An animated version of that image—typically a short looping video made with 3D software (or generated with AI tools like Runway, Kaiber, or Pika).
Let’s get started with the images first, then we can get into making it a component and using AI, let’s get started.
Creating images
To generate the images, I started by creating a JSON style guide using GPT-4. This wasn’t about creating visuals yet, it was all about setting the visual tone. The style guide defined things like colors, shadows, and lighting, making it easier to produce consistent image generations later. Once the guide was ready, I jumped into a new chat, pasted it in, and asked for a scene featuring a shopping basket filled with groceries.
The results weren’t perfect, the shadows were too soft, the background wasn’t quite right, and the object took up too much of the frame. But that’s the beauty of using AI. You can go back, tweak your guide, and regenerate with better precision each time.
I kept iterating by asking the AI to adjust the background to a darker gray, refine the shadows, and add more negative space around the object. Still, the images kept centering the subject and making it too large. So I got more specific, requesting the object to fill only 20% of the frame and sharpening the shadows further.
It’s a bit of a balancing act, but once you get the style guide dialed in, you can use it across multiple generations for consistent visuals. I avoided editing the image directly because I wanted to fine-tune the style guide instead. That way, I’d have a reusable system for generating cohesive assets later on.
Using AI to generate images.
Using AI to generate images.
Using AI to generate images.
Animated product cards hovering.
Animated product cards hovering.
Animated product cards hovering.
Want that fancy rotating product vibe without spending hours in Blender? Use AI. Tools like Runway Gen-2 or Pika now support image-to-video generation with realistic camera movement and lighting. This means you can:
Take a single product photo
Prompt the AI to create a rotating view
Export it as a short looping clip
And drop it into Framer
It’s fast, fun, and kind of futuristic.
Building the component in Framer
Want that fancy rotating product vibe without spending hours in Blender? Use AI. Tools like Runway Gen-2 or Pika now support image-to-video generation with realistic camera movement and lighting. This means you can:
Take a single product photo
Prompt the AI to create a rotating view
Export it as a short looping clip
And drop it into Framer
It’s fast, fun, and kind of futuristic.
Building the component in Framer
Want that fancy rotating product vibe without spending hours in Blender? Use AI. Tools like Runway Gen-2 or Pika now support image-to-video generation with realistic camera movement and lighting. This means you can:
Take a single product photo
Prompt the AI to create a rotating view
Export it as a short looping clip
And drop it into Framer
It’s fast, fun, and kind of futuristic.
Building the component in Framer
Animated product card component variants.
Animated product card component variants.
Animated product card component variants.
Once your assets are ready, building the actual component in Framer is a breeze. Here’s how to set it up:
Create a frame for your product card
Add your static image to the frame.
Position any text, pricing, or branding elements as needed.
Drop in the video
Place the animated video exactly on top of the image.
Set the opacity of the video to 0 by default (so it’s hidden initially).
Make sure the video’s autoplay is off and the playing property is set to “no.”
Add a hover state
In the hover variant, change the video’s opacity to 1 and set playing to “yes.”
That’s literally it.
Hover = animated card. No code. No fuss.
Want to try it yourself?
You can copy the Animated Product Card component directly from Framer University or remix the full project and see how it’s built. Honestly, there’s no better way to learn than to pull it apart yourself and see how the pieces fit. I can even show you step-by-step in my full length tutorial on how to create animated cards with AI.
Final thoughts
Product cards are more than just static images now, they’re experiences. And in 2025, combining AI tools with Framer’s no-code magic means anyone can build motion-rich cards that feel high-end. Whether you’re selling skincare, coffee kits, or sneakers, these micro-interactions make a huge difference in how your product is perceived. And they’re only getting easier to build. So grab your assets, generate some animations, and give your cards that extra spark. See you on the hover side.
Once your assets are ready, building the actual component in Framer is a breeze. Here’s how to set it up:
Create a frame for your product card
Add your static image to the frame.
Position any text, pricing, or branding elements as needed.
Drop in the video
Place the animated video exactly on top of the image.
Set the opacity of the video to 0 by default (so it’s hidden initially).
Make sure the video’s autoplay is off and the playing property is set to “no.”
Add a hover state
In the hover variant, change the video’s opacity to 1 and set playing to “yes.”
That’s literally it.
Hover = animated card. No code. No fuss.
Want to try it yourself?
You can copy the Animated Product Card component directly from Framer University or remix the full project and see how it’s built. Honestly, there’s no better way to learn than to pull it apart yourself and see how the pieces fit. I can even show you step-by-step in my full length tutorial on how to create animated cards with AI.
Final thoughts
Product cards are more than just static images now, they’re experiences. And in 2025, combining AI tools with Framer’s no-code magic means anyone can build motion-rich cards that feel high-end. Whether you’re selling skincare, coffee kits, or sneakers, these micro-interactions make a huge difference in how your product is perceived. And they’re only getting easier to build. So grab your assets, generate some animations, and give your cards that extra spark. See you on the hover side.
Once your assets are ready, building the actual component in Framer is a breeze. Here’s how to set it up:
Create a frame for your product card
Add your static image to the frame.
Position any text, pricing, or branding elements as needed.
Drop in the video
Place the animated video exactly on top of the image.
Set the opacity of the video to 0 by default (so it’s hidden initially).
Make sure the video’s autoplay is off and the playing property is set to “no.”
Add a hover state
In the hover variant, change the video’s opacity to 1 and set playing to “yes.”
That’s literally it.
Hover = animated card. No code. No fuss.
Want to try it yourself?
You can copy the Animated Product Card component directly from Framer University or remix the full project and see how it’s built. Honestly, there’s no better way to learn than to pull it apart yourself and see how the pieces fit. I can even show you step-by-step in my full length tutorial on how to create animated cards with AI.
Final thoughts
Product cards are more than just static images now, they’re experiences. And in 2025, combining AI tools with Framer’s no-code magic means anyone can build motion-rich cards that feel high-end. Whether you’re selling skincare, coffee kits, or sneakers, these micro-interactions make a huge difference in how your product is perceived. And they’re only getting easier to build. So grab your assets, generate some animations, and give your cards that extra spark. See you on the hover side.
