MOVE INSIDE
INTERACTION_012CSS + JS
Custom Cursor
Dot plus trailing ring with contextual labels.
Mouse / MediumView
Back to promptsPROMPT_001 / LANDING PAGES PROMPT_002 / LANDING PAGES PROMPT_003 / BUTTONS
PROMPT_004 / CARDS
REPLACE THE POINTER, CAREFULLY.
Dot plus trailing ring with contextual labels, mounted only where it improves the experience.
- BEST FOR
- Portfolio and interaction-led marketing sites.
- DIFFICULTY
- Advanced
- TOOLS
- Lovable · Cursor
USE THIS IN LOVABLE
Add a desktop-only custom cursor system.
Render a fixed 6px white dot that follows the pointer exactly, plus a 32px 1px-bordered ring that lerps toward the pointer at 0.15 inside a single requestAnimationFrame loop using translate3d.
States: elements with data-cursor="view" | "open" | "copy" | "drag" expand the ring to 56px and display that label in uppercase monospace at 10px.
Guards: mount only when matchMedia('(pointer: fine)') matches and reduced motion is off. Keep the native cursor visible over inputs, textareas and code blocks. Never let the cursor layer intercept pointer events.
---
Tool: Lovable. Apply the changes directly to the existing codebase, reuse the current design tokens and component structure, and do not introduce new dependencies.RECOMMENDED INTERACTIONS.
AMBIENT LIGHT
INTERACTION_013CSS + JS
Mouse Glow
Large ambient light that trails the pointer across a section.
Mouse / MediumView
RELATED PROMPTS.
MAKE MY WEBSITE FEEL EXPENSIVE.
Adds restrained motion, glass surfaces, premium hover behavior, better typographic transitions and professional microinteractions.
premiumlanding-pagemicrointeraction
BUILD A LANDING PAGE THAT LOOKS HIRED.
A complete dark, monochrome, editorial landing page structure with asymmetric bento sections and restrained motion.
premiumlanding-pagedark-ui
GIVE MY CTA GRAVITY.
A reusable cursor-following button component with proper touch and reduced-motion fallbacks.
buttonmousepremium