Works Wheel

Galleries 2.2K

About

A portfolio/project index that displays items in a ring around a title and, on scroll or drag, opens into a 3D drum carousel you turn through one item at a time.

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

Code

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

Usage.tsx

"use client";

import { WorksWheel, type WorksWheelItem } from "@/components/ui/works-wheel";

// Placeholder art served straight off the crafterui CDN so the demo works the
// moment it is installed - no assets to copy into your public/. Swap the names
// and the titles for your own index - the wheel sizes its ring to however many
// pieces it is handed.
const ART = (name: string) => `https://www.crafterui.com/art/${name}.jpg`;

const WORKS: WorksWheelItem[] = [
  {
    title: "Prismatic Rift",
    image: ART("prismatic-rift-anime"),
    href: "#prismatic-rift",
  },
  {
    title: "Ember Clouds",
    image: ART("black-hole-ember-clouds"),
    href: "#ember-clouds",
  },
  {
    title: "Neon Portal",
    image: ART("neon-cave-portal-silhouette"),
    href: "#neon-portal",
  },
  {
    title: "Red Ribbon",
    image: ART("red-ribbon-typography"),
    href: "#red-ribbon",
  },
  {
    title: "Celestial",
    image: ART("celestial-light-figure"),
    href: "#celestial",
  },
  { title: "Uplight", image: ART("neon-portrait-uplight"), href: "#uplight" },
  {
    title: "Indigo Marble",
    image: ART("indigo-liquid-marble"),
    href: "#indigo-marble",
  },
  {
    title: "Launch Window",
    image: ART("rocket-launch-gradient"),
    href: "#launch-window",
  },
  {
    title: "Cosmic Wave",
    image: ART("astronaut-cosmic-wave"),
    href: "#cosmic-wave",
  },
];

export default function WorksWheelDemo() {
  return (
    <div className="bg-background text-foreground w-full h-screen">
      <WorksWheel items={WORKS} label="Works '26" action="View" />
    </div>
  );
}