---
title: "LiquidIcons — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Oleksandr Demydov · Backgrounds. Interactive Icons with Physics"
canonical: "https://framer.elliotli.dev/component/liquidicons"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/LiquidIcons

# LiquidIcons

Interactive Icons with Physics

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

![LiquidIcons preview image 1](https://framer.elliotli.dev/og/component/liquidicons/767373c625bb623b/1600x1200.jpg)

## Summary

Interactive Icons with Physics

## Description

Every icon is a real physics particle: it has mass, velocity, rotational spin, and a collision body. The spatial-hash broad phase keeps it smooth at 300+ particles without touching the main thread layout. Scroll into the section and particles ripple from the momentum — scroll fast enough and the whole field surges.

**Key Features**

**Cursor interaction modes.** Three distinct cursor behaviors: Repel scatters particles away from the pointer, Attract pulls them in for a magnetic gathering effect, and Vortex spins particles around the cursor in a swirling orbit. Radius and force are independently tunable, making the interaction feel subtle or dramatic.

**Fluid physics.** Surface tension clusters nearby particles into liquid droplets. Viscosity blends velocities so the field moves like a thick fluid rather than separate objects. Pressure radius and force push particles apart before they collide, preventing hard stacking. Each parameter is exposed as a control — dial in water, oil, or a bouncy slime feel.

**Scroll reactivity.** Particles inherit the velocity of the page scroll, so fast scrolling creates a visible wave through the field. The impulse decays naturally over a few frames, snapping back to gravity-driven behavior as the scroll settles.

**Speed Opacity.** Particles dim at rest and brighten as they accelerate — stationary icons fade into the background while disturbed ones flash to full opacity. The effect makes cursor interaction feel physically charged without any extra animation code.

**Canvas-safe.** Shows only a solid background color in the Framer editor — no WebGL, no RAF loop, no interference with your design workflow. Simulation starts only in Preview and Published mode.

**Customization**

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

_Icons:_ up to 6 custom images (PNG, SVG, WebP). Falls back to 6 built-in geometric shapes if none are set. Optional global tint overlays any color onto all icons.

_Appearance:_ background color, trail/fade alpha (leaves motion blur behind fast particles), speed opacity strength.

_Particles:_ count, min/max size, min/max opacity, rotation toggle and spin speed.

_Physics:_ gravity, damping, bounce, X friction, stiffness, collision padding, pressure radius and force, surface tension, viscosity, cohesion (center pull), rest density, and substep count for accuracy vs. performance tradeoff.

_Cursor:_ mode (repel / attract / vortex), interaction radius, force strength.

_Scroll:_ scroll force multiplier — set to 0 to disable.**Best For**

Hero sections and full-bleed backgrounds that need kinetic energy. Feature blocks where icons need more than a static grid. Brand pages that showcase logos or product icons in an interactive showcase. Dark-mode landing pages where a glowing particle field sets the mood.

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

-   All · #7486

## Details

- **Author**: Oleksandr Demydov
- **Price**: $5.00
- **Published**: 2026-05-07
- **Updated**: 2026-05-07
- **Added**: 2026-04-29
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background