Sphere Menu

Installation

CommandManual

pnpmnpmyarnbun

pnpm dlx shadcn@latest add @cortexcn/sphere-menu

Usage

import { SphereMenu } from "@/components/sphere-menu";

<SphereMenu
  items={[
    {
      image: "/work/one.jpg",
      title: "Project one",
      description: "A short line about it.",
      href: "/work/one",
    },
    {
      image: "/work/two.jpg",
      title: "Project two",
      href: "/work/two",
    },
  ]}
/>

Use it for a portfolio, a gallery, or a playful way into the sections of a site. The items repeat around the sphere, so a few are enough.

Examples

More tiles

tiles sets how many tiles cover the sphere, and scale how large the sphere is in its box.

Behavior

• Tiles are spread evenly over a sphere, and the sphere is drawn with CSS 3D transforms, not WebGL, so there is nothing to load and the tiles are real images.
• Drag in any direction to turn it. Let go and it keeps spinning, slows down, and turns the nearest tile to face you, standing it upright. The sphere draws back a little while you drag.
• When it comes to rest, the front tile's title, description, and link fade in. They fade out as soon as it moves again.
• With the keyboard, focus the sphere and use the arrow keys to turn it to the next tile. Every item is also listed as a plain link for screen readers.
• Tiles fade out as they turn toward the edge, and the far side is hidden.
• The animation only runs while the sphere moves. With reduced motion enabled, it stops where you let go and turns to the nearest tile without easing.
• No 3D or math library is used, so it adds no dependencies.

Props

SphereMenu

SphereMenuItem