The Jelly Cursor is a high-performance, physics-driven interaction component for Framer. Unlike standard custom cursors that simply follow the mouse, this component calculates real-time velocity to apply an organic "stretch" and "squish" effect (jelly physics) based on the speed and direction of movement.
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.
