Kembali ke UI Craft/3D & Motion

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.

3d-cssframer-motionbookshelfspring-layoutperspective
LIVE INTERAKTIF
100%
AAbattana.id/components/bookshelf-3d
Klik buku di rak untuk memutar & membuka intisari bacaan
05 / 05 · CURATED READING

Atomic Habits

James Clear·Currently Reading
“Sedang masuk daftar baca aktif — mengeksplorasi bagaimana perbaikan kecil harian dan sistem terencana berlipat ganda menjadi hasil luar biasa.”
Reading Status
Sedang dibaca — mendalami bagaimana kebiasaan kecil harian berakumulasi menjadi penguasaan jangka panjang.
Core Focus
Menggeser fokus dari sekadar mengejar target ke perancangan sistem kerja harian yang mulus dan terukur.
Why It's Next
Menerapkan prinsip peningkatan 1% setiap hari ke dalam alur rekayasa sistem, AI workflow, dan rutinitas kerja.

MacBook Pro 16" M5 · 1440 × 900 px

Dependensi:framer-motion^12.0.0lucide-react^0.475.0
1"use client";
2 
3import { Bookshelf3D } from "@/components/ui/bookshelf-3d";
4 
5export function BookshelfShowcaseDemo() {
6  return (
7    <section className="relative w-full py-16 bg-[#F8FAFC] dark:bg-[#060B11] cad-grid-pattern">
8      <div className="w-[83.334vw] max-w-[1480px] mx-auto">
9        <Bookshelf3D
10          tone="auto"
11          layout="full"
12          columns="responsive"
13          defaultActiveIndex={4}
14          lang="EN"
15        />
16      </div>
17    </section>
18  );
19}
20

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 CYLINDER

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.

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.