HoverRevealLink
A grey link chip. Hover or focus lifts the link icon clear of the chip, then a white pill unrolls to the right of it with the URL the link points at.
Usage
<HoverRevealLink
href="https://example.com/portfolio"
label="Hover me"
lift={60}
intensity="normal"
spring="smooth"
/>How the motion works
The pill sits directly over the chip's left cap — same height, same left edge — so at rest it is invisible as a separate surface and the lift is the only thing that introduces it. The reveal runs in two beats on two springs: the icon rises, and the unroll is triggered by the lift crossing 70% rather than by a timer, so the handoff tracks the spring's real settling instead of an assumed duration. The exit runs the same sequence backwards — roll up, then drop. As the icon vacates its slot the label slides to re-centre in the chip, by exactly half the padding asymmetry, so the chip's width never moves. The pill's width is measured from the URL text rather than animated to auto, which keeps the unroll linear in the URL's real length at any font size. The reveal is bound to focus as well as hover, and the pill never takes pointer events so it cannot steal the hover from the chip.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | — | Link target. |
| label | ReactNode | "Hover me" | Text shown inside the grey chip. |
| url | string | — | URL text on the revealed pill. Defaults to the href. |
| icon | ReactNode | — | Icon that rises out of the chip. Defaults to a link glyph. |
| lift | number | 60 | How far the icon rises out of the chip, in px. Must clear the chip's height. |
