Image to Particles — An interactive Framer component

Transform any image into a mesmerizing particle system with mouse interaction and smooth animations. Perfect for hero sections, portfolio showcases, and interactive art installations.

Key Features

• Smart Image Processing - Automatically converts images into thousands of colored particles that animate into formation

• Interactive Mouse Effects - Particles respond to mouse movement with customizable attraction/repulsion zones

• Mobile Optimized - Intelligent resize handling with debouncing prevents performance issues on mobile devices

• Fully Customizable - Control particle size, animation speed, resolution density, and background colors

• Performance Focused - Built-in safety margins and optimization for smooth 60fps animations

• Responsive Design - Automatically scales and centers content across all screen sizes

Advanced Controls

• Resolution Control - Adjust particle density from sparse to ultra-detailed

• Zoom & Scale - Fine-tune image sizing within the particle system

• Animation Speed - Control how quickly particles move and respond

• Safety Margins - Expandable canvas area for natural particle movement

• Resize Intelligence - Smart debouncing prevents unnecessary reprocessing on mobile

Perfect For

• Hero section backgrounds with your logo or brand imagery

• Portfolio piece showcases that come alive on interaction

• Interactive art installations and creative presentations

• Product reveals that build anticipation through particle formation

• Any design that needs that extra "wow factor"

Built with P5.js for rock-solid performance and optimized for Framer's ecosystem. Works seamlessly across desktop and mobile with intelligent touch handling.