Link Preview
0
Used by 0Controls
Link Preview
Reveal a floating thumbnail of any linked page on hover, with the preview leaning toward your cursor as it moves.
KEY FEATURES
- — Cursor-tracking preview that leans toward the pointer with spring physics
- — Original mode pulls the link's live og:image or screenshot via microlink
- — Custom uploaded image mode with responsive srcSet
- — Spring-driven fade, rise, and scale entrance and exit
- — Adjustable preview width and height
- — Configurable corner radius
- — Toggleable drop shadow with custom shadow color
- — Custom text and underline colors
- — Extended font controls for family, weight, size, and letter spacing
- — Opens the destination link in a new tab
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
title
string
Lander Studio
Text shown as the underlined inline link.
link
string
https://lander.studio/
Destination URL opened on click and previewed on hover.
imageMode
enum
original
Preview source: the link's own live screenshot or a custom image.
customImage
responsiveimage
{"..."}
Image shown in the preview when Image is set to Custom.
previewWidth
number
520
Width of the floating preview thumbnail in pixels.
previewHeight
number
300
Height of the floating preview thumbnail in pixels.
radius
number
0
Corner rounding of the preview thumbnail in pixels.
shadow
boolean
true
Turns on a drop shadow beneath the floating preview.
shadowColor
color
rgba(0,0,0,0.30)
Color of the preview's drop shadow.
textColor
color
#ffffff
Color of the link title text.
underlineColor
color
#ffffff
Color of the underline beneath the link text.
font
font
{"..."}
Font family, weight, size, spacing, and alignment of the link text.
