LiquidShape

Your Icons in custom SVG shape

How it works 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. Features 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

Your Icons in custom SVG shape