Super Hover List

Component 45

About

A scrollable indexed list (like an album or file browser) whose active row and its revealed cover artwork keep following the cursor even while the list scrolls beneath a still pointer, using frame-by-frame hit-testing instead of native CSS hover.

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

Code

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

Usage.tsx

"use client";

import {
  SuperHoverList,
  type SuperHoverListItem,
} from "@/components/ui/super-hover-list";

// Placeholder cover art served straight off the crafterui CDN so the demo
// works the moment it is installed - no assets to copy into your public/.
const ART = (name: string) => `https://crafterui.com/art/${name}.jpg`;

const COVERS = [
  ART("prismatic-rift-anime"),
  ART("black-hole-ember-clouds"),
  ART("neon-cave-portal-silhouette"),
  ART("red-ribbon-typography"),
  ART("celestial-light-figure"),
  ART("neon-portrait-uplight"),
  ART("indigo-liquid-marble"),
  ART("rocket-launch-gradient"),
  ART("astronaut-cosmic-wave"),
];

const TITLES = [
  "Selected Ambient Works 85-92",
  "Ambient 1 (Music For Airports)",
  "Ambient 4 (On Land)",
  "Slave Ambient",
  "Ambient Black Magic",
  "Pop Ambient 2015",
  "Hostile Ambient Takeover",
  "The Ambient Collection",
  "Ambient Senses",
  "Ambient Intermix",
  "Ambient Systems II",
  "Ambient 2 (The Plateaux Of Mirror)",
];
const ARTISTS = [
  "Aphex Twin",
  "Brian Eno",
  "Various",
  "The War On Drugs",
  "Moby",
  "Melvins",
  "Art Of Noise",
  "Laraaji",
];
const YEARS = [
  "1992",
  "1979",
  "1982",
  "2011",
  "2017",
  "2015",
  "2021",
  "1990",
  "1994",
  "1995",
  "1996",
  "1980",
];

const ITEMS: SuperHoverListItem[] = Array.from({ length: 36 }, (_, i) => ({
  id: i,
  title: TITLES[i % TITLES.length],
  subtitle: ARTISTS[i % ARTISTS.length],
  meta: YEARS[i % YEARS.length],
  image: COVERS[i % COVERS.length],
}));

export default function SuperHoverListDemo() {
  return (
    <div className="bg-background text-foreground relative h-screen w-full">
      <SuperHoverList items={ITEMS} autoplay speed={0.3} />
    </div>
  );
}