Sand Particles
Sand Particles is an ultra-fast interactive particle simulation for Framer. Change any color, tweak motion physics, and create fluid, sand-like visuals for interactive backgrounds.
Made with Workshop
Build your own component with AI
Sand Particles is an ultra-fast interactive particle simulation for Framer. Change any color, tweak motion physics, and create fluid, sand-like visuals for interactive backgrounds.
Made with Workshop
Build your own component with AI
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. Designed with fine-tuned controls, you can easily customize the interaction strength, color, drag, and motion physics right inside Framer — no coding required.
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 your mouse movement or automatically animate when idle, keeping visuals dynamic even without interaction.
Customizable Base Color — Choose any particle color to match your brand or theme.
Interactive “Explosion” Effect — Click anywhere to create a stunning burst of motion as particles scatter and reform.
Adjustable Repulsion Radius — Fine-tune how strongly particles react to the cursor using the Repulsion control.
Performance-Tuned Controls — Real-time adjustments for drag and easing to balance smoothness and responsiveness.
Responsive & Auto-Resizing — Automatically adapts to the frame size in your layout.
Event Hook Support — Built-in onColorListChange event handler for extending interactions in advanced setups.
Clean, Modern Visual Design — Subtle shadows, rounded corners, and transparent rendering make it perfect for blending into modern UI compositions.
Interactive hero sections or visual headers that respond to user movement.
Background animations that bring depth and motion to websites or landing pages.
Portfolio showcases to highlight creative or technical work with dynamic visuals.
Framer prototypes or live sites needing immersive motion without performance trade-offs.
Tech, gaming, or creative brand websites looking for a futuristic particle-based aesthetic.
⚙️ Customization Highlights
Particles Count: Adjust from 10k to 500k for lightweight or dense effects.
Repulsion (Thickness): Control the intensity of particle reaction to pointer movement.
Drag & Ease: Define how quickly particles slow down and return to their base positions.
Background Color: Match your site’s theme or create a glassy contrast.
Base Color: Pick a solid hue or dynamic palette for your particles.
Sand Particles isn’t just an animation — it’s a living visual layer that reacts to your users and creates an emotional, modern experience. It combines artistic fluidity with technical precision, built for both designers and developers who want performance without compromise.
Whether you’re building an elegant homepage, interactive presentation, or experimental motion design piece, this component delivers a cinematic particle system right inside Framer.
