Back to prompts
PROMPT_011 / MOBILE

FIX HOW THIS FEELS ON A PHONE.

Strips desktop-only motion and replaces it with proper tap feedback and scroll reveals.

BEST FOR
Sites built desktop-first with hover-dependent interactions.
DIFFICULTY
Easy
TOOLS
Lovable · Cursor
USE THIS IN LOVABLE
Audit and fix mobile motion.

Disable on coarse pointers: custom cursor, magnetic buttons, cursor spotlights, 3D tilt, cursor parallax and any hover-only reveal that hides content.
Replace with: active-state scale 0.98 on tappable surfaces, 44px minimum hit areas, scroll reveals with 8px travel, and swipe-based horizontal scrolling with snap points where a grid was used.
Reduce: backdrop blur to 16px, animation durations by ~20%, and the number of simultaneously animating elements.
Guarantee: no content is only reachable via hover, and prefers-reduced-motion disables all decorative motion.

---
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.

INTERACTION_015CSS + JS

Scroll Reveal

Content fades and rises as it enters the viewport.

Scroll / LightView
CARD_01
INTERACTION_006CSS

Premium Card Lift

4px elevation with border brightening.

Cards / LightView

RELATED PROMPTS.

PROMPT_001 / LANDING PAGES

MAKE MY WEBSITE FEEL EXPENSIVE.

Adds restrained motion, glass surfaces, premium hover behavior, better typographic transitions and professional microinteractions.

premiumlanding-pagemicrointeraction
Preview
PROMPT_005 / ANIMATIONS

MAKE SCROLLING FEEL DIRECTED.

One shared observer hook powering reveal, blur reveal and staggered grids across the whole app.

scrollmicrointeractionpremium
Preview
PROMPT_006 / BUTTONS

THREE BUTTONS. ONE LANGUAGE.

Primary, secondary and tertiary button variants with consistent hover, press and focus behaviour.

buttonpremiummicrointeraction
Preview