Tactile Highlight

The Tactile Highlight component is designed to emphasize important text with a premium, physics-based animation. It supports multiple directions and features a reactive ripple effect on hover.

Preview

import { TactileHighlight } from "@/registry/spark-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>
  );
}

Our mission is to build Better Interfaces.

Installation

$ npx shadcn@latest add https://spark-ui-olive.vercel.app/r/tactile-highlight.json

Usage

import { TactileHighlight } from "@/components/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>
  );
}

Properties

Prop	Type	Default	Description
`color`	`string`	`"bg-primary/20"`	The Tailwind background color class for the highlight.
`direction`	`"left" \| "right" \| "top" \| "bottom"`	`"left"`	The entry direction of the highlight animation.
`delay`	`number`	`0`	Animation delay in seconds.
`triggerOnce`	`boolean`	`true`	Whether the animation should only trigger the first time it enters view.