---
title: "Liquid Cursor — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Netzoic · Cursors. Liquid Cursor brings cinematic, fluid motion to any Framer page using real-time WebGL fluid simulation."
canonical: "https://framer.elliotli.dev/component/liquid-cursor"
---

[Home](/)/[Components](/components)/[Cursors](/components/category/cursors)/Liquid Cursor

# Liquid Cursor

Premium fluid cursor trail effects

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

![Liquid Cursor preview image 1](https://framer.elliotli.dev/og/component/liquid-cursor/9bd5400bf7093d6e/1600x1200.jpg)

## Summary

Liquid Cursor brings cinematic, fluid motion to any Framer page using real-time WebGL fluid simulation.

## Description

**Liquid Cursor** brings cinematic, fluid motion to any Framer page using real-time WebGL fluid simulation. Instead of simple particle trails, it renders true liquid behavior that swirls, stretches, and dissipates in response to pointer movement.

With built-in presets, metallic looks, and color-reactive modes, you can go from subtle ambient motion to loud, expressive effects in seconds; all controlled through a no-code property panel. It’s designed to feel expensive and custom while staying performant across modern devices.

## Features

-   **GPU-accelerated fluid simulation** for smooth, high-fidelity trails
    
-   **Metallic presets** (Gold, Silver, Bronze, Diamond) for luxury, reflective looks
    
-   **Velocity-reactive colors** that shift based on cursor speed and direction
    
-   **Rainbow + brand color modes** for spectrum sweeps or locked brand hues
    
-   **Shading and blend modes** (Normal / Invert) to dial in depth and contrast
    
-   **Full simulation controls** – resolution, dissipation, pressure, curl, splat radius, and force
    
-   **No-code controls** exposed in Framer’s right panel; no shaders or JS needed
    
-   **Pointer-safe overlay** – designed to sit behind your UI without blocking clicks or hovers
    
-   **Responsive by design** – fills sections or full-screen layouts with constraint-based sizing
    

## Use Cases

-   Premium **hero sections** and landing pages that need a bespoke, animated feel
    
-   **Portfolio and studio sites** looking for high-end interaction without custom GLSL work
    
-   **Brand or product intros** where motion and mood carry the story
    
-   **Music, art, or event pages** that benefit from expressive ambient visuals
    
-   Experimental **microsites** and interactive playgrounds to showcase creative direction
    

## Quick Setup

1.  Add **Liquid Cursor** to your page.
    
2.  Place it **under** your main content in the Layers panel.
    
3.  Set **Position** to Absolute and pin **Left / Top / Right / Bottom** to 0 so it fills the section.
    
4.  In **Styles**, set **Pointer Events** to None so your buttons and links stay clickable.
    
5.  Choose a **Preset** or switch to **Custom** to tweak metallic, rainbow, velocity, and physics settings.
    

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

-   All · #5887

## Details

- **Author**: Netzoic
- **Price**: $7.00
- **Published**: 2026-01-14
- **Updated**: 2026-01-23
- **Added**: 2025-11-24
- **Categories**: Cursors

## More like this

-   [Ribbon Hero](/component/ribbon-hero) — Divyesh WebCraft · Free — 3D ribbon with smooth motion
-   [Spider Hunt](/component/spider-hunt) — Karim Saif · $6 — ٍpider that tracks your cursor
-   [Pixel Fluid](/component/pixel-fluid) — Jamik · $12 — Fluid cursor trail in pixels/ASCII
-   [CursorImageTrail](/component/cursorimagetrail) — princeee · $20 — Image Trail is a dynamic Framer component that creates an immersive hover experience by displaying a sequence of images that trail behind…