Featured

Link Preview

Hyperlinks that summon a directional image tooltip — springy entry, cursor-tracked glide, and a parallax tilt on the artwork inside.

All components

Now reading

Spy × Family

To maintain world peace, a master spy codenamed Loid must create a fake family to infiltrate an elite school. He unknowingly recruits a telepathic daughter named Anya and a professional assassin named Yor. Together, they navigate the "micro-details" of daily life while hiding their secret identities from each other.

Installation

Coming soon. Components will be available via the registry once checkout goes live.

Usage

<p>
  Read more about{" "}
  <LinkPreview href="/posts/spy-x-family" src="/spyxfamily/spyx.webp" alt="Spy x Family">
    Spy × Family
  </LinkPreview>
  .
</p>

Props

Prop	Type	Default	Description
href*	string	—	Destination URL for the underlying anchor.
src*	string	—	Preview image shown in the hover tooltip.
alt	string	—	Alt text for the preview image.
width	number	200	Preview tooltip width in px.
height	number	140	Preview tooltip height in px.
children*	ReactNode	—	The visible link text.
className	string	—	Classes applied to the anchor.

Use cases

Editorial article body
Inline links in long-form blog posts that preview the destination without a click.
Wiki / docs cross-references
Replace plain `[term]` links with a glanceable preview of the target page.
Changelog entries
Link to PRs, designs, or videos with an instant thumbnail.
Mentions in chat / comments
@-mentions of people or projects that expand into an avatar / cover on hover.