Radial Carousel

Renders a radial carousel with spring animations and drag-to-rotate interaction. Displays items in a circular layout that responds to user input. Shows a centered image or a radial layout depending on state. Use when displaying a set of images in an interactive, visually engaging way.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/radial-carousel

npx layro-cli add @watermeloncorp/radial-carousel

npx layro-cli add @watermeloncorp/radial-carousel

bunx layro-cli add @watermeloncorp/radial-carousel

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

Code

Demo

'use client';

import React, { useState, useCallback, useEffect } from 'react';
import {
  motion,
  AnimatePresence,
  type Variants,
  useMotionValue,
  useSpring,
  useTransform,
} from 'motion/react';
import { X } from 'lucide-react';

export interface GalleryItem {