Jelly Cursor

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

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.

Physics-driven jelly cursor.