Highlight Cursor

Heroes 1

About

An animated custom cursor that highlights the line of text under the pointer with a colored box and arrow, for hero headlines and marketing copy.

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

Code

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

Usage.tsx

"use client";

import { Highlight, HighlightCursor } from "@/components/ui/highlight-cursor";

const COLORS: Record<string, string> = {
  teal: "#5fd4bf",
  violet: "#a78bfa",
  amber: "#fbbf24",
  rose: "#fb7185",
  sky: "#60a5fa",
  lime: "#a3e635",
};

export default function Demo({ variant = "teal" }: { variant?: string }) {
  const color = COLORS[variant] ?? COLORS.teal;
  return (
    <HighlightCursor
      color={color}
      className="min-h-full w-full text-white"
      style={{
        background: "#050505",
        fontFamily: "Geist, ui-sans-serif, system-ui",
      }}
    >
      <div className="mx-auto flex min-h-full w-full max-w-5xl flex-col justify-center px-5 py-16 sm:px-10">
        <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-white/45">
          Weekend planner · Muscat
        </p>
        <Highlight
          as="h2"
          text={"Plan the whole weekend —\nyou'll actually be there."}
          className="mt-5 text-[clamp(2rem,6.4vw,4.6rem)] font-medium leading-[1.12] tracking-[-0.035em]"
        />
        <Highlight
          as="p"
          text="The weekend planner that books everything in one go — dinner, a sunset outing, a desert hike — and tells everyone where to be, and when."
          className="mt-7 max-w-[46ch] text-[clamp(1.05rem,1.8vw,1.3rem)] leading-[1.55] text-white/80"
        />
      </div>
    </HighlightCursor>
  );
}