Back to Documentation
AMADEV Docs
UI

Mouse Tracking System

Custom mouse tracking UI system with glow trail, cursor point, and scanning reticle

🖱️ Advanced Mouse Tracking System

The AMADEV platform features a custom-built, highly interactive mouse tracking system implemented in src/components/ui/MouseTracker.tsx. This system replaces the standard cursor with a dynamic reticle and glow effect that responds contextually to the user's interactions.

🌈 visual Styles

The tracker consists of three main visual layers that move independently using spring physics for a "weighty" and premium feel.

1. Soft Glow Trail (Background)

  • Style: A large, blurred radial gradient (450px).
  • Behavior: Smoothly follows the cursor with a slight delay (damping: 20, stiffness: 120).
  • Opacity: Context-sensitive (ranges from 0.3 to 0.4).
  • Color States:
    • Default: Cyan Glow (rgba(103,232,249,0.4))
    • Interactive: Violet/Purple Glow (rgba(139,92,246,0.5))
    • Images: White/Cyan Glow (rgba(255,255,255,0.4))
    • Inputs: Cyan Focused Glow (rgba(194, 238, 34, 0.4))

2. Sharp Cursor Point (Center)

  • Style: A small (8px), high-intensity cyan dot.
  • Effect: Strong outer shadow (drop-shadow) for a "neon" point-light appearance.
  • Visibility: Automatically hides (scale: 0) when hovering over sticky or interactive elements to focus attention on the target.

3. Scanning Reticle (Frame)

  • Style: Four corner brackets (L-shapes) that frame the area of interest.
  • Animation: Dynamically resizes and changes shape based on the hovered element.
  • States:
    • Scanning (Default): Small square (44x44px).
    • Targeting (Interactive): Expands to fit the target's bounding box + 16px padding.
    • Inspecting (Images): Large square (100x100px) with a "VIEW" label.
    • Writing (Inputs): Narrow vertical rectangle (24x48px) with a "WRITE" label.

✨ Interactive Effects

🧲 Magnetic Stickiness

When the cursor approaches a button, a, or [role="button"], the tracker "sticks" to the element. The frame expands to perfectly outline the element, and the center point snaps to the element's geometric center.

🏷️ Contextual Awareness

The system detects the type of content under the cursor and adapts the UI:

  • Images: Displays a "VIEW" indicator in ultra-small, tracked-out typography.
  • Inputs/Textareas: Changes shape to a cursor-like bar and displays "WRITE".
  • Interactive: Colors shift to a deep violet, signaling actionability.

🛠️ Technical Implementation

The system is built using:

  • React: Client-side component.
  • Framer Motion: Handles all animations, spring physics (useSpring), and motion values (useMotionValue).
  • CSS Transitions: Leverages Tailwind classes for layout and filter effects.
  • Hardware Acceleration: Uses fixed positioning and transform properties for 60fps performance.

Usage

The component is placed globally (typically in the root layout) and only renders on desktop devices (hidden md:block).

Code
// Example of how it reacts to targets
const interactiveEl = target.closest('button, a, [role="button"]');
const imageEl = target.closest('img, [data-magnetic="image"]');
const inputEl = target.closest('input, textarea, [contenteditable="true"]');

[!TIP] To make custom elements react to the mouse tracker as images, add the data-magnetic="image" attribute.