rezznr_
Website yang bergerak, bukan brosur digital yang diam.
Website 3D bukan soal menempelkan animasi supaya terlihat mahal. Gunanya jelas: produk yang bisa diputar dan dilihat dari segala sisi menjelaskan dirinya jauh lebih baik daripada lima foto katalog, dan animasi yang terikat scroll membuat orang membaca sampai bawah alih-alih menutup tab.
Saya membangun jenis website ini dengan Three.js dan WebGL untuk objek 3D-nya, GSAP ScrollTrigger untuk koreografi scroll, dan React Three Fiber ketika perlu integrasi erat dengan React. Semua aset 3D dimuat setelah konten utama tampil, jadi halaman tetap cepat dibuka dan tetap bisa dibaca kalau perangkat pengunjung tidak mendukung WebGL.
Homepage situs ini sendiri adalah contohnya: keyboard mekanikal 3D yang merakit dirinya sendiri mengikuti scroll, dibangun dari geometri prosedural — tanpa mengunduh model besar, dan tetap hormat pada pengaturan "reduce motion" pengunjung.
Produk atau objek yang bisa diputar, di-zoom, dan diperiksa langsung di browser tanpa plugin apa pun.
Koreografi berbasis scroll dengan GSAP ScrollTrigger — pinning, parallax, dan transisi antar-bagian yang mulus.
Hover, transisi halaman, dan umpan balik kecil yang membuat antarmuka terasa hidup dan responsif.
Aset 3D dimuat lazy setelah konten utama, dengan batas ukuran yang disepakati agar halaman tetap cepat.
Perangkat tanpa WebGL atau pengunjung dengan "prefers-reduced-motion" tetap mendapat halaman yang utuh dan bisa dipakai.
Kualitas render dan jumlah frame diturunkan otomatis di ponsel supaya baterai dan suhu perangkat tidak jadi korban.
Kita bahas tujuan bisnis, siapa penggunanya, dan apa yang harus terjadi setelah orang membuka website Anda. Output-nya daftar halaman, fitur, dan prioritas.
Wireframe lalu desain visual yang mengikuti identitas brand Anda — bukan template yang ditempeli logo. Anda review sebelum satu baris kode ditulis.
Dibangun dengan Next.js dan TypeScript. Responsif dari ponsel sampai desktop, aksesibel, dan cepat sejak awal — bukan dioptimasi belakangan.
Pengujian lintas perangkat, audit performa dan SEO teknis, revisi, lalu deploy ke domain Anda beserta panduan pemakaian CMS.
Garansi perbaikan bug, monitoring uptime, dan opsi maintenance bulanan kalau Anda ingin website terus dikembangkan.
Proyek nyata yang sudah rilis, bukan mockup. Setiap studi kasus berisi tangkapan layar dan penjelasan apa yang dikerjakan.
Full-stack e-commerce platform for an Indonesian specialty coffee roastery — direct ordering with dual payment flows (Midtrans + manual transfer), order tracking, and a custom admin CMS with payment verification built in.
A subscription-based design agency website built with Next.js and Tailwind CSS, integrated with Payload CMS (v3) & PostgreSQL, featuring dual-language localization (EN/ID), interactive Framer Motion animations, and an advanced SEO-first architecture.
Premium digital wedding invitation platform for Indonesian couples — animated template marketplace, live invitation editor, guest & RSVP management, and a full wedding planning toolkit with integrated payments.
Tidak, kalau dibangun dengan urutan yang benar. Konten teks dan gambar utama tampil lebih dulu, aset 3D dimuat setelahnya saat browser sudah idle. Di situs ini pun scene 3D-nya baru diunduh setelah halaman siap dipakai, sehingga First Contentful Paint tetap di bawah satu detik.
Ada dua lapis pengamanan: kualitas render otomatis diturunkan di perangkat lemah, dan kalau WebGL sama sekali tidak tersedia, halaman tetap tampil lengkap tanpa elemen 3D-nya. Tidak ada layar kosong.
Tidak wajib. Model bisa dibuat prosedural lewat kode untuk bentuk geometris, atau saya kerjakan dari foto dan gambar referensi produk Anda. Kalau Anda sudah punya file GLB/GLTF dari desainer, itu bisa langsung dipakai.
Tidak, karena isi halaman tetap dirender di server sebagai HTML biasa. Mesin pencari membaca teks dan struktur halaman tanpa perlu menjalankan animasinya sama sekali.
Bergantung pada kompleksitas objek dan jumlah adegan animasi. Satu objek produk yang bisa diputar jauh lebih ringan daripada koreografi scroll multi-bagian. Setelah tahu referensi visual yang Anda inginkan, estimasinya bisa saya berikan.
Ceritakan kebutuhan Anda — saya balas dengan estimasi waktu dan pendekatan teknisnya, tanpa biaya konsultasi awal.
