👆Show Pointer Cursor during View Transitions

A small component that prevents the cursor from switching when you start a view transition via the navigation bar.

Note: Seeing an arrow instead of the expected pointer during view transitions isn’t entirely a bad thing. It signals to the user that the page is temporarily non-interactive. Even if you force the pointer to remain, clicking links won’t work while the animations are playing.

Note 2: For browsers that support :active-view-transition this effect can also be accomplished with pure CSS:

1
:active-view-transition {
2
  cursor: pointer;
3
}

Why would I use this component?
Usage

Why would I use this component?

Yes, navbars are a primary use case. More broadly: The element that initiates the view transition has a cursor: pointer CSS property, and on the new page, there is also an element with cursor: pointer at the same position in the viewport. While the view transition is animating, browsers display the default arrow cursor. It’s only after the animation completes that they apply your CSS for the new element and switch the cursor back to pointer.

The component is used here on the Jotter, if you want to take a look. But it works independent of Starlight. You can use it on any project.

Usage

Install astro-vtbot in your project running npx astro add astro-vtbot or npm install astro-vtbot.

Place the <Pointer /> component in the <head> of a page near Astro’s <ViewTransitions />. Done.

1
---
2
import { ViewTransitions } from 'astro:transitions';
3
import PointerOnNavigation from 'astro-vtbot/components/PointerOnNavigation.astro';
4
---
5
<html>
6
  <head>
7
    <ViewTransitions />
8
    <PointerOnNavigation/>
9
    ...
10
  <head/>
11
  ...
12
</html>

There are no parameters to configure.

👆Show Pointer Cursor during View Transitions

Contents

Why would I use this component?

Usage