Create stunning visual experiences by converting any image into thousands of interactive particles. Each pixel becomes a floating point of light that responds to mouse movement
Make it with Workshop
Build your own component with AI
Demo: https://luxurious-centre-360676.framer.app/demoInteractive Image Particles for Framer
Turn any image into a living, breathing particle field. Your images respond naturally to mouse movement and touch with smooth 3D depth effects.
Perfect for hero sections, portfolio showcases, and anywhere you want to make images unforgettable.
Image-to-Particle Conversion
Upload any image and watch it transform into thousands of interactive particles that maintain the original composition.
Interactive Touch Effects
Particles respond smoothly to mouse and touch input with organic ripple effects that create depth and engagement.
Multiple Particle Shapes
Choose from circle, square, soft-square, star, or hexagon shapes to match your design aesthetic.
Flexible Color Modes
Display in full color to preserve original imagery, or switch to black & white with four contrast presets (Natural, Balanced, Soft, Bright).
3D Depth Control
Adjust depth and spread to create subtle or dramatic 3D effects. Particles float at different layers, creating natural parallax.
Performance Optimization
Built-in quality controls let you balance visual impact with smooth performance across all devices.
Hero Images — Transform static hero images into interactive experiences that capture attention instantly
Portfolio Showcases — Display work samples with particle effects that invite exploration and engagement
About Pages — Add personality to team photos or founder images with subtle interactive motion
Product Highlights — Make product images memorable with touch-responsive particle animations
Brand Identity — Turn logos or brand imagery into distinctive interactive elements
All settings are accessible through Framer's properties panel:
Image Setup
- Upload your image
- Choose image fit (Fill, Cover, Contain, Scale Down)
- Select style: Full Color or Black & White
- Adjust contrast preset (for Black & White mode)
Particle Appearance
- Select particle shape (5 options)
- Set particle size
- Adjust detail level (brightness threshold)
Motion & Effects
- Toggle entrance animation on/off
- Control 3D depth intensity
- Adjust particle spread
- Freeze movement option for static look
Interaction
- Set touch interaction size
- Control touch strength (displacement intensity)
Performance
- Adjust max resolution (lower = faster)
- Set sampling rate (1=high quality, 4=faster)
- Control minimum brightness size
Best Images — High-contrast images with clear subjects work best. Portraits, logos, and silhouettes create strong effects
Performance Balance — Start with default settings. If performance lags, reduce max resolution to 200 and increase sampling to 2
Color Choice — Black & White mode often creates cleaner, more professional effects. Use "Natural" contrast for best results
Subtle is Better — Keep 3D depth around 4.0 and spread around 2.0 for natural-looking effects
Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!
Static images are forgettable. Interactive particles make them memorable. Upload any image and instantly create an experience that engages visitors through natural mouse and touch interaction.
No complex setup, no coding. Just add your image, adjust the look, and deploy. Perfect for agencies delivering premium sites and freelancers who want portfolio pieces that stand out.
