Orbital Image Wheel

Renders an image wheel with circularly arranged items. It rotates smoothly, responds to user gestures, and snaps to items when needed. Use it to display a collection of images in an interactive, orbital layout.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/orbital-image-wheel

npx layro-cli add @educlopez/orbital-image-wheel

npx layro-cli add @educlopez/orbital-image-wheel

bunx layro-cli add @educlopez/orbital-image-wheel

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useReducedMotion } from "motion/react";
import {
  type KeyboardEvent,
  type FocusEvent as ReactFocusEvent,
  type PointerEvent as ReactPointerEvent,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";