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