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.
"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>
);
}