Morphing Cursor

Text 1.4K

About

An exceptional cursor-follow component with smooth morphing, color inversion, and magnetic effects.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Morphing Cursor to your project and fits it to your theme.

Code

How Morphing Cursor is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { MagneticText } from "@/components/ui/morphing-cursor"

export default function Page() {
  return (
    <main className="min-h-screen bg-background flex flex-col items-center justify-center gap-16 p-8">
      <p className="text-muted-foreground text-xs tracking-[0.25em] uppercase">Hover to interact</p>

      <div className="flex flex-col items-center gap-8">
        <MagneticText text="CREATE" hoverText="ELEVATE" />
        <MagneticText text="VISION" hoverText="DESIGN" />
      </div>
    </main>
  )
}