Bold on hover

Text 52

About

When you hover over this text, each letter will become bolder, creating a new minimal text effect

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

Code

How Bold on hover is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import  BoldOnHover  from "@/components/ui/bold-on-hover"

export function BoldOnHoverDemo() {
  return (
    <div className="bg-background flex h-dvh w-dvw flex-col items-center justify-center">
      <div className="flex items-center justify-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          width={50}
          height={50}
          viewBox="0 0 27 78"
          aria-hidden="true"
        >
          <path
fill="currentColor"
            d="M26.52 77.21h-5.75c-6.83 0-12.38-5.56-12.38-12.38V48.38C8.39 43.76 4.63 40 .01 40v-4c4.62 0 8.38-3.76 8.38-8.38V12.4C8.38 5.56 13.94 0 20.77 0h5.75v4h-5.75c-4.62 0-8.38 3.76-8.38 8.38V27.6c0 4.34-2.25 8.17-5.64 10.38 3.39 2.21 5.64 6.04 5.64 10.38v16.45c0 4.62 3.76 8.38 8.38 8.38h5.75v4.02Z"
          ></path>
        </svg>
        <h2 className="ml-2 text-[18px] font-bold tracking-tight">
          {" "}
          21ST DEV{" "}
        </h2>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 27 78"
          width={50}
          height={50}
          className="rotate-180"
          aria-hidden="true"
        >
          <path
fill="currentColor"
            d="M26.52 77.21h-5.75c-6.83 0-12.38-5.56-12.38-12.38V48.38C8.39 43.76 4.63 40 .01 40v-4c4.62 0 8.38-3.76 8.38-8.38V12.4C8.38 5.56 13.94 0 20.77 0h5.75v4h-5.75c-4.62 0-8.38 3.76-8.38 8.38V27.6c0 4.34-2.25 8.17-5.64 10.38 3.39 2.21 5.64 6.04 5.64 10.38v16.45c0 4.62 3.76 8.38 8.38 8.38h5.75v4.02Z"
          ></path>
        </svg>
      </div>
      <h1 className="mt-6 text-center text-5xl italic">
        <BoldOnHover
          text="GET SKIPER UI PRO"
          initialStyle="'wght' 400, 'slnt' 0"
          hoverStyle="'wght' 900, 'slnt' -10"
        />
      </h1>
    </div>
  );
}