Roll link

A link whose label rolls over on a 3D axis on hover or focus.

Behaviour

Reduced motion: the two faces cross-fade, nothing turns.
On hover or keyboard focus the label tips back on a 3D axis while a copy swings up from below.
CSS only: it renders on the server and ships no JavaScript. Hover only runs on devices that can hover.

Props

Prop	Type	Description
children	`string`	The label.
asChild	`boolean`	Render your one child (a Next Link) as the link; its children are the label.
className	`string`	Merged with cn(). Size and colour come from here.

Installation

npx shadcn@latest add https://purrfectui.com/r/roll-link.json

How to use

import Link from "next/link";
import { RollLink } from "@/components/ui/roll-link";

<RollLink href="#work">Work</RollLink>
<RollLink asChild>
  <Link href="/about">About</Link>
</RollLink>

Source code

Loading…

Credits

Ported from vaibhavtomar.com.

License

MIT. Copy it into your project and change it as you like.