Hover Reel

Component 10

About

A portfolio project list where hovering a title blooms a floating image preview under the cursor that follows it, rolling to the next picture as you move between rows.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hover Reel to your project and fits it to your theme.

Code

How Hover Reel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { HoverReel } from "@/components/ui/hover-reel";

export default function Demo() {
  return (
    <div className="flex min-h-full w-full flex-col justify-center py-12 bg-[#f2f0ec] text-black">
      <p className="mx-auto mb-6 w-full max-w-[72rem] px-[clamp(1.25rem,5vw,4rem)] font-mono text-[11px] uppercase tracking-[0.16em] text-black/45">
        Selected work · 2023–2026
      </p>
      <HoverReel theme="paper" />
    </div>
  );
}