"use client"; import { type PanInfo, motion, useAnimation, useMotionValue, useTransform, } from "framer-motion"; import { AlarmClockIcon, ArchiveIcon, EyeIcon, MailIcon, NetworkIcon, PhoneIcon, SettingsIcon, SpeakerIcon, UserIcon, } from "lucide-react"; import { useId } from "react"; import { cn } from "#/src/utils/cn"; export function CarouselCylindricalVariant1() { const cylinderWidth = 1500; const faceCount = IconList.length; const faceWidth = cylinderWidth / faceCount; const dragFactor = 0.05; const radius = cylinderWidth / (2 * Math.PI); const rotation = useMotionValue(0); const controls = useAnimation(); const handleDrag = (_: unknown, info: PanInfo) => { rotation.set(rotation.get() + info.offset.x * dragFactor); }; const handleDragEnd = (_: unknown, info: PanInfo) => { controls.start({ rotateY: rotation.get() + info.velocity.x * dragFactor, transition: { type: "spring", stiffness: 100, damping: 30, mass: 0.1 }, }); }; const transform = useTransform(rotation, (value) => { return `rotate3d(0, 1, 0, ${value}deg)`; }); const id = useId(); return (

{IconList.map((Item, index) => { return (

); })}

); } const IconList = [ UserIcon, NetworkIcon, EyeIcon, SpeakerIcon, SettingsIcon, PhoneIcon, MailIcon, AlarmClockIcon, ArchiveIcon, ];

Cylindric 3D Carousel