Return

Cursor Carousel

Six full-bleed panels slide over one another with a single cubic-bezier curve, and each one owns a different cursor behaviour. The pointer tracks inside the preview, the arrow and dot cursors accumulate rotation from movement direction, the glitch cursor offsets its RGB channels by the last delta, and the motion cursor drives an SVG Gaussian blur from velocity. Because the cursor lives inside the preview box it can never escape the frame.

cursor-carousel-preview

Loading preview...

Why it helps: It turns the pointer itself into content - proof that a UI can be expressive without a single extra control or panel of settings.

Also good to know:

  • -Hides the native cursor, so it only works where a real pointer exists (no touch equivalent)
  • -Direction and blur maths run on every pointer move - fine at this scale, but not free
  • -Custom cursors are decorative only and add no affordance for keyboard users

Source

components/live/CursorCarousel.tsx
// Loading source...

Usage

example.tsx
import { CursorCarousel } from "@/components/live/CursorCarousel";

<CursorCarousel
  className="w-full aspect-video"
/>

Props

className-
string

Additional CSS classes.