Smooth Cursor

Source: Magic UI ↗
Author: Magic UI
Licence: MIT

Loading…

A spring-driven arrow cursor that turns to face its direction of travel.

Code

"use client";

import { SmoothCursor } from "@/lab/magicui/ui/smooth-cursor";

export default function SmoothCursorDemo() {
  return (
    <div className="relative flex h-full w-full items-center justify-center overflow-hidden text-neutral-700">
      <span className="hidden md:block">Move your mouse around</span>
      <span className="block md:hidden">SmoothCursor is disabled on touch devices</span>
      <SmoothCursor />
    </div>
  );
}

Prompt

Build "Smooth Cursor", a cursor animation. What it does: A spring-driven arrow cursor that turns to face its direction of travel. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS, using motion. Technique: a requestAnimationFrame loop, the Motion library, inline SVG, pointer tracking. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://magicui.design/docs/components/smooth-cursor (Magic UI, MIT).