Disc Reveal List

Component 3

About

A hover-reveal list: titles scatter their letters, the other rows dim, and spinning colour-rimmed CDs or polaroids spring in around the active row.

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

Code

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

Usage.tsx

import { DiscRevealList } from "@/components/ui/disc-reveal-list";

const img = (id: string) =>
  `https://images.unsplash.com/${id}?w=600&q=80&auto=format&fit=crop`;

const items = [
  {
    title: "Songs",
    subtitle: "Every track we've pressed",
    href: "#",
    media: {
      kind: "disc" as const,
      images: [img("photo-1470225620780-dba8ba36b745")],
    },
  },
  {
    title: "Team",
    subtitle: "The people behind the sound",
    href: "#",
    media: {
      kind: "disc" as const,
      images: [
        img("photo-1494790108377-be9c29b29330"),
        img("photo-1507003211169-0a1dd7228f2d"),
        img("photo-1500648767791-00dcc994a43e"),
        img("photo-1438761681033-6461ffad8d80"),
        img("photo-1534528741775-53994a69daeb"),
      ],
    },
  },
  {
    title: "Behind the Scenes",
    subtitle: "Studio nights and rough takes",
    href: "#",
    media: {
      kind: "photos" as const,
      images: [
        img("photo-1598488035139-bdbb2231ce04"),
        img("photo-1516280440614-37939bbacd81"),
        img("photo-1508700115892-45ecd05ae2ad"),
      ],
    },
  },
];

export default function DiscRevealDemo() {
  return (
    <main className="flex min-h-dvh w-full flex-col justify-center overflow-x-clip bg-[#f3ede2] py-16 font-sans">
      <DiscRevealList items={items}>
        <p className="mt-10 text-center text-sm tracking-tight text-[#6f6355]">
          by{" "}
          <a
            href="https://aakashmehra.com/ref/discreveallist"
            target="_blank"
            rel="noopener noreferrer"
            className="font-medium text-[#3d342b] underline-offset-4 hover:underline"
          >
            aakashmehra.com
          </a>
        </p>
      </DiscRevealList>
    </main>
  );
}