Kembali ke UI Craft/3D & Motion

Circular 3D Product Carousel

Karusel silinder 3D berbasis CSS perspective murni dengan drag/swipe fisika, wheel scrub di area tengah, auto-orbit mulus, serta kartu kaca & SVG art bawaan.

3d-cylindercarouseldrag-swipeglassmorphismzero-deps
LIVE INTERAKTIF
100%
AAbattana.id/components/circular-gallery

MacBook Pro 16" M5 · 1440 × 900 px

Dependensi:react^19.0.0
1"use client";
2 
3import React from "react";
4import { CircularGallery, type GalleryItem } from "@/components/ui/circular-gallery";
5 
6const SHOWCASE_ITEMS: GalleryItem[] = [
7  {
8    id: "doiku-wealth",
9    common: "DOIKU · Wealth Hub",
10    binomial: "Fintech & Gemini Vision OCR",
11    badge: "FINTECH AI",
12    isFlagship: true,
13    overlayColor: "#0F766E",
14    cardGradientFrom: "#FFFFFF",
15    cardGradientVia: "#F0FDF9",
16    cardGradientTo: "#CCFBF1",
17    artwork: (
18      <svg viewBox="0 0 180 155" className="w-full h-full drop-shadow-md">
19        <rect x="14" y="8" width="152" height="106" rx="14" fill="rgba(255,255,255,0.9)" stroke="#99F6E4" strokeWidth="1.4" />
20        <rect x="24" y="18" width="84" height="26" rx="8" fill="#0F766E" />
21        <text x="31" y="39" fontSize="9.5" fontWeight="800" fill="#FFFFFF">Rp 428.5M</text>
22        <path d="M 24 78 C 44 78, 52 62, 72 66 C 90 70, 102 48, 122 52 C 138 55, 146 42, 156 44" fill="none" stroke="#0F766E" strokeWidth="2.5" />
23      </svg>
24    ),
25    summary: "Real-time net worth tracker & AI receipt scanner.",
26  },
27  // Pass 6–8 items for tight 45-degree spacing around the center 3D Battana `b` totem
28];
29 
30export function CircularGalleryDemo() {
31  return (
32    <div className="relative w-full h-[500px] flex items-center justify-center overflow-hidden bg-[#F8FAFC] dark:bg-[#060B11]">
33      <CircularGallery items={SHOWCASE_ITEMS} radius={312} autoRotateSpeed={0.14} />
34    </div>
35  );
36}
37

Komponen Lainnya

Jelajahi mikro-interaksi dan efek visual lainnya dari koleksi UI Craft.

Kembali ke UI Craft
VERLET PHYSICS

3D Interactive Lanyard ID

Kartu ID gantung 3D dengan simulasi tali Verlet physics real-time, buckle & split ring logam, tali motif battana, serta interaksi tarik-ayun dan klik untuk membalik kartu depan/belakang.

3D PERSPECTIVE

Interactive 3D Bookshelf

Rak buku 3D interaktif berperspektif CSS & Framer Motion dengan animasi spring ayun cover, ketebalan blok kertas, pita penanda baca, serta panel Key Takeaways.

WEBGL REFRACTION

Liquid Glass Navbar

Navbar kapsul kaca cair dengan shader air WebGL real-time, efek refraksi SVG feDisplacementMap, animasi spring droplet yang terpecah saat melompat jauh, serta mode laci vertikal.