Skip to content
Pinky UI

text

Hover Text Reveal

A focused alternate label transition.

  • text

Live preview

View project

Quick usage

usage
import { HoverTextReveal } from "@pinky-ui/effects";

<HoverTextReveal />

Install

Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/effects

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

Purpose

HoverTextReveal swaps a primary label for a short secondary label such as “View project” → “Open project →” on hover or focus. It is a compact action affordance, not a content transition.

Keep both labels concise and similar in width. Use it on a real link/button or a small focused label. Do not put essential instructions only in the alternate phrase or use it on long sentences.

Focus activates the same state as hover, and the primary label remains the accessible name. Ensure the static label is still clear with reduced motion or when transitions are disabled.

Open this skill on its own page