ForesightJS

Prefetch Smarter

Mouse Trajectory Prediction

Make your app feel instantaneous. By analyzing mouse movements, we prefetch pages and data the moment a user heads towards a link, making navigation feel incredibly fast.

Keyboard Navigation

Prefetch content as users tab through links, making sure keyboard users have the same blazingly fast experience as mouse users.

Scroll-Based Prediction

Prefetches content around the mouse in the direction the user is scrolling. For those links that just pop into the viewport!

Optimized for Performance

Built with performance in mind using observers, minimal DOM queries, and caching to avoid layout thrashing and unnecessary computations. Read about the magic in our behind the scenes

Note: The interactive demos on this page work only on desktop with a mouse and keyboard. You can still read the documentation on mobile, but to fully experience the ForesightJS mouse trajectory prediction, please try the demos on a desktop device.

Playground

See predictions trigger in real-time with Debug Mode. Move your mouse, scroll or use Tab navigation to experience intent detection.

Traditional Prefetching

ForesightJS Prefetching

TIP: Try using Tab and Shift+Tab to navigate through the buttons above

TIP: Open the debugger in the bottom-right corner to change how ForesightJS behaves in real time

Quick Start

Start predicting user intent in under 5 minutes. Zero complex setup.

Basic Usage

import { ForesightManager } from 'js.foresight'

// Initialize the manager
ForesightManager.initialize({
  enableMousePrediction: true,
  trajectoryPredictionTime: 100,
  tabOffset: 2
})

// Register an element for prediction
const button = document.querySelector('#my-button')
ForesightManager.instance.register({
  element: button,
  callback: () => {
    // Prefetch data or prepare content
    console.log('User intent detected!')
  }
})

What you get:

Mouse prediction: Detect cursor trajectory towards elements
Keyboard support: Predict tab navigation patterns
Scroll Prediction: Detect scrolling towards a fetchable element
Debug mode: Visual feedback for fine-tuning
TypeScript: Full type safety out of the box

Full Documentation Configuration

Premade Framework Integrations:

Next.js React Router

Your User's Next Move.Already Fetched.