Components

Hover Preview

An inline link that opens a cursor-following image preview, with velocity tilt, parallax, and only one card open at a time.

npx shadcn@latest add https://www.obuseklearns.dev/r/hover-preview.json

Recently I built TypeLane and Kumari Decors.

Usage

hover-preview-demo.tsx
import { HoverPreview } from "@/components/ui/hover-preview";

export function HoverPreviewDemo() {
  return (
    <p className="max-w-sm text-center text-lg leading-relaxed text-foreground">
      Recently I built{" "}
      <HoverPreview
        src="/typelane/demo-image.png"
        alt="TypeLane"
        accent="text-green-600"
      >
        TypeLane
      </HoverPreview>{" "}
      and{" "}
      <HoverPreview
        src="/kumari-decors/ss.png"
        alt="Kumari Decors"
        accent="text-gray-400"
      >
        Kumari Decors
      </HoverPreview>
      .
    </p>
  );
}