System Requirements Document for web-3dimensi

1. Introduction

web-3dimensi adalah situs web publik yang menampilkan contoh konten 3D yang dapat dilihat dan diinteraksikan langsung di dalam browser. Situs ini melayani dua sisi dari satu produk: Pengunjung yang ingin menjelajahi tampilan 3D contoh, dan Pembuat Konten 3D yang menyiapkan serta menampilkan contoh konten 3D tersebut agar tampil benar di halaman web.

Niat produk bersumber langsung dari permintaan pengguna: "Bikinin web 3dimensi contoh" — membuat sebuah web 3D beserta contoh kontennya. Produk ini bukan platform pemodelan 3D, bukan editor aset, dan bukan galeri multi-pengguna; ia adalah satu situs contoh yang memamerkan konten 3D yang dirender di browser, dengan jalur pengelolaan konten yang terverifikasi bagi pembuatnya.

Audiens: pengunjung umum yang penasaran ingin melihat objek 3D terender di browser, dan pembuat konten 3D yang bertanggung jawab memastikan contoh 3D tampil dengan benar.

2. System Overview

web-3dimensi adalah aplikasi web dengan UI kustom milik aplikasi sendiri, didukung backend bersama dan basis data persisten.

Aktor manusia (katalog tertutup):

• Pengunjung — membuka situs dan menjelajahi tampilan 3D contoh tanpa hambatan.
• Pembuat Konten 3D — menyiapkan dan menampilkan contoh konten 3D pada situs agar dapat dilihat pengunjung.

Aktor non-persona: backend aplikasi (proses FastAPI bersama) dan basis data MariaDB sebagai penyimpanan data milik aplikasi.

Perilaku yang diterima saat ini:

• Situs menampilkan contoh konten 3D yang dirender di browser untuk Pengunjung (eksplisit).
• Pembuat Konten 3D mendaftar atau memverifikasi identitas melalui Login sebelum mengelola konten 3D (required_inference).
• Konten 3D contoh tersedia agar Beranda dapat merendernya bagi Pengunjung (required_inference).
• Pembuat Konten 3D menyiapkan dan menampilkan contoh konten 3D agar tampil benar di situs (required_inference).

Kepemilikan halaman (kontrak halaman final, urutan tetap):

1. Beranda — permukaan masuk publik; akses none; aktor Pengunjung.
2. Login — permukaan akses identitas; akses none; aktor Pembuat Konten 3D.
3. Kelola Konten 3D — akses login; aktor Pembuat Konten 3D.

Infrastruktur yang disediakan: frontend (React), backend (FastAPI bersama), database (MariaDB).

Pengecualian sempit: tidak ada editor pemodelan 3D, tidak ada unggah/konversi format aset 3D, tidak ada galeri multi-pengguna atau fitur sosial, tidak ada peran/izin berjenjang, dan tidak ada halaman yang menampilkan atau menautkan dokumen perencanaan.

Removed from scope

• Editor atau pemodelan 3D di dalam produk (also: 3D modeling editor, mesh editor)
• Unggah dan konversi format aset 3D (also: asset upload, format conversion)
• Galeri multi-pengguna, komentar, atau fitur sosial (also: social gallery, comments)
• Peran dan izin berjenjang / RBAC (also: role-based access control, RBAC)
• Halaman yang menyajikan dokumen perencanaan atau kriteria keberhasilannya (also: planning document page)

2a. Product Interpretation and Delivery Boundary

web-3dimensi dikirim sebagai aplikasi web first-party dengan UI kustom. Pengunjung mengakses Beranda secara publik tanpa identitas. Pembuat Konten 3D memperoleh akses ke Kelola Konten 3D hanya setelah memverifikasi identitas melalui Login; Login sendiri dapat dijangkau tanpa sesi aktif karena ia adalah batas masuk, bukan tujuan terlindungi. Identitas dimiliki aplikasi (app-owned identity) dan diperlukan semata-mata untuk menjaga kontinuitas kepemilikan konten 3D oleh Pembuat Konten 3D yang benar — bukan untuk diferensiasi izin atau peran.

Semua pekerjaan saat ini bersifat current. Tidak ada horizon masa depan yang diterima. Backend bersama menangani API aplikasi dan modul domain; MariaDB menyimpan data milik aplikasi; frontend React merender UI dan viewer 3D.

2b. Source Content Inventory

Tidak ada direktif content_source yang diberikan; bagian ini sengaja dihilangkan.

2c. Page Content and Component Coverage

Beranda

Informasi/state: judul besar "Bentuk 3D, dilihat dari dua sisi"; blok keterangan mono (format, jumlah vertex, renderer); viewer 3D live berisi objek geometris bersegi; label mono "VIEWPORT / 01" dengan titik coral berdenyut; deretan ubin contoh bernomor 01–04 dengan indeks mono, nama, dan status render.

Aksi utama: menjelajahi contoh 3D (CTA coral "Jelajahi contoh"); memilih ubin contoh untuk membuka viewer; menggeser/memutar objek 3D secara manual; mengalihkan tampilan solid ↔ wireframe.

Aksi pendukung: menavigasi ke Login (tautan masuk bagi Pembuat Konten 3D).

Entitas domain: Contoh Konten 3D (nama, format, jumlah vertex, renderer, status tampil, urutan indeks).

Tanggung jawab komponen: panel kiri terang (judul bertumpuk, blok mono, CTA); panel kanan gelap code-inset dengan viewer 3D, bingkai sudut (corner bracket), dan sakelar wireframe; pita ubin contoh horizontal dengan pembatas hairline; label seksi mono berindeks.

State: loading — kerangka viewer dengan label mono "MEMUAT"; empty — pesan mono "Belum ada contoh 3D" dengan arahan ke Pembuat Konten 3D; success — objek terender dan ubin tampil; error — pesan mono "Gagal memuat viewer" dengan tombol "Coba lagi"; recovery — memuat ulang data contoh tanpa meninggalkan halaman.

Login

Informasi/state: panel kiri terang berisi formulir masuk (identitas Pembuat Konten 3D); panel kanan gelap dengan wireframe objek 3D berputar lambat; bingkai sudut viewport.

Aksi utama: memasukkan identitas dan memverifikasi masuk; mengirim formulir.

Aksi pendukung: kembali ke Beranda.

Entitas domain: Identitas Pembuat Konten 3D (kredensial masuk).

Tanggung jawab komponen: formulir dengan label mono uppercase; tombol kirim ink; pesan galat inline; panel wireframe dekoratif.

State: idle; loading — tombol nonaktif dengan label mono "MEMVERIFIKASI"; success — pengalihan ke Kelola Konten 3D; error — pesan galat di atas formulir dengan fokus kembali ke kolom; recovery — pengguna dapat memperbaiki input dan mengirim ulang.

Kelola Konten 3D

Informasi/state: tabel data mono di kiri (nama, format, status, diperbarui); pratinjau 3D live di kanan; label seksi mono berindeks.

Aksi utama: menyiapkan contoh konten 3D (nama, format, jumlah vertex, renderer, status tampil); menampilkan/menyembunyikan contoh agar tampil di Beranda; menyimpan perubahan; melihat pratinjau 3D hasil perubahan.

Aksi pendukung: keluar dari sesi; kembali ke Beranda.

Entitas domain: Contoh Konten 3D milik Pembuat Konten 3D (nama, format, jumlah vertex, renderer, status tampil, waktu diperbarui).

Tanggung jawab komponen: tabel data dengan baris dapat dipilih; panel pratinjau 3D; formulir/panel detail untuk atribut contoh; kontrol status tampil; tombol simpan; indikator status penyimpanan.

State: loading — tabel kerangka dengan label mono; empty — pesan mono "Belum ada konten 3D" dengan aksi "Buat contoh"; success — baris tersimpan dan pratinjau diperbarui; error — pesan galat per baris dengan tombol "Coba lagi"; recovery — perubahan yang gagal disimpan tetap di formulir agar dapat dikirim ulang.

3. Functional Requirements

FR-1 — Menampilkan contoh konten 3D di situs (explicit) As a Pengunjung I should melihat contoh konten 3D yang dirender di Beranda agar saya dapat menjelajahi tampilan 3D tanpa hambatan.

• Trigger: membuka Beranda.
• Input: data Contoh Konten 3D yang berstatus tampil.
• Observable result: objek 3D terender di viewer dengan label mono "VIEWPORT / 01" dan deretan ubin contoh 01–04.
• Access: publik, tanpa login.
• Failure/recovery: jika data gagal dimuat, tampilkan pesan mono "Gagal memuat viewer" dengan tombol "Coba lagi" yang memuat ulang tanpa meninggalkan halaman.
• Continuation: Pengunjung dapat memilih ubin lain atau mengalihkan tampilan wireframe.

FR-2 — Berinteraksi dengan konten 3D (explicit) As a Pengunjung I should memutar dan mengalihkan tampilan objek 3D agar saya dapat memeriksa bentuknya dari sisi yang saya inginkan.

• Trigger: menyeret di dalam viewer atau menekan sakelar wireframe.
• Observable result: objek berputar mengikuti seret; sakelar mengubah tampilan solid ↔ wireframe dalam 200ms.
• Access: publik.
• Failure/recovery: dengan prefers-reduced-motion, orbit otomatis dan parallax dinonaktifkan, tetapi seret manual dan sakelar tetap berfungsi.
• Continuation: Pengunjung dapat melanjutkan ke ubin contoh berikutnya.

FR-3 — Mendaftar atau memverifikasi identitas melalui Login (required_inference) As a Pembuat Konten 3D I should mendaftar atau memverifikasi identitas melalui Login sebelum mengelola konten 3D agar konten yang saya kelola terikat pada identitas saya yang benar.

• Trigger: membuka Login dari Beranda.
• Input: identitas/kredensial Pembuat Konten 3D.
• Observable result: sesi terverifikasi dan pengalihan ke Kelola Konten 3D.
• Access: Login dapat dijangkau tanpa sesi aktif; Kelola Konten 3D tidak tersedia sebelum verifikasi berhasil.
• Failure/recovery: kredensial tidak valid menampilkan pesan galat inline; pengguna dapat memperbaiki dan mengirim ulang.
• Continuation: setelah berhasil, Pembuat Konten 3D melanjutkan ke pengelolaan konten.

FR-4 — Menyiapkan contoh konten 3D (required_inference) As a Pembuat Konten 3D I should menyiapkan contoh konten 3D (nama, format, jumlah vertex, renderer, status tampil) agar contoh tersebut siap ditampilkan di situs.

• Trigger: memilih "Buat contoh" atau baris yang ada di Kelola Konten 3D.
• Input: atribut contoh konten 3D.
• Observable result: baris tersimpan di tabel dan pratinjau 3D di kanan diperbarui.
• Access: memerlukan login.
• Failure/recovery: penyimpanan gagal menampilkan galat per baris dengan tombol "Coba lagi"; nilai yang diisi tetap di formulir.
• Continuation: Pembuat Konten 3D dapat mengubah status tampil atau menyiapkan contoh berikutnya.

FR-5 — Menampilkan contoh agar tampil di Beranda (required_inference) As a Pembuat Konten 3D I should mengatur status tampil sebuah contoh konten 3D agar contoh tersebut muncul bagi Pengunjung di Beranda.

• Trigger: mengubah status tampil pada baris di Kelola Konten 3D dan menyimpan.
• Observable result: contoh berstatus tampil muncul di viewer/ubin Beranda; contoh berstatus sembunyi tidak muncul.
• Access: memerlukan login.
• Failure/recovery: jika penyimpanan gagal, status kembali ke nilai sebelumnya dan galat ditampilkan.
• Continuation: Pembuat Konten 3D dapat memverifikasi hasilnya dengan membuka Beranda.

FR-6 — Menyediakan konten 3D contoh bawaan (required_inference) As a Pengunjung I should menemukan konten 3D contoh yang sudah tersedia saat pertama membuka situs agar Beranda tidak kosong.

• Trigger: kunjungan pertama sebelum ada konten yang disiapkan Pembuat Konten 3D.
• Observable result: Beranda merender setidaknya satu contoh konten 3D.
• Access: publik.
• Failure/recovery: jika konten contoh tidak tersedia, Beranda menampilkan state kosong mono "Belum ada contoh 3D".
• Continuation: Pengunjung tetap dapat menjelajahi situs.

4. User Personas

Pengunjung

Konteks produk: Pengunjung tiba di Beranda tanpa identitas dan tanpa niat mengelola apa pun; tujuannya adalah melihat dan mencoba tampilan 3D contoh yang disajikan situs.

Tujuan utama: melihat dan berinteraksi dengan konten 3D tanpa hambatan.

Tanggung jawab yang diterima: membuka Beranda, memilih ubin contoh, memutar objek, mengalihkan tampilan wireframe.

Input/keputusan: memilih contoh mana yang diperiksa; memutuskan apakah mengaktifkan wireframe.

Interaksi dengan peserta lain: Pengunjung adalah penerima hasil kerja Pembuat Konten 3D; ia melihat contoh yang berstatus tampil. Ia tidak berinteraksi langsung dengan Pembuat Konten 3D.

Keberhasilan yang teramati: objek 3D terender dan dapat diputar serta dialihkan tampilannya; jika gagal, pesan galat dan tombol "Coba lagi" tersedia.

Yang membedakannya: Pengunjung tidak memiliki sesi, tidak mengubah data, dan seluruh nilainya terletak pada pengalaman melihat dan berinteraksi dengan render 3D.

Pembuat Konten 3D

Konteks produk: Pembuat Konten 3D bertanggung jawab memastikan contoh 3D tampil dengan benar di situs. Ia masuk melalui Login dan bekerja di Kelola Konten 3D.

Tujuan utama: menyiapkan dan menampilkan contoh konten 3D sehingga tampil benar bagi Pengunjung.

Tanggung jawab yang diterima: memverifikasi identitas melalui Login; menyiapkan atribut contoh (nama, format, jumlah vertex, renderer, status tampil); mengatur status tampil; memeriksa pratinjau 3D.

Input/keputusan: kredensial masuk; atribut contoh; keputusan menampilkan atau menyembunyikan contoh.

Interaksi dengan peserta lain: hasil kerjanya dikonsumsi Pengunjung di Beranda; ia tidak berkomunikasi langsung dengan Pengunjung.

Keberhasilan yang teramati: contoh tersimpan, pratinjau 3D benar, dan contoh berstatus tampil muncul di Beranda.

Yang membedakannya: Pembuat Konten 3D adalah satu-satunya aktor yang memiliki sesi terverifikasi dan mengubah data persisten; pekerjaannya adalah penyiapan dan publikasi, bukan eksplorasi.

5. Core User Flows

Alur A — Pengunjung menjelajahi contoh 3D (Beranda)

1. Pengunjung membuka Beranda tanpa login.
2. Sistem memuat data Contoh Konten 3D berstatus tampil dan merender objek di viewer kanan dengan label "VIEWPORT / 01".
3. Pengunjung melihat judul "Bentuk 3D, dilihat dari dua sisi", blok mono (format, jumlah vertex, renderer), dan pita ubin 01–04.
4. Pengunjung menyeret di dalam viewer untuk memutar objek; objek berputar mengikuti seret.
5. Pengunjung menekan sakelar wireframe; tampilan beralih solid ↔ wireframe dalam 200ms.
6. Pengunjung memilih ubin contoh lain; viewer menampilkan contoh tersebut.
7. Kegagalan: jika data gagal dimuat, Beranda menampilkan "Gagal memuat viewer" dengan tombol "Coba lagi"; Pengunjung menekannya dan data dimuat ulang tanpa meninggalkan halaman.
8. Kontinuasi: Pengunjung dapat melanjutkan menjelajahi ubin lain atau menavigasi ke Login.

Alur B — Pembuat Konten 3D memverifikasi identitas (Login)

1. Pembuat Konten 3D membuka Beranda dan memilih tautan masuk.
2. Sistem menampilkan Login dengan panel formulir di kiri dan wireframe 3D berputar di kanan.
3. Pembuat Konten 3D memasukkan identitas/kredensial dan mengirim formulir.
4. Sistem memverifikasi; tombol menampilkan label mono "MEMVERIFIKASI".
5. Sukses: sistem mengalihkan ke Kelola Konten 3D.
6. Kegagalan: kredensial tidak valid menampilkan pesan galat inline; fokus kembali ke kolom; Pembuat Konten 3D memperbaiki input dan mengirim ulang.
7. Kontinuasi: setelah berhasil, Pembuat Konten 3D melanjutkan ke Alur C.

Alur C — Pembuat Konten 3D menyiapkan dan menampilkan contoh (Kelola Konten 3D)

1. Pembuat Konten 3D yang sudah terverifikasi berada di Kelola Konten 3D.
2. Sistem menampilkan tabel mono (nama, format, status, diperbarui) di kiri dan pratinjau 3D di kanan.
3. Pembuat Konten 3D memilih "Buat contoh" atau baris yang ada.
4. Pembuat Konten 3D mengisi atribut contoh: nama, format, jumlah vertex, renderer, status tampil.
5. Pembuat Konten 3D menyimpan; sistem menyimpan baris dan memperbarui pratinjau 3D.
6. Pembuat Konten 3D mengatur status tampil dan menyimpan.
7. Kegagalan: jika penyimpanan gagal, sistem menampilkan galat per baris dengan tombol "Coba lagi"; nilai yang diisi tetap di formulir; Pembuat Konten 3D mengirim ulang.
8. Kontinuasi: Pembuat Konten 3D membuka Beranda untuk memverifikasi bahwa contoh berstatus tampil muncul bagi Pengunjung, lalu kembali ke Kelola Konten 3D untuk contoh berikutnya.

Alur D — Pengunjung melihat konten contoh bawaan (Beranda)

1. Pengunjung membuka Beranda untuk pertama kali.
2. Sistem merender setidaknya satu contoh konten 3D bawaan.
3. Pengunjung menjelajahi dan berinteraksi seperti pada Alur A.
4. Kegagalan: jika konten contoh tidak tersedia, Beranda menampilkan state kosong mono "Belum ada contoh 3D".

6. Visuals Colors and Theme

Muse: Adham Dannaway — dual-nature craft: 3D viewer yang terbelah antara desain dan kode.

Headline: "Bentuk 3D, dilihat dari dua sisi".

Mode: light mode sebagai default halaman; panel code-inset gelap sebagai kontras.

Token warna (peran):

• Background halaman: #F7F5F0 (warm off-white paper ground)
• Surface kartu dan bingkai viewer: #FFFFFF
• Teks utama dan kontrol primer: #141619 (ink)
• Aksen: #FF4D2E (coral-orange) — outline objek aktif, CTA, penanda interaktif; digunakan hemat, tidak sebagai isian area besar
• Muted: #6B6F76 untuk label dan metadata sekunder
• Ground panel code-inset: #141619 dengan teks #F7F5F0 dan hairline #2A2D33
• Hairline permukaan terang: #E4E0D8
• Tidak ada biru atau indigo di mana pun.

Tipografi:

• Headings: Space Grotesk 500–700, tracking rapat (-0.02em hingga -0.04em), sentence case.
• Body: IBM Plex Mono.
• Micro-label: IBM Plex Mono uppercase 11–12px, letter-spacing 0.12em.
• Skala: modular 1.25 untuk UI, 1.5 untuk display. Display hero clamp(40px, 8vw, 112px); judul seksi clamp(28px, 4vw, 48px); body 16–18px; label mono 11–12px; kode/data 13–14px. Line-height 1.05 untuk display, 1.6 untuk body.

Bahasa bentuk: presisi dan teknis-ringan. Ritme spasi 8-pt. Radius 6–10px pada kartu dan tombol (bukan pill, bukan tajam). Border hairline 1px #E4E0D8 pada permukaan terang dan #2A2D33 pada panel gelap. Bingkai viewer 3D radius 10px dengan border 1px terlihat dan motif corner bracket. Tanpa blob, tanpa soft offset shadow — kedalaman berasal dari viewer dan dari split.

Layout: logika split-screen asimetris di seluruh halaman. Beranda: panel kiri terang (45%) dengan headline besar bertumpuk dan blok mono; panel kanan gelap (55%) dengan viewer 3D live yang bleed keluar tepi kanan. Login: panel kiri terang berisi formulir, panel kanan gelap dengan wireframe berputar. Kelola Konten 3D: dua kolom — tabel data mono di kiri, pratinjau 3D di kanan. Semua kolom menumpuk tunggal pada 375px dengan viewer di atas tabel.

Imagery: konten 3D itu sendiri adalah imagery — objek geometris bersegi low-poly dengan overlay wireframe yang dapat dialihkan. Thumbnail ubin adalah still render primitif 3D sederhana di atas ground off-white. Diagram dan contoh kode tampil sebagai blok mono berlabel kecil, bukan dekorasi. Tanpa stock photography, tanpa ilustrasi demi ilustrasi.

7. Signature Design Concept

Split hero dua sisi: hasil render dan kode yang menghasilkannya.

Hero Beranda adalah split layar penuh yang tidak simetris. Sisi kiri (45%) adalah ground off-white #F7F5F0 dengan headline Space Grotesk clamp(40px, 8vw, 112px) "Bentuk 3D, dilihat dari dua sisi" tersusun atas empat baris ragged, dengan blok keterangan mono kecil di bawahnya (format, jumlah vertex, renderer) dan CTA coral #FF4D2E "Jelajahi contoh". Sisi kanan (55%) adalah panel code-inset gelap #141619 dengan border terang 1px, memenuhi tinggi viewport, berisi viewer 3D live objek geometris bersegi yang disinari dari kiri atas, dengan versi wireframe tipis di-ghost di atasnya. Label mono di kiri atas panel gelap berbunyi "VIEWPORT / 01" dengan titik coral kecil berdenyut di sampingnya. Panel gelap bleed keluar tepi kanan; baris terakhir headline memanjang 24px di bawah tepi panel. Tanpa headline terpusat, tanpa gradien, tanpa kartu mengambang.

Signature moves yang diimplementasikan:

• Split-screen hero dengan parallax 6px antar kedua sisi saat scroll.
• Sakelar wireframe/render di sudut kanan atas viewer: switch berlabel mono yang crossfade objek antara solid dan wireframe dalam 200ms.
• Ubin contoh bernomor 01–04 dalam pita horizontal dengan kolom indeks mono dan pembatas hairline; hover menukar still render dengan thumbnail wireframe dan mengangkat underline coral — tanpa card shadow, tanpa hover-lift.
• Motif corner bracket viewport: empat hairline L 12px #F7F5F0 di sudut bingkai viewer dan panel gelap Login.
• Blok metadata mono: setiap seksi membawa label uppercase IBM Plex Mono kecil berindeks (mis. "02 / FORMAT") dengan hairline rule di atasnya.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: objek geometris bersegi low-poly di dalam viewer 3D pada panel code-inset gelap, dengan wireframe ghost di atasnya.
• Input → transformation → outcome: saat halaman dimuat, objek mulai orbit lambat 8 detik; gerakan kursor di atas viewer memberi tilt halus ±4°; menekan sakelar wireframe meng-crossfade objek antara solid dan wireframe dalam 200ms; scroll menggeser kedua sisi split dengan parallax 6px berlawanan arah. Hasilnya adalah objek yang terasa hidup dan dapat diperiksa, tanpa meninggalkan halaman.
• Motion vocabulary: orbit lambat 8 detik, tilt mengikuti kursor ±4°, crossfade wireframe 200ms, hover ubin 180ms, reveal judul seksi 12px slide-up + fade sekali, parallax split 6px. Semua transisi 120–200ms dengan ease-out standar; tanpa bounce, tanpa spring.
• Composed first frame: panel kiri terang dengan headline bertumpuk dan CTA coral; panel kanan gelap dengan objek terender disinari dari kiri atas, wireframe ghost, label "VIEWPORT / 01" dan titik coral berdenyut; pita ubin 01–04 di bawah.
• Reduced-motion state: orbit otomatis, parallax, dan reveal dinonaktifkan; viewer tetap statis dengan kontrol seret manual dan sakelar wireframe yang berfungsi.

9. Non-Functional Requirements

• Aksesibilitas teks dan kontrol (explicit, dari creative direction): headline, wordmark, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskala (mis. font-size: clamp(...)) agar muat; tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca. Imagery dan dekorasi boleh terpotong atau bleed sesuai arah kreatif.
• Reduced motion (explicit): prefers-reduced-motion menonaktifkan orbit, parallax, dan reveal, menyisakan viewer statis dengan kontrol seret manual.
• Kontras dan palet (explicit): tidak ada biru atau indigo; aksen coral #FF4D2E tidak digunakan sebagai isian area besar; teks ink #141619 di atas ground #F7F5F0 dan teks #F7F5F0 di atas panel #141619 untuk keterbacaan.
• Kinerja render 3D (required_inference): viewer harus dapat dimuat dan diinteraksikan di browser tanpa meninggalkan halaman; kegagalan render ditangani dengan state galat dan tombol "Coba lagi".
• Persistensi data (required_inference): Contoh Konten 3D dan identitas Pembuat Konten 3D disimpan di MariaDB milik aplikasi agar konten bertahan antar kunjungan dan terikat pada pemiliknya.
• Kontinuitas sesi (required_inference): Kelola Konten 3D hanya dapat diakses setelah verifikasi Login berhasil; Login sendiri dapat dijangkau tanpa sesi.

10. Tech Stack

• Frontend: React — UI kustom, viewer 3D di browser, split-screen layout, motion sesuai arah kreatif.
• Backend: Python / FastAPI — proses bersama untuk API aplikasi dan modul domain (contoh konten 3D, verifikasi identitas).
• Database: MariaDB — penyimpanan persisten data milik aplikasi (Contoh Konten 3D, identitas Pembuat Konten 3D).
• Orkestrasi: docker-compose dengan layanan frontend, backend, dan database sesuai inventaris scaffold.

11. Assumptions and Constraints

• A1 (required_inference): Identitas dimiliki aplikasi dan diperlukan hanya untuk mengikat kepemilikan Contoh Konten 3D pada Pembuat Konten 3D yang benar; tidak ada peran atau izin berjenjang.
• A2 (required_inference): Login dapat dijangkau tanpa sesi aktif karena ia adalah batas masuk; Kelola Konten 3D dilindungi dan tidak tersedia sebelum verifikasi berhasil.
• A3 (required_inference): Setidaknya satu Contoh Konten 3D bawaan tersedia agar Beranda tidak kosong pada kunjungan pertama.
• A4 (required_inference): Atribut Contoh Konten 3D yang dikelola adalah nama, format, jumlah vertex, renderer, dan status tampil, sesuai metadata yang ditampilkan di Beranda dan Kelola Konten 3D.
• A5 (explicit): Tidak ada editor pemodelan 3D, unggah/konversi aset, galeri multi-pengguna, fitur sosial, atau halaman dokumen perencanaan.
• A6 (explicit): Semua perilaku saat ini bersifat current; tidak ada horizon masa depan yang diterima.
• A7 (default — not specified by user): Detail implementasi renderer 3D di browser mengikuti pustaka yang sesuai dengan React dan tidak menambah kapabilitas produk.

12. Glossary

• Contoh Konten 3D — satu objek 3D contoh beserta atributnya (nama, format, jumlah vertex, renderer, status tampil) yang dirender di situs.
• Viewer 3D — area render live di Beranda dan Kelola Konten 3D tempat objek 3D ditampilkan dan diinteraksikan.
• Wireframe — tampilan garis kerangka objek 3D, dapat dialihkan dari tampilan solid.
• Status tampil — penanda apakah sebuah Contoh Konten 3D muncul bagi Pengunjung di Beranda.
• Code-inset panel — panel gelap #141619 bergaya blok kode yang memuat viewer 3D atau wireframe dekoratif.
• Corner bracket — motif empat hairline L di sudut bingkai viewer, meniru selection handle editor 3D.
• Pembuat Konten 3D — aktor manusia yang memverifikasi identitas melalui Login dan mengelola Contoh Konten 3D.
• Pengunjung — aktor manusia publik yang menjelajahi Contoh Konten 3D di Beranda tanpa login.