Skip to content

Implement predictive Next.js route prefetching based on user cursor velocity and trajectory vectors #471

Description

@Damola-Sodiq

Description

Create a mathematically driven prefetching engine that analyzes the user's mouse trajectory to predict which asset page they will click, initiating tRPC queries preemptively.

Architecture & Context

Standard Next.js <Link> hover-prefetching is often too late for fast interactions. By calculating the intersection of the cursor's path with bounding boxes of asset cards, the network request can begin 100-200ms before the actual click event, providing a zero-latency feel.

Technical Requirements

  • Implement a requestAnimationFrame loop to track mouse velocity vectors globally.
  • Utilize standard 2D vector math to calculate collisions with pre-registered DOM rectangles.
  • Trigger queryClient.prefetchQuery when the collision probability exceeds a strict threshold.

Acceptance Criteria

  • Data fetching reliably begins milliseconds prior to the physical mouse click.
  • The mathematical loop consumes less than 1% of the rendering frame budget.
  • Mobile devices gracefully fallback to standard IntersectionObserver prefetching.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions