Link Preview
Hovering an anchor floats up a live website preview card that tilts as it follows the cursor, drawn purely with canvas 2D and needing no external images.
Hovering an inline link floats a lifelike website preview card above it — the browser toolbar, the address bar, and the landing page layout are all drawn live with canvas 2D, with the color scheme generated automatically from the domain. The card moves horizontally with the cursor and tilts slightly.
npx shadcn@latest add https://webberui.com/r/link-preview.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<LinkPreview />
Installation
npx shadcn@latest add https://webberui.com/r/link-preview.jsonOr, once registries are configured in components.json, install it as @webberui/link-preview.
Usage
import { LinkPreview } from "@/components/ui/link-preview";
<p>
We build our animations with <LinkPreview url="https://motion.dev">Motion</LinkPreview>.
</p>children is the visible anchor content, and url serves both as the link target and as the color seed for the preview card. The same domain always produces the same hue.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
url | string | — | Link target, also used to generate the domain bar and the color scheme |
children | React.ReactNode | — | The visible anchor content |
width | number | 320 | Preview card width (px) |
height | number | 200 | Preview card height (px) |
accent | string | — | Overrides the accent color (HSL/HEX); derived from a hash of the domain when omitted |
follow | number | 40 | Maximum horizontal offset by which the card follows the cursor (px) |
openInNewTab | boolean | true | Whether to open the link in a new tab |
className | string | — | Forwarded to the anchor styling |
Accessibility
- When the user has "reduce motion" enabled at the system level, the card uses a fade in / fade out instead of the spring animation for following and tilting
- The link is keyboard focusable, and the preview card floats up on
focusas well; the preview card itself is markedaria-hiddenand does not interfere with announcements - The canvas is only drawn inside
useEffectand scaled bydevicePixelRatio, so SSR produces no hydration mismatch