INTERACTION_015CSS + JS
Scroll Reveal
Content fades and rises as it enters the viewport.
Scroll / LightView
Strips desktop-only motion and replaces it with proper tap feedback and scroll reveals.
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.
Adds restrained motion, glass surfaces, premium hover behavior, better typographic transitions and professional microinteractions.
One shared observer hook powering reveal, blur reveal and staggered grids across the whole app.
Primary, secondary and tertiary button variants with consistent hover, press and focus behaviour.