Sebelum hari nol: domain dan beranda WebGL

Pada 4 Juni 2026 — lima hari sebelum kami memberi tahu siapa pun bahwa kami ada — kami membeli satu hal: domain pangaea.id, dari Hostinger. Hari minus lima. Belum ada situs, belum ada teks, belum ada rencana selain satu keyakinan: kalau kami hendak menjual AI, implemented, berandanya harus terasa seperti itu.

Yang pertama kami bangun justru yang paling seru

Sebelum strategi, sebelum SEO, sebelum semua disiplin yang jadi isi catatan ini — kami melakukan hal yang pertama dilakukan tiap engineer. Kami membangun versi kerennya.

Satu halaman. Gelap. Latar WebGL hidup di balik tiap bagian: sebuah konstelasi agen beranimasi, titik-titik cahaya yang merangkai diri jadi satu saat kita menggulir. Itu gambaran harfiah dari kerja yang kami inginkan — agen sebagai simpul, pipeline sebagai garis penghubungnya.

Satu gulir, seluruh cerita

Ini aplikasi satu halaman. Lenis yang menggerakkan gulirannya — mulus tanpa hentakan — dari hero terus ke bawah, tiap bagian mengambang di atas hamparan bintang yang sama: gelap, seolah bernapas. Berikut tampilan utuhnya sekilas, lalu tur singkat tiap bingkai, dari atas ke bawah.

Membaca lembar itu dari atas ke bawah, inilah tiap bingkainya:

• Hero — “AI, implemented.” Konstelasi dalam keadaan paling tenang, dengan dua jalan masuk: pesan audit, atau temui para agennya.
• Trusted by Sebaris logo klien dan partner yang sudah pernah kami garap.
• Why — “Adoption is a discipline. We install it.” Tiga kartu: pangkas kurva belajar, jual disiplinnya (bukan hype-nya), buktikan dengan metrik.
• 01 · AI Implementation Sistem RAG dan agentik dari papan tulis ke produksi, di sebelah panel pipeline produksi tiruan.
• 02 · Eval & Audit “No AI ships on vibes” — empat kotak skor: faithfulness 0.94 dan kawan-kawannya.
• 03 · Plugins & Agents Pustaka agen yang bisa didemokan, masing-masing satu simpul di konstelasi: AI Audit, Prod RAG Pipeline, CodeGen, AIReview.
• 04 · Software Development Separuh lain dari kerjanya — empat kartu studi kasus, dari travel commerce sampai microservice skala pemerintah.
• Proof — “Numbers that survive an audit.” Weeks, Week 1, 12+, 100% — dengan testimoni bernama.
• Process Scope → Build → Eval → Ship: seluruh engagement dalam empat langkah.
• 05 · Digital Marketing Platform Punya toko sendiri, bukan lapak sewaan — pitch soal jangkauan dan konversi.
• Pricing — “Priced to approve, structured to stop.” Tiga anak tangga (Adopt, Amplify, Autonomize); Fixed vs Monthly.
• Team — “Built by people who ship.” Aman sejak desain, kualitas di atas kuantitas, rekam jejak produksi yang nyata.
• FAQ — Methodology, security, commercials. Pertanyaan-pertanyaan si skeptis, dijawab lugas.
• Contact — “Let’s start.” Form Adopt Assessment, di atas bagian terpadat dari hamparan itu.

Brief yang memulai semuanya

Kami tak menggambarnya di Figma. Kami menulis semuanya sebagai satu prompt — di-commit pada hari pertama sebagai pangaea-design-system-prompt.md, masih ada di commit pertama kami — lalu membangun langsung darinya. Intinya, apa adanya:

# Build the Pangaea Labs Design System — "Agent Constellation"

Build a production-grade, reusable design system + immersive landing page for
Pangaea Labs, an AI infrastructure & services company. The whole site sits on top
of one continuous live WebGL scene — no video files, rendered every frame — that
carries the brand's emotion the way a film's cinematography does. Make it
unforgettable, not generic. Refined, dark, atmospheric, engineered.

## The Signature: Agent Constellation (the centerpiece — get this right)
A single fixed-position React Three Fiber canvas behind all content, rendering a
constellation of glowing "agent" nodes connected by thin signal lines in deep space:
- Zero video. Everything is live WebGL/GLSL, rendered each frame.
- GLSL shaders bloom the nodes and send light pulses along the edges between
  connected agents (signal flow).
- Lenis smooth scroll: scroll *velocity* physically drives the camera through the field.
- WebGL depth of field: the focused cluster is crisp; distant clusters blur like a lens.
- Two hex colors carry every emotion — #0A1A2F (navy void) + #3FA9F5 (electric blue).
  Never a third hue. Emotion comes from node density, brightness, fog, camera energy.

## Anti-slop guardrails
- No Inter / Roboto / Arial / system fonts; no Space Grotesk.
- No purple-on-white, no generic SaaS gradient hero, no third color.
- No stock video, no <video> background — the scene must be live WebGL.
- Every section must visibly change the constellation; if a section doesn't move
  the scene, it's wrong.

Dibaca ulang sekarang, pivot yang segera kami lakukan terasa nyaris tak terhindarkan: hasilnya indah, tapi terlalu banyak rekayasa untuk sekadar sebuah beranda.

Langkah satu: jalankan dulu

Entri ini baru langkah satu — membuatnya bisa di-build dan berjalan di mesin kami sendiri. Domain belum disambungkan, belum ada deploy, belum ada edge. Cukup npm run dev, localhost:5173, dan satu halaman gelap yang sungguh membuat kami tersenyum.

Versi yang membuat para pembangunnya tersenyum belum tentu versi yang membuatnya ditemukan. Kami nyaris belajar itu dengan cara yang pahit.

Kenapa akhirnya kami menghapus benda indah ini — itu punya babak sendiri: pivot itu. Tapi itu sudah terlalu jauh ke depan.

Berikutnya: arahkan pangaea.id ke sesuatu yang nyata, lalu rilis.