Letter Hover

Each letter lifts and tints as the cursor passes over it.

Text effectsServer-safe

Install

bash

npx @agents-npm-packages/vibeui add letter-hover --dir ./src/components/ui

Import

tsx

import { LetterHover } from "@/components/ui/letter-hover"

API

Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.

<LetterHover>

Prop	Type	Default	Description
text*	string	—	The text to render.
className	string	—	Extra classes, merged with the component's own.

Source

src/components/ui/letter-hover.tsx

import { cn } from "@/lib/utils";

/** Each letter lifts and tints as the cursor passes over it. */
export function LetterHover({
  text,
  className,
}: {
  text: string;
  className?: string;
}) {
  return (
    <span
      className={cn("inline-flex font-medium tracking-[-0.02em] text-ink", className)}
      aria-label={text}
    >
      {text.split("").map((char, i) => (
        <span
          key={i}
          aria-hidden
          className="inline-block transition-[transform,color] duration-300 ease-spring hover:-translate-y-1.5 hover:text-accent"
        >
          {char === " " ? " " : char}
        </span>
      ))}
    </span>
  );
}

Exports LetterHover. Peer dependencies: clsx, tailwind-merge.