Adventureland Registry
Motion / Effects

Kinetic Cursor

A pixel cursor that flies between points, swaps to a pointer on hover, and clicks.

RemotionCursor animates a pixel-art cursor (Kenney CC0) between two points, swaps arrow → pointer to signal hover, and emits a click ripple at a chosen frame. Pass posterizeFps to sample the flight "on twos" for a stop-motion feel; the click stays on the native frame so it lands as a clean beat. Sprites are served from public/cursors/.

Installation

npx shadcn@latest add @adv/kinetic-cursor

Usage

import { RemotionCursor } from '@adv/motion';

<RemotionCursor
  path={{ enterFrame: 0, arriveFrame: 45, clickFrame: 55, from: { x: 120, y: 280 }, to: { x: 420, y: 130 } }}
  posterizeFps={12}
/>

Example

On this page