Link Preview — React Component

Hover-triggered image tooltip that transforms inline text links into cinematic visual previews. Spring-animated entrance with blur, scale, mouse-tracking tilt, and a soft floating glide — perfect for blogs, portfolios, and product pages.

Motion Effectshoverspringtooltiphoverlinkpreviewframer-motionbloganimation

Link Preview

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

href

Destination URL — internal path or external https:// link.

image

Image URL to display inside the preview card.

title

Optional label shown beneath the card alongside the hostname.

width

Preview card width in px.

height

Preview card height in px.

delay

Entrance animation delay in seconds.

previewClassName

Extra className applied to the tooltip wrapper.

openInNewTab

Opens the link in a new tab when true.

Generated JSX

Copy this into your page.

<createPortal
  href=""
  image=""
  title="undefined"
  width={320}
  height={200}
  delay={0.08}
  previewClassName="undefined"
  openInNewTab={true}
/>

Animation effects

hoverspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Installation

Link Preview

Shape the component before you copy it.

Animation effects