---
title: "Jelly Cursor — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Nora Salem · Cursors. The Jelly Cursor is a high-performance, physics-driven interaction component for Framer."
canonical: "https://framer.elliotli.dev/component/jellycursor"
---

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

# Jelly Cursor

Physics-driven jelly cursor.

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

![Jelly Cursor preview image 1](https://framer.elliotli.dev/og/component/jellycursor/08ff303007b20fde/1600x1200.jpg)

## Summary

The Jelly Cursor is a high-performance, physics-driven interaction component for Framer.

## Description

## User Customization Controls

### 1\. Physics & Movement

-   **Follow Speed (dt):** This is the heart of the "jelly" feel.
    
-   **Low values (0.01 - 0.05):** Create a heavy, cinematic lag where the cursor "drifts" behind the mouse.
    
-   **High values (0.1 - 0.5):** Make the cursor feel responsive and snappy, while still maintaining the elastic stretch.
    
-   **Dynamic Stretching:** While not a direct slider, the "jelly" intensity is tied to the movement speed. The faster the user moves their mouse, the more the cursor elongates.
    

### 2\. Visual Appearance

-   **Cursor Size:** Adjust the base diameter of the circle (default is 80px). The text inside will automatically stay centered regardless of the size.
    
-   **Background Color:** A full color picker to match the cursor to your brand. It supports solid colors and transparency.
    
-   **Smooth Transitions:** The background color includes a built-in 0.3s transition, allowing it to change smoothly if you decide to trigger color shifts via overrides.
    

### 3\. Content & Messaging

-   **Toggleable Label:** Use the **Show Text** switch to turn the label on or off.
    
-   **Custom Text Input:** Users can type **any word or phrase** they like.
    
-   _Short words_ (like "GO", "VIEW", "PLAY") work best for a clean look.
    
-   _Symbols_ (like "→" or "+") can be used for a more minimal, iconic feel.
    
-   **Text Color:** Independent color control for the label to ensure high contrast against the cursor background.
    

### 4\. Advanced Typography

The component integrates Framer’s **Extended Font Controls**, giving users deep styling power over the cursor text:

-   **Font Family:** Choose from System fonts, Google Fonts, or uploaded Custom fonts.
    
-   **Weight & Style:** Set the thickness (e.g., Bold, Semi-bold, Thin) and slant (Italic).
    
-   **Letter Spacing & Sizing:** Fine-tune the font size and tracking to ensure the custom word fits perfectly within the "jelly" blob.
    

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

-   All · #5600

## Details

- **Author**: Nora Salem
- **Price**: $7.00
- **Published**: 2026-02-11
- **Updated**: 2026-08-22
- **Added**: 2026-01-31
- **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…