🏜️ Sand Particles — Ultra-High-Performance Interactive Particle Simulation for Framer

Sand Particles is a visually captivating, physics-driven particle simulation that brings energy, fluidity, and motion to your designs. Built with Canvas2D for extreme performance, it can render up to 300,000 particles in real time, making it perfect for backgrounds, hero sections, interactive experiences, and dynamic visual storytelling.

Each particle reacts to your cursor or touch input with natural repulsion and smooth easing, creating a mesmerizing sand-like behavior that feels alive. With fine-tuned controls, you can easily customize the interaction strength, color, drag, and motion physics directly inside Framer — no coding required.

🌟 Key Features

Ultra-Optimized Canvas Engine: Handles up to 300k particles smoothly on modern browsers with GPU-assisted rendering
Physics-Driven Interaction: Realistic movement using velocity, drag, and easing parameters for smooth, fluid motion
Cursor & Auto Motion Modes: Particles react to mouse movement or animate automatically when idle
Customizable Base Color: Match particle colors to your brand or theme
Interactive “Explosion” Effect: Click anywhere to create a burst of motion as particles scatter and reform
Adjustable Repulsion Radius: Fine-tune how strongly particles react to the cursor
Performance-Tuned Controls: Real-time adjustments for drag and easing
Responsive & Auto-Resizing: Automatically adapts to the frame size
Event Hook Support: Includes onColorListChange for extended interactions
Clean, Modern Visual Design: Transparent rendering, subtle shadows, and rounded corners for seamless UI integration

🎨 Best Used For

Interactive hero sections or visual headers
Background animations for websites or landing pages
Portfolio showcases with dynamic visuals
Framer prototypes or live sites with immersive motion
Tech, gaming, or creative brand websites with a futuristic aesthetic

⚙️ Customization Highlights

Particles Count: 10k to 500k for lightweight or dense effects
Repulsion (Thickness): Adjust reaction intensity to pointer movement
Drag & Ease: Control how quickly particles slow and reset
Background Color: Blend or contrast with your site theme
Base Color: Choose solid hues or dynamic palettes

💡 Why You’ll Love It

Sand Particles isn’t just an animation, it’s a living visual layer that responds to your users, adding emotion and modern motion to your designs. It blends artistic fluidity with technical precision, giving designers and developers performance without compromise.

Whether you’re building a cinematic homepage, an interactive presentation, or an experimental motion experience, this component delivers a stunning, real-time particle system right inside Framer.

🛠️ Support

If you have any issues, feel free to reach out:
📧 Email: mehrajdesign@gmail.com