Arrow link
A big arrow link that rises from a mask on first view; on hover or focus the arrow slides and the label rolls over.
Behaviour
- Rises out of a mask the first time it scrolls into view. Without JavaScript it is simply visible.
- On hover or keyboard focus the arrow slides right (0.17em, so it scales with the type) and the label rolls up, a copy rising from below. The roll is a flat translate inside its own clip, so the hover area stays the link's box.
- Hover only runs with a mouse or trackpad, so a tap never leaves it stuck.
- A wrapped label keeps the arrow on its first line and hyphenates long words (set lang on the page).
- In RTL the arrow points and slides the other way.
- Reduced motion: it fades in instead of rising, the arrow stays put and the label dims to 70% on hover or focus instead of rolling.
Props
| Prop | Type | Description |
|---|---|---|
| children | string | The label. |
| href | string | Where it goes. Every other <a> prop is passed through too. |
| className | string | Merged with cn(). Size (default text-5xl) and colour come from here. |
Installation
npx shadcn@latest add https://purrfectui.com/r/arrow-link.jsonHow to use
import { ArrowLink } from "@/components/ui/arrow-link";
<ArrowLink href="mailto:hello@example.com">Get in touch</ArrowLink>Source code
Loading…
Credits
Ported from poinu.vercel.app.
License
MIT. Copy it into your project and change it as you like.