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

Our mission is to build Better Interfaces.

Usage

Installation

$ pnpm dlx shadcn add https://klarden.vercel.app/r/tactile-highlight.json

Basic Example

import { TactileHighlight } from "@/components/tactile-highlight";

export default function App() {
  return (
    <p>
      Our mission is to build <TactileHighlight direction="left">Better Interfaces</TactileHighlight>.
    </p>
  );
}

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.