---
title: "LiquidShape — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Oleksandr Demydov · Effects. Your Icons in custom SVG shape"
canonical: "https://framer.elliotli.dev/component/liquidshape"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/LiquidShape

# LiquidShape

Your Icons in custom SVG shape

[View on Framer](https://framer.com/marketplace/components/liquidshape/?via=elliot-li)

![LiquidShape preview image 1](https://framer.elliotli.dev/og/component/liquidshape/916318d1517860e2/1600x1200.jpg)

## Summary

Your Icons in custom SVG shape

## Description

### 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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-knbuptv8-bKNHiEhmC5LwvOisLquJEG1XhXyGq4)

**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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #5414

## Details

- **Author**: Oleksandr Demydov
- **Price**: $5.00
- **Published**: 2026-05-14
- **Updated**: 2026-05-14
- **Added**: 2026-05-02
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo