A conventional gallery does not capture the feeling of exploring a set of shared moments, people, and messages.Galeri biasa tidak sepenuhnya menghadirkan rasa menjelajahi momen, orang, dan pesan bersama.
Back to selected workKembali ke proyek pilihan
Interactive PrototypePrototipe interaktifFull Stack · Web
Time Capsule
An interactive 3D space for preserving and revisiting shared memories.Ruang 3D interaktif untuk menyimpan dan mengunjungi kembali kenangan bersama.
- RolePeran
- Web DeveloperPengembang Web
- PeriodPeriode
- 2026
- Stack
- Next.js · React · TypeScript · Three.js · React Three Fiber
The live 3D memory world with interactive characters and landmarksDunia kenangan 3D dengan karakter dan penanda interaktif
OverviewRingkasan
What the project needed to solve.Masalah yang perlu diselesaikan.
The project turns those memories into an interactive 3D world where objects open a timeline, gallery, and message board, while characters provide conversational entry points.Proyek ini mengubah kenangan menjadi dunia 3D interaktif; objek membuka linimasa, galeri, dan papan pesan, sementara karakter memberi titik masuk percakapan.
ContributionKontribusi
Responsibilities and shipped work.Tanggung jawab dan hasil kerja.
Contributions are described without claiming sole ownership.Kontribusi dijelaskan tanpa mengklaim kepemilikan tunggal.
- Built the experience with Next.js, React, TypeScript, and Zustand state management.Membangun pengalaman dengan Next.js, React, TypeScript, dan Zustand.
- Implemented an explorable React Three Fiber world with interactive landmarks and characters.Mengimplementasikan dunia React Three Fiber dengan penanda dan karakter interaktif.
- Created Indonesian, English, and Korean interface variants.Membuat varian antarmuka bahasa Indonesia, Inggris, dan Korea.
- Added timeline, gallery, public message, audio, light/dark, and ending flows.Menambahkan linimasa, galeri, pesan publik, audio, tema terang/gelap, dan alur penutup.
- Integrated AI-assisted chat routes and prepared the Next.js application for Cloudflare through OpenNext.Mengintegrasikan route obrolan berbantuan AI dan menyiapkan aplikasi Next.js untuk Cloudflare melalui OpenNext.
TechnologyTeknologi
Trace the stack back to the work.Lihat penggunaan teknologi dalam karya.
Select a technology to see where it was used.Pilih teknologi untuk melihat penggunaannya.
Where I usedSaya gunakan di Next.js
Engineering areasArea rekayasa
Challenges handled in context.Tantangan dalam konteksnya.
3D interaction in ReactInteraksi 3D di React
Coordinate camera movement, interactive scene objects, overlays, and UI state without losing the exploratory feel.Menyelaraskan gerakan kamera, objek interaktif, overlay, dan state UI tanpa menghilangkan rasa eksplorasi.
Media and motionMedia dan gerak
Combine WebGL, GSAP transitions, sound effects, and background audio while keeping user controls explicit.Menggabungkan WebGL, transisi GSAP, efek suara, dan musik latar sambil menjaga kontrol pengguna tetap jelas.
Edge deploymentDeployment edge
Prepare a Next.js application with API routes for a Cloudflare deployment model through OpenNext.Menyiapkan aplikasi Next.js dengan API route untuk model deployment Cloudflare melalui OpenNext.
HighlightsSorotan
What is evidenced by the work.Hasil yang didukung bukti kerja.
- Interactive 3D environment rather than a conventional content grid.Lingkungan 3D interaktif, bukan grid konten biasa.
- Three-language interface: Indonesian, English, and Korean.Antarmuka tiga bahasa: Indonesia, Inggris, dan Korea.
- Timeline, photo gallery, and public message experiences.Pengalaman linimasa, galeri foto, dan pesan publik.
- AI-assisted character and capsule companion conversations.Percakapan berbantuan AI dengan karakter dan pendamping kapsul.
Next projectProyek berikutnya
Explore the rest of the work.Jelajahi karya lainnya.
Next upSelanjutnya: YouTube Music × ESP32. Or return to all selected projects.Atau kembali ke semua proyek pilihan.
