The Porto Cursor Effect element enhances user interaction by replacing or extending the default mouse cursor with custom visual effects. It allows you to highlight specific areas, apply spotlight-style focus, and animate cursor behavior when hovering over defined targets.
This feature is designed for creative layouts, landing pages, and interactive sections where cursor feedback improves engagement.
Cursor Effect Options
General Options
| Option | Description |
|---|---|
| Spotlight Effect | Enables a spotlight-style focus that follows the cursor, emphasizing content beneath it |
| Target | Defines the CSS selector or element area where the cursor effect is applied |
| Hover Effect on Target | Enables additional visual effects when the cursor hovers over the target |
| Icon Class for Cursor Inner | Icon displayed inside the cursor (e.g. Font Awesome class) |
| Icon Font Size | Size of the inner icon |
| Icon Color | Color of the inner icon |
Animation & Transition Options
| Option | Description |
|---|---|
| Transition Duration (ms) | Duration of cursor movement and animation |
| Transition Delay (ms) | Delay before the cursor animation starts |
| Cursor Inner Transition Delay (ms) | Delay applied specifically to the inner cursor animation |
Style Options (Style Tab)
The Style tab provides full control over the visual appearance of the cursor.
| Option | Description |
|---|---|
| Cursor Size | Overall size of the cursor |
| Background Color | Background color of the cursor |
| Border Width | Thickness of the cursor border |
| Border Color | Color of the cursor border |
| Border Radius | Shape of the cursor (circle, rounded, or square) |
Cursor Inner
| Option | Description |
|---|---|
| Inner Size | Size of the inner cursor element |
| Inner Background Color | Background color of the inner cursor |
| Inner Border Settings | Border width, color, and radius for inner cursor |
Usage Tips
- Use Target carefully to avoid overriding cursor behavior globally
- Spotlight effect works best on dark or minimal backgrounds
- Keep transition durations subtle for smooth movement
- Avoid applying cursor effects to form inputs and text fields
Performance & UX Notes
- Cursor effects are intended mainly for desktop interactions
- Overuse may distract users or reduce usability
- Best applied to specific sections rather than entire pages
