Icons are placed randomly inside the shape's filled area and held there by spring forces. Disturb them with your cursor — they scatter, collide, and snap back into formation. Swap the shape and they instantly regroup.
Shape
Upload any SVG or PNG with a solid fill — icons map to its interior automatically
Aspect ratio is always preserved, shape scales perfectly to any component size
Optional outline overlay with custom color and line width
Falls back to a circle if no shape is uploaded
Physics
Full spring-return system — every icon has a home position inside the shape
Spatial-hash broad-phase collision keeps icons from overlapping as they return
Tune spring strength, damping, stiffness, and bounce independently
Cursor interaction
Three modes: Repel, Attract, Vortex
Vortex Speed control — from a gentle swirl to a fast orbit
Works on touch devices, and correctly when multiple instances are on the same page
Scroll-driven entry
Enable Scroll Driven to make icons fly in as the user scrolls
Place the component inside a sticky frame (≥300vh) — icons travel from scattered to fully formed over the scroll range you set
Loop on Scroll Back resets the animation when the user scrolls back up
Entry animation
Instant — icons appear at their home positions on load
Fade In — icons materialize from transparent, speed is adjustable
Fly In — icons scatter randomly, then spring into the shape (default)
Appearance
Up to 6 custom icons via image upload
Optional color tint applied to all icons
Motion trail for blur effect
Speed Opacity — icons dim when still, brighten as they move
Background color control
Performance
WebGL2 instanced rendering — up to 2,000 icons at 60 fps
Anti-aliasing disabled on mobile for smooth performance
Pauses RAF when scrolled off-screen
Zero CPU/GPU load in Framer's Edit mode
Olexandr Demydov
