InteractiveParticles

Interactive Particles

Demo: https://luxurious-centre-360676.framer.app/demo Interactive 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. Features 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. Use Cases 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 Customization 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 Quick Tips 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 License Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. Refund Policy 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! Why Designers Choose This 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.

Interactive Particles