Cursor Guide
This guide is aligned to your live cursor UI, including image-based cursors.
Live fields:
Custom Cursor Type, Custom Cursor Color, Custom Cursor Size, Custom Cursor Image, Profile Cursor CSS.
Field Guide
- Custom Cursor Type: base cursor behavior.
- Custom Cursor Color: enables colored cursor mode (can visually override native shape feel).
- Custom Cursor Size: controls cursor visibility/impact. Start in the middle range.
- Custom Cursor Image: direct image URL for image-based cursor mode. Use
https://direct file URLs and keep image size small. - Profile Cursor CSS: advanced override field for custom cursor rules.
Cursor controls from your settings screen.
Usability first: if users cannot quickly locate the pointer, simplify immediately (smaller size, less intense color, or default type).
Safe Workflow
- Pick Custom Cursor Type first.
- Add Custom Cursor Color only if needed for personality/visibility.
- Set Custom Cursor Size so pointer remains precise (not oversized).
- If using image cursors, set Custom Cursor Type = custom and paste a direct URL into Custom Cursor Image.
- Only then use Profile Cursor CSS for advanced behavior.
- Validate typing fields, links, and buttons after CSS changes.
Profile Cursor CSS Playbook
Use CSS only. Do not include <style> tags.
1. Custom Cursor Image Field (Recommended Path)
Custom Cursor Type: custom
Custom Cursor Image: https://example.com/cursor.pngUse a direct image URL. PNG is usually the most reliable format. Keep it lightweight.
2. Safe Starter Snippet
/* Base custom cursor. 8 8 = hotspot (click point). */
body.has-custom-cursor,
body.has-custom-cursor * {
cursor: url("https://example.com/cursor.png") 8 8, auto !important;
}3. Keep Inputs Usable
/* Keep text editing usable. */
body.has-custom-cursor input,
body.has-custom-cursor textarea,
body.has-custom-cursor [contenteditable="true"] {
cursor: text !important;
}4. Keep Click Targets Clear
/* Keep click feedback obvious for interactive elements. */
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor [role="button"] {
cursor: pointer !important;
}5. Quick Rollback
- Clear the
Profile Cursor CSSfield and save. - If still odd, reset color/size to safer defaults and test again.
Important limits: avoid huge cursor images, avoid ultra-bright colors on light backgrounds, and use direct image URLs that return a real image file.
Common Fixes
- Cursor looks wrong in text boxes: apply the input/textarea
cursor: textsnippet. - Links/buttons do not feel clickable: apply the pointer snippet for clickable elements.
- Cursor image does not load: verify direct image URL and include
autofallback. - Cursor too distracting: reduce size first, then remove color, then simplify type.
- General breakage after edits: clear the CSS field entirely, save, then re-add snippets incrementally.
FAQs
What order should cursor settings follow?
Type first, then color/size, and CSS last.
Why is cursor usability poor?
Size may be too large or color contrast too aggressive.
How do I keep text fields usable?
Force text cursor on inputs, textarea, and contenteditable elements.
How do I preserve clickable affordance?
Force pointer cursor for links, buttons, and button-like targets.
Why does a custom cursor image fail?
The URL is not direct image content or lacks fallback.
What is the safe rollback?
Clear cursor CSS, save, and test with default size/color behavior.
