Installation
Usage
import AnimatedLink from "@/components/ruixen/animated-link";
export default function App() {
return (
<AnimatedLink href="mailto:[email protected]" variant="left">
[email protected]
</AnimatedLink>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | - | The link destination (required) |
variant | "left" | "right" | "center" | "left" | Direction the underline reveals from on hover |
showArrow | boolean | true | Show the diagonal arrow that lifts in on hover |
className | string | - | Additional CSS classes |
All other native anchor (<a>) props are forwarded.
Variants
left— the underline wipes in from the left edge.right— the underline wipes in from the right edge.center— the underline grows outward from the center.
Features
- Pure CSS: No JavaScript or animation library — the reveal runs entirely on CSS transitions, so it works in any React tree (server or client) with zero dependencies.
- Theme-Aware: The underline uses
bg-current, inheriting the text color so it adapts to light and dark themes automatically. - Directional Underline: Three transform-origin variants control whether the line enters from the left, the right, or expands from the center.
- Lift-In Arrow: An optional diagonal arrow fades up into place on hover, signalling an outbound or actionable link.
- Reduced-Motion Friendly: Transitions are disabled for users who prefer reduced motion.