Tactile Highlight

Heroes 83

About

An animated text highlight that draws a background block behind text on scroll-into-view or hover, using mix-blend-difference for automatic light/dark contrast.

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

Code

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

Usage.tsx

import TactileHighlight from "@/components/ui/tactile-highlight";

export default function TactileHighlightDemo() {
  return (
    <div className="flex flex-col items-center justify-center py-24 px-6 text-center min-h-[50vh]">
      <p className="text-4xl md:text-6xl font-bold tracking-tighter text-zinc-900 dark:text-zinc-50 leading-[1.2] max-w-4xl">
        Our mission is to build{" "}
        <TactileHighlight direction="left" delay={0.2} trigger="inView">
          Better Interfaces.
        </TactileHighlight>
      </p>
    </div>
  );
}