System Requirements Document for animasi-web

1. Introduction

animasi-web adalah sebuah halaman web showcase animasi — dibuat sebagai uji coba (trial run) tanpa tujuan produk komersial yang spesifik. Produk ini ada untuk satu alasan: memperlihatkan animasi web yang benar-benar berjalan dan terasa hidup di dalam browser.

Pengguna (Pemilik Showcase Animasi) menyerahkan seluruh pengerjaan kepada asisten tanpa menetapkan tujuan produk, fitur, atau detail teknis apa pun. Karena itu, ruang lingkup produk diturunkan sepenuhnya dari permintaan eksplisit "Buatkan saya animasi web" dan konfirmasi "Iy" serta "Start", dengan satu batasan keras: tidak ada tujuan produk spesifik yang ditetapkan pengguna; animasi web dibuat sebagai uji coba.

Audiens produk adalah siapa pun yang membuka halaman untuk menonton gerakan terjadi — pengunjung yang harus langsung merasakan bahwa halaman ini hidup di bawah kursor mereka, dan pemilik yang ingin melihat animasinya benar-benar berjalan.

2. System Overview

animasi-web adalah satu halaman publik (Landing) yang berfungsi sebagai kinetic playground: sebuah panggung 100dvh berwarna near-black di mana tipografi besar, grid node reaktif, marquee berjalan, dan transisi antar-bagian berbasis sapuan warna menjadi isi produk itu sendiri. Tidak ada fotografi, tidak ada ilustrasi, tidak ada aset 3D — gerakan menggantikan seluruh imagery.

Aktor:

• Pengunjung Animasi Web — membuka halaman, menjelajah, dan menyaksikan animasi berjalan.
• Pemilik Showcase Animasi — pihak yang meminta animasi dibuat dan meninjau hasilnya agar siap ditampilkan.

Perilaku yang diterima: menampilkan showcase animasi web yang berfungsi; pengunjung dapat berinteraksi dengan gerakan (kursor, gulir, hover); pemilik dapat meninjau bahwa animasi berjalan sesuai harapan.

Kepemilikan: seluruh permukaan interaktif dimiliki oleh aplikasi (custom UI). Tidak ada provider eksternal, tidak ada layanan pihak ketiga, tidak ada backend yang terlihat oleh pengguna.

Pengecualian sempit: tidak ada tujuan produk komersial, tidak ada katalog produk, tidak ada transaksi, tidak ada akun pengguna, tidak ada dashboard admin, tidak ada integrasi pembayaran atau pengiriman. Animasi web ini murni uji coba.

2a. Product Interpretation and Delivery Boundary

Pengiriman saat ini. Produk dikirim sebagai satu halaman web publik yang dapat dibuka langsung di browser tanpa proses masuk, tanpa pendaftaran, dan tanpa penyiapan apa pun. Halaman ini adalah public entry surface: begitu dibuka, pengunjung langsung melihat panggung animasi dan dapat berinteraksi dengannya.

Kepemilikan akses. Tidak ada identitas aplikasi yang diperlukan. Tidak ada keadaan pengguna yang harus dimiliki secara privat, dilanjutkan, atau diikatkan pada peserta tertentu — tidak ada komitmen, keputusan, atau transfer nilai yang perlu tetap terikat pada pengguna tertentu. Karena itu, tidak ada alur masuk, tidak ada verifikasi, dan tidak ada pengelolaan akun. Halaman dapat diakses sepenuhnya secara anonim.

Batas saat ini vs. masa depan. Saat ini hanya ada satu halaman Landing dengan showcase animasi. Tidak ada halaman tambahan, tidak ada area terkunci, dan tidak ada fitur masa depan yang direncanakan dalam lingkup ini. Jika di kemudian hari pemilik ingin menambahkan eksperimen animasi baru, itu akan menjadi pekerjaan masa depan yang terpisah dan tidak termasuk dalam dokumen ini.

Batas tanggung jawab. Seluruh animasi, tata letak, tipografi, dan interaksi dijalankan di sisi klien di dalam browser. Tidak ada pekerjaan yang diserahkan ke provider eksternal atau tujuan luar.

2c. Page Content and Component Coverage

Landing

Informasi dan keadaan. Halaman Landing adalah panggung penuh-viewport yang memperkenalkan dan menampilkan showcase animasi web. Keadaan utamanya adalah keadaan gerakan: grid node diam atau beriak, headline dalam posisi istirahat atau terpental, marquee berjalan atau berhenti, dan bagian yang sedang aktif. Tidak ada keadaan data yang dimuat dari server; seluruh keadaan dihasilkan dari parameter halaman sendiri (posisi kursor, kecepatan gulir, offset gulir, jumlah node).

Aksi utama.

• Menggerakkan kursor di atas panggung untuk memicu riak grid node dan pantulan huruf headline.
• Menggulir untuk memicu transisi sapuan warna antar-bagian dan animasi tipe kinetik.
• Menekan tombol "Jalankan animasi" untuk memulai/menjalankan showcase animasi.
• Mengarahkan kursor ke marquee untuk menjeda gulirannya.

Aksi pendukung.

• Membaca ticker vertikal di tepi kiri yang menyebutkan nama eksperimen saat ini.
• Membaca readout performa langsung (FPS, kecepatan kursor, offset gulir) di sudut kanan atas.
• Membaca label mikro dan metadata.

Entitas domain.

• Eksperimen animasi — unit showcase yang ditampilkan; memiliki nama yang muncul di marquee dan ticker.
• Panggung hero — area 100dvh tempat headline kinetik dan grid node hidup.
• Grid node — matriks 24×14 titik yang beriak dari posisi kursor.
• Headline kinetik — kata display "animasi" yang huruf-hurufnya merupakan elemen independen.
• Readout performa — angka FPS, kecepatan kursor, dan offset gulir.
• Marquee — pita berjalan berisi nama-nama eksperimen.

Tanggung jawab komponen.

• Panggung hero — menampung headline kinetik dan grid node; menetapkan latar near-black tanpa kartu, tanpa kontainer, tanpa gradien.
• Headline kinetik — merender setiap huruf kata "animasi" sebagai elemen independen yang terpental dari kursor dengan fisika pegas teredam dan kembali ke posisi semula.
• Grid node reaktif — merender matriks 24×14 titik acid-yellow pada opasitas 30% yang beriak keluar dari posisi kursor dan mereda hingga diam.
• Baris subjudul — menampilkan "web yang bergerak" pada 24px dalam warna muted, rata kiri pada margin 24px.
• Tombol CTA — persegi panjang datar berbingkai 1px berlabel "Jalankan animasi" dalam acid yellow, dipasang di sudut kiri bawah, dengan titik oranye berdenyut di sisinya.
• Readout performa — label mikro monospace tetap di sudut kanan atas yang menampilkan FPS, kecepatan kursor, dan offset gulir.
• Ticker vertikal tepi kiri — daftar label mikro yang menyebutkan nama eksperimen saat ini.
• Marquee — pita nama eksperimen yang berjalan terus menerus dari kanan ke kiri di tepi bawah setiap bagian, berhenti saat hover.
• Transisi sapuan warna — pita acid-yellow atau oranye selebar penuh yang menyapu viewport saat menggulir melewati batas bagian, mengungkap bagian berikutnya di bawahnya.
• Garis gelombang sinus — garis yang merespons kecepatan gulir.

Keadaan loading, kosong, sukses, error, dan pemulihan.

• Loading: tidak ada keadaan pemuatan data; panggung dirender langsung. Jika font atau skrip belum siap, teks tetap terbaca dalam fallback dan gerakan dimulai setelah siap.
• Kosong: tidak berlaku — showcase selalu memiliki konten animasi yang ditampilkan.
• Sukses: animasi berjalan pada 60fps, headline terpental dan kembali, grid beriak dan mereda, marquee berjalan, transisi sapuan warna terpicu saat menggulir.
• Error: jika browser tidak mendukung canvas atau requestAnimationFrame, halaman tetap menampilkan headline, subjudul, tombol, dan marquee sebagai konten statis yang terbaca.
• Pemulihan: jika animasi berhenti atau tersendat, pengguna dapat memuat ulang halaman; jika prefers-reduced-motion aktif, semua loop berhenti, marquee menjadi baris statis yang membungkus, dan headline duduk utuh dan diam.

3. Functional Requirements

FR-1 — Menampilkan showcase animasi web As a Pengunjung Animasi Web, I should membuka halaman Landing dan langsung melihat showcase animasi web yang berjalan, so that saya dapat menikmati efek animasi yang ditampilkan.

• Provenance: explicit (permintaan "Buatkan saya animasi web")
• Trigger/input: pengunjung membuka halaman Landing.
• Hasil yang dapat diamati: panggung 100dvh dengan latar near-black menampilkan headline kinetik, grid node, dan marquee yang bergerak.
• Keadaan akses: publik, tanpa masuk.
• Kegagalan/pemulihan: jika animasi tidak dapat berjalan, konten tetap terbaca sebagai teks statis.
• Kelanjutan: pengunjung dapat berinteraksi dengan gerakan melalui kursor dan gulir.

FR-2 — Headline kinetik yang terpental dari kursor As a Pengunjung Animasi Web, I should menggerakkan kursor di atas headline sehingga huruf-hurufnya terpental menjauh dan kembali dengan fisika pegas teredam, so that headline tidak pernah berbentuk sama dua kali dan halaman terasa hidup.

• Provenance: explicit (creative direction: signature move "Cursor-repelled kinetic headline")
• Trigger/input: posisi dan kecepatan kursor di atas area headline.
• Hasil yang dapat diamati: setiap huruf kata "animasi" bergerak menjauh dari kursor lalu kembali ke posisi semula dengan easing teredam.
• Keadaan akses: publik.
• Kegagalan/pemulihan: jika pointer tidak tersedia (perangkat sentuh), headline duduk diam dan tetap terbaca.
• Kelanjutan: pengunjung dapat terus menggerakkan kursor untuk mengulang efek.

FR-3 — Grid node reaktif As a Pengunjung Animasi Web, I should melihat matriks titik acid-yellow beriak keluar dari posisi kursor dan mereda hingga diam, so that tekstur ambien halaman dihasilkan dari data pointer, bukan gambar.

• Provenance: explicit (creative direction: signature move "Reactive node grid")
• Trigger/input: posisi kursor di atas panggung.
• Hasil yang dapat diamati: grid 24×14 titik pada opasitas 30% beriak dari kursor dan kembali diam.
• Keadaan akses: publik.
• Kegagalan/pemulihan: tanpa pointer, grid tetap diam sebagai tekstur statis.
• Kelanjutan: riak berulang setiap kali kursor bergerak.

FR-4 — Transisi batas bagian sebagai sapuan warna As a Pengunjung Animasi Web, I should menggulir melewati batas bagian dan melihat pita warna menyapu viewport untuk mengungkap bagian berikutnya, so that transisi itu sendiri menjadi navigasi.

• Provenance: explicit (creative direction: signature move "Section boundaries as colour-block wipes")
• Trigger/input: gulir melewati ambang batas bagian.
• Hasil yang dapat diamati: pita acid-yellow atau oranye selebar penuh menyapu viewport dan bagian berikutnya terungkap di bawahnya.
• Keadaan akses: publik.
• Kegagalan/pemulihan: jika animasi tidak tersedia, bagian berikutnya tetap dapat dicapai dengan menggulir biasa.
• Kelanjutan: pengunjung melanjutkan menggulir ke bagian berikutnya.

FR-5 — Marquee nama eksperimen As a Pengunjung Animasi Web, I should melihat pita nama eksperimen berjalan terus menerus di tepi bawah setiap bagian dan berhenti saat saya mengarahkan kursor ke atasnya, so that saya dapat membaca nama eksperimen sambil menikmati gerakan.

• Provenance: explicit (creative direction: signature move "Continuous marquee ribbon")
• Trigger/input: halaman dirender; hover pada marquee.
• Hasil yang dapat diamati: pita bergerak dari kanan ke kiri tanpa henti; berhenti saat hover; setiap item menjadi terbaca penuh saat melewati viewport.
• Keadaan akses: publik.
• Kegagalan/pemulihan: jika prefers-reduced-motion aktif, marquee membungkus menjadi baris statis dua baris.
• Kelanjutan: marquee melanjutkan gulirannya saat kursor menjauh.

FR-6 — Readout performa langsung As a Pemilik Showcase Animasi, I should melihat readout monospace di sudut kanan atas yang menampilkan FPS, kecepatan kursor, dan offset gulir, so that angka performa animasi menjadi bagian permanen dari antarmuka dan saya dapat memastikan animasi berjalan.

• Provenance: explicit (creative direction: signature move "Live performance readout")
• Trigger/input: halaman berjalan.
• Hasil yang dapat diamati: label mikro monospace tetap menampilkan nilai FPS, kecepatan kursor, dan offset gulir yang diperbarui secara langsung.
• Keadaan akses: publik.
• Kegagalan/pemulihan: jika pengukuran tidak tersedia, readout menampilkan nilai netral tanpa mengganggu animasi.
• Kelanjutan: readout terus diperbarui selama halaman terbuka.

FR-7 — Tombol "Jalankan animasi" As a Pengunjung Animasi Web, I should menekan tombol "Jalankan animasi" di sudut kiri bawah untuk memulai showcase animasi, so that saya dapat menjalankan animasi secara eksplisit.

• Provenance: explicit (creative direction: hero direction — single CTA "Jalankan animasi")
• Trigger/input: klik/tap pada tombol.
• Hasil yang dapat diamati: showcase animasi berjalan; tombol berubah menjadi bingkai 2px acid-yellow saat hover.
• Keadaan akses: publik.
• Kegagalan/pemulihan: jika animasi sudah berjalan, tombol tetap dapat ditekan tanpa efek samping yang merusak.
• Kelanjutan: pengunjung dapat terus berinteraksi dengan animasi yang berjalan.

FR-8 — Ticker vertikal nama eksperimen As a Pengunjung Animasi Web, I should melihat ticker vertikal di tepi kiri yang menyebutkan nama eksperimen saat ini, so that saya tahu eksperimen mana yang sedang ditampilkan.

• Provenance: explicit (creative direction: layout — fixed left-edge vertical ticker)
• Trigger/input: gulir atau perubahan bagian aktif.
• Hasil yang dapat diamati: label mikro di tepi kiri diperbarui untuk menyebutkan eksperimen saat ini.
• Keadaan akses: publik.
• Kegagalan/pemulihan: jika tidak ada eksperimen aktif, ticker menampilkan label netral.
• Kelanjutan: ticker diperbarui saat pengunjung berpindah bagian.

FR-9 — Animasi tipe kinetik saat gulir As a Pengunjung Animasi Web, I should melihat setiap kata headline meluncur naik dari topeng terpotong dengan stagger 40ms saat saya menggulir, so that tipografi terasa sebagai materi kinetik, bukan blok statis.

• Provenance: explicit (creative direction: motion — kinetic type on scroll)
• Trigger/input: gulir halaman.
• Hasil yang dapat diamati: kata-kata headline muncul satu per satu dari topeng dengan jeda 40ms.
• Keadaan akses: publik.
• Kegagalan/pemulihan: jika prefers-reduced-motion aktif, headline duduk utuh dan diam.
• Kelanjutan: pengunjung melanjutkan menggulir ke bagian berikutnya.

FR-10 — Garis gelombang sinus responsif gulir As a Pengunjung Animasi Web, I should melihat garis gelombang sinus yang merespons kecepatan gulir, so that bahkan garis dekoratif pun merupakan data dari halaman itu sendiri.

• Provenance: explicit (creative direction: imagery — sine-wave line responding to scroll velocity)
• Trigger/input: kecepatan gulir.
• Hasil yang dapat diamati: amplitudo/frekuensi garis berubah mengikuti kecepatan gulir.
• Keadaan akses: publik.
• Kegagalan/pemulihan: tanpa gulir, garis diam pada bentuk dasar.
• Kelanjutan: garis terus merespons selama pengunjung menggulir.

FR-11 — Meninjau hasil animasi web As a Pemilik Showcase Animasi, I should membuka halaman dan meninjau bahwa animasi berjalan sesuai harapan, so that tersedia animasi web yang siap ditampilkan.

• Provenance: required_inference (persona "Pemilik Showcase Animasi" — tanggung jawab meninjau halaman yang dihasilkan)
• Trigger/input: pemilik membuka halaman Landing.
• Hasil yang dapat diamati: pemilik melihat headline kinetik, grid node, marquee, transisi sapuan warna, dan readout performa berjalan; pemilik dapat memastikan animasi berfungsi.
• Keadaan akses: publik, tanpa masuk.
• Kegagalan/pemulihan: jika animasi tidak berjalan, pemilik dapat memuat ulang halaman atau menyesuaikan preferensi gerakan browser.
• Kelanjutan: pemilik dapat membagikan atau menampilkan halaman kepada orang lain.

FR-12 — Menghormati preferensi gerakan yang dikurangi As a Pengunjung Animasi Web, I should mendapatkan pengalaman yang tenang dan utuh ketika perangkat saya meminta gerakan dikurangi, so that saya tetap dapat membaca dan menggunakan halaman tanpa animasi yang mengganggu.

• Provenance: explicit (creative direction: motion — under prefers-reduced-motion every loop stops)
• Trigger/input: preferensi sistem prefers-reduced-motion: reduce.
• Hasil yang dapat diamati: semua loop berhenti, marquee menjadi baris statis yang membungkus, headline duduk utuh dan diam, grid node diam.
• Keadaan akses: publik.
• Kegagalan/pemulihan: tidak berlaku — ini adalah keadaan pemulihan itu sendiri.
• Kelanjutan: pengunjung tetap dapat membaca seluruh konten dan menggunakan tombol.

4. User Personas

Pengunjung Animasi Web

Konteks produk. Pengunjung adalah siapa pun yang membuka halaman animasi web — tanpa akun, tanpa konteks sebelumnya, tanpa tujuan selain melihat apa yang terjadi. Mereka tiba di panggung 100dvh dan langsung berhadapan dengan gerakan.

Tujuan utama. Menjelajahi halaman dan menyaksikan animasi berjalan; mengalami animasi web yang berfungsi dan terasa hidup.

Tanggung jawab yang diterima. Membuka halaman, menggerakkan kursor di atas panggung untuk memicu riak grid dan pantulan headline, menggulir untuk memicu transisi sapuan warna dan animasi tipe kinetik, mengarahkan kursor ke marquee untuk menjeda dan membaca, serta menekan tombol "Jalankan animasi".

Input dan keputusan. Posisi dan kecepatan kursor; kecepatan dan offset gulir; hover pada marquee; klik pada tombol CTA. Keputusan utama pengunjung adalah seberapa jauh mereka menjelajah dan elemen mana yang mereka sentuh dengan kursor.

Interaksi dengan peserta lain. Pengunjung tidak berinteraksi langsung dengan Pemilik Showcase Animasi; keduanya berbagi halaman yang sama. Pengunjung adalah audiens yang mengalami animasi; pemilik adalah pihak yang meninjau bahwa animasi itu berjalan.

Keberhasilan yang dapat diamati. Pengunjung melihat headline terpental dan kembali, grid beriak dan mereda, marquee berjalan, transisi menyapu saat menggulir, dan readout performa bergerak — semuanya pada 60fps tanpa tersendat.

Yang membedakan peran ini. Pengunjung adalah pengalaman murni: mereka tidak mengubah konten, tidak mengonfigurasi apa pun, dan tidak memiliki keadaan yang perlu disimpan. Seluruh nilai peran ini terletak pada sensasi gerakan yang mereka rasakan di bawah kursor.

Pemilik Showcase Animasi

Konteks produk. Pemilik adalah pihak yang meminta dibuatkannya animasi web sebagai uji coba dan menyerahkan seluruh pengerjaan kepada asisten. Mereka tidak menetapkan tujuan produk, fitur, atau detail teknis apa pun.

Tujuan utama. Memastikan hasilnya dapat dilihat dan berjalan sesuai harapan; tersedianya animasi web yang siap ditampilkan.

Tanggung jawab yang diterima. Meninjau halaman animasi yang dihasilkan — membuka Landing, mengamati bahwa animasi berjalan, dan memastikan showcase siap ditampilkan.

Input dan keputusan. Membuka halaman; mengamati gerakan; memutuskan apakah animasi berjalan sesuai harapan. Keputusan utama pemilik adalah apakah hasil uji coba ini sudah layak ditampilkan.

Interaksi dengan peserta lain. Pemilik tidak berinteraksi langsung dengan Pengunjung Animasi Web, tetapi hasil kerjanya adalah halaman yang sama yang dialami pengunjung. Keberhasilan pemilik diukur dari apakah pengunjung dapat mengalami animasi yang berfungsi.

Keberhasilan yang dapat diamati. Pemilik melihat seluruh elemen animasi berjalan — headline kinetik, grid node, marquee, transisi sapuan warna, readout performa — dan dapat menyatakan bahwa animasi web siap ditampilkan.

Yang membedakan peran ini. Pemilik adalah peninjau, bukan pengguna harian. Mereka tidak berinteraksi dengan gerakan untuk kesenangan, melainkan untuk memverifikasi bahwa gerakan itu ada dan berfungsi. Peran ini bersifat sekali jalan: setelah meninjau, tanggung jawabnya selesai.

5. Core User Flows

Alur 1 — Pengunjung membuka dan mengalami showcase animasi

1. Konteks awal: Pengunjung Animasi Web membuka URL halaman Landing di browser. Tidak ada proses masuk.
2. Aksi: Pengunjung tiba di panggung 100dvh dengan latar near-black #0E0E10.
3. Hasil yang dapat diamati: kata "animasi" dalam Space Grotesk 700 lowercase berwarna paper-white #F4F2ED membentang dan sedikit melampaui lebar viewport; baris "web yang bergerak" pada 24px muted #8A8A93 duduk rata kiri pada margin 24px; grid node acid-yellow 24×14 pada opasitas 30% diam sebagai tekstur; tombol "Jalankan animasi" berbingkai 1px acid-yellow di sudut kiri bawah dengan titik oranye berdenyut; readout monospace di sudut kanan atas menampilkan FPS, kecepatan kursor, dan offset gulir.
4. Aksi: Pengunjung menggerakkan kursor melintasi headline.
5. Hasil: setiap huruf kata "animasi" terpental menjauh dari kursor dengan fisika pegas teredam dan kembali ke posisi semula; grid node beriak keluar dari posisi kursor dan mereda hingga diam.
6. Aksi: Pengunjung menekan tombol "Jalankan animasi".
7. Hasil: showcase animasi berjalan; tombol menebal menjadi bingkai 2px acid-yellow saat hover.
8. Aksi: Pengunjung menggulir ke bawah.
9. Hasil: pita acid-yellow atau oranye selebar penuh menyapu viewport dan mengungkap bagian berikutnya; kata-kata headline meluncur naik dari topeng terpotong dengan stagger 40ms; garis gelombang sinus berubah mengikuti kecepatan gulir; ticker vertikal di tepi kiri memperbarui nama eksperimen saat ini.
10. Aksi: Pengunjung mengarahkan kursor ke marquee di tepi bawah.
11. Hasil: marquee berhenti; setiap nama eksperimen menjadi terbaca penuh saat melewati viewport.
12. Kelanjutan: Pengunjung menjauhkan kursor, marquee melanjutkan gulirannya; pengunjung dapat terus menjelajah atau menutup halaman.

Kegagalan dan pemulihan: jika animasi tersendat, pengunjung dapat memuat ulang halaman. Jika browser tidak mendukung canvas atau requestAnimationFrame, halaman tetap menampilkan headline, subjudul, tombol, dan marquee sebagai konten statis yang terbaca.

Alur 2 — Pengunjung dengan preferensi gerakan dikurangi

1. Konteks awal: Pengunjung membuka halaman dengan prefers-reduced-motion: reduce aktif di sistem operasi.
2. Aksi: Pengunjung tiba di panggung.
3. Hasil yang dapat diamati: semua loop berhenti; headline duduk utuh dan diam; grid node diam; marquee membungkus menjadi baris statis dua baris; tidak ada animasi yang berjalan.
4. Aksi: Pengunjung membaca headline, subjudul, label mikro, dan nama eksperimen di marquee statis.
5. Hasil: seluruh konten terbaca penuh; tombol "Jalankan animasi" tetap dapat digunakan.
6. Kelanjutan: Pengunjung dapat menggulir dan membaca seluruh halaman tanpa gerakan.

Alur 3 — Pemilik meninjau hasil animasi web

1. Konteks awal: Pemilik Showcase Animasi membuka halaman Landing untuk meninjau hasil uji coba.
2. Aksi: Pemilik mengamati panggung hero.
3. Hasil yang dapat diamati: headline kinetik, grid node reaktif, marquee berjalan, dan readout performa yang menampilkan FPS, kecepatan kursor, dan offset gulir semuanya aktif.
4. Aksi: Pemilik menggerakkan kursor di atas headline dan grid, lalu menggulir melewati batas bagian.
5. Hasil: headline terpental dan kembali; grid beriak dan mereda; transisi sapuan warna terpicu; animasi tipe kinetik berjalan; garis gelombang sinus merespons kecepatan gulir.
6. Aksi: Pemilik menekan tombol "Jalankan animasi".
7. Hasil: showcase animasi berjalan.
8. Keputusan: Pemilik memutuskan apakah animasi berjalan sesuai harapan.
9. Hasil akhir: tersedia animasi web yang siap ditampilkan.
10. Kelanjutan: Pemilik dapat membagikan atau menampilkan halaman kepada orang lain.

Kegagalan dan pemulihan: jika animasi tidak berjalan, pemilik dapat memuat ulang halaman atau memeriksa preferensi gerakan browser. Jika masalah berlanjut, pemilik dapat melaporkannya untuk perbaikan.

6. Visuals Colors and Theme

Muse: Yugo Nakamura. Headline: Interaction as delight — a kinetic playground.

Karena produk ini adalah animasi, bahasa visualnya adalah gerakan itu sendiri. Paletnya sengaja sempit dan kontras tinggi agar setiap elemen bergerak terbaca sebagai cahaya di atas kehampaan.

Palet (dark mode)

Tidak ada gradien, tidak ada glass, tidak ada biru dalam bentuk apa pun.

Tipografi

Satu keluarga, dua suara: Space Grotesk.

• Headings: Space Grotesk 700 pada ukuran display, tracking rapat -0.03em, headline diset lowercase (informalitas adalah intinya). Headline diperlakukan sebagai materi kinetik — kata atau huruf individual adalah elemen animasi terpisah, bukan blok statis.
• Body: Space Grotesk 400 pada ukuran body, tracking +0.01em.
• Uppercase hanya untuk label mikro 11px dengan tracking +0.18em.

Skala tipe (modular 1.5 dengan langkah display fluid):

Langkah display sengaja dibuat sangat besar agar headline dapat membentang dan melampaui viewport sebagai perangkat komposisi.

Bahasa bentuk

Hampir tidak ada styling bentuk — gerakan adalah ornamennya. Sudut keras 0px pada panel dan kontrol; hairline 1px dalam rgba(244,242,237,0.14); persegi panjang full-bleed yang bertemu tepi ke tepi. Satu-satunya kurva dalam sistem berasal dari jalur gerakan: jejak kursor, easing elastis, dan grid titik generatif yang node-nya bergeser di bawah pointer. Kontrol adalah persegi panjang datar dengan bingkai 1px yang menebal menjadi 2px acid-yellow saat hover; tanpa bayangan, tanpa radius, tanpa pill.

Tata letak

Panggung penuh-viewport, bukan halaman berisi bagian bertumpuk. Hero adalah kanvas 100dvh tunggal berisi tipe interaktif dan grid node generatif. Di bawahnya, bagian dipisahkan oleh transisi "wipe" horizontal di mana pita warna menyapu dan bagian berikutnya terungkap di bawahnya — batas bagian itu sendiri adalah animasi. Ticker vertikal label mikro tetap di tepi kiri dan menyebutkan eksperimen saat ini. Konten duduk dalam grid 12 kolom dengan gutter 24px di desktop, runtuh menjadi satu kolom pada 375px, tetapi hero sengaja melanggar grid: headline diposisikan berdasarkan persentase viewport, bukan berdasarkan kolom.

Imagery

Tidak ada fotografi, tidak ada ilustrasi, tidak ada aset 3D — gerakan menggantikan imagery sepenuhnya. Konten visual bersifat generatif dan prosedural: grid titik reaktif, jejak partikel mengikuti kursor, garis gelombang sinus yang merespons kecepatan gulir, dan tipografi yang digunakan sebagai gambar. Di mana "objek" visual diperlukan, ia digambar dalam canvas/SVG dari parameter halaman itu sendiri (jumlah node, posisi pointer, offset gulir), sehingga imagery-nya secara harfiah adalah data produk.

7. Signature Design Concept

Panggung "animasi" yang hidup di bawah kursor.

Hero adalah panggung 100dvh near-black #0E0E10 tanpa kartu, tanpa kontainer, dan tanpa gradien. Elemen dominannya adalah kata "animasi" dalam Space Grotesk 700 pada clamp(56px, 12vw, 176px), lowercase, berwarna paper-white #F4F2ED, diposisikan sehingga membentang dan sedikit melampaui lebar viewport penuh — kata itu adalah komposisinya, bukan headline yang duduk di atasnya.

Di belakangnya, grid node acid-yellow 24×14 pada opasitas 30% beriak menjauh dari kursor dan mereda. Baris kedua, "web yang bergerak", duduk pada 24px dalam muted #8A8A93 di bawah kata display, rata kiri pada margin 24px. Satu-satunya CTA adalah persegi panjang datar berbingkai 1px berlabel "Jalankan animasi" dalam acid yellow, dipasang di sudut kiri bawah, dengan titik oranye #FF4D2E berdenyut di sisinya. Di sudut kanan atas, readout FPS/gerakan langsung dalam tipe mikro monospace membuat performa halaman itu sendiri menjadi bagian dari seni.

Tidak ada yang di tengah; komposisi berlabuh ke sudut kiri bawah dan meluber keluar tepi kanan. Setiap huruf kata "animasi" adalah elemen independen yang mendorong menjauh dari pointer dengan fisika pegas teredam dan kembali ke posisi semula — headline tidak pernah berbentuk sama dua kali.

Konsep ini hanya menyusun ulang konten, keadaan, dan kontrol yang sudah diterima: headline, subjudul, grid node, tombol CTA, readout performa, dan ticker. Tidak ada perilaku, halaman, atau tujuan baru yang diperkenalkan.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

Subjek fokus: kata "animasi" yang dibentuk oleh huruf-huruf independen, dengan grid node acid-yellow 24×14 beriak di belakangnya.

Tesis input → transformasi → hasil: posisi dan kecepatan kursor (input) → setiap huruf headline terpental menjauh dengan fisika pegas teredam sementara node grid beriak keluar dari posisi kursor dan mereda (transformasi) → headline yang tidak pernah berbentuk sama dua kali dan tekstur ambien yang dihasilkan dari data pointer (hasil).

Kosakata gerakan: fisika reaktif kursor di mana-mana; easing teredam; tipe kinetik dengan stagger 40ms; transisi sapuan blok warna; marquee berjalan terus menerus; semua gerakan hanya pada transform/opacity, 60fps, digerakkan oleh requestAnimationFrame dengan velocity damping — tidak pernah CSS keyframes pada properti layout.

Bingkai pertama yang tersusun: panggung near-black dengan kata "animasi" membentang penuh dan meluber keluar tepi kanan; grid node acid-yellow diam pada opasitas 30%; "web yang bergerak" rata kiri di bawahnya; tombol "Jalankan animasi" berbingkai 1px di sudut kiri bawah dengan titik oranye berdenyut; readout monospace di sudut kanan atas; ticker vertikal di tepi kiri; marquee diam di tepi bawah sebelum mulai berjalan.

Keadaan gerakan dikurangi: semua loop berhenti; marquee membungkus menjadi baris statis dua baris; headline duduk utuh dan diam; grid node diam; tidak ada animasi yang berjalan. Seluruh konten tetap terbaca penuh dan tombol tetap dapat digunakan.

9. Non-Functional Requirements

NFR-1 — Performa gerakan 60fps Seluruh animasi harus berjalan pada 60fps menggunakan hanya transform dan opacity, digerakkan oleh requestAnimationFrame dengan velocity damping, tidak pernah CSS keyframes pada properti layout (width, top, margin).

• Provenance: explicit (creative direction: motion)
• Rasional: produk ini adalah animasi; gerakan yang tersendat menghancurkan nilai intinya.

NFR-2 — Aksesibilitas gerakan yang dikurangi Di bawah prefers-reduced-motion, setiap loop berhenti, marquee menjadi baris statis yang membungkus, dan headline duduk utuh dan diam.

• Provenance: explicit (creative direction: motion)
• Rasional: menghormati preferensi pengguna dan memastikan konten tetap dapat diakses.

NFR-3 — Teks dan kontrol tetap utuh di setiap viewport Headline, wordmark, label, angka, teks kartu, dan kontrol harus tetap sepenuhnya di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (misalnya font-size: clamp(...) dengan ukuran mobile-nya) agar muat; tidak ada elemen lain yang menutupi bagian mana pun dari mereka.

• Provenance: explicit (creative direction: readable text and controls rule)
• Rasional: keterbacaan adalah batas keras yang mengalahkan gestur visual.

NFR-4 — Kontras teks Teks #F4F2ED di atas ground #0E0E10 memberikan kontras 15.8:1. Muted #8A8A93 hanya untuk metadata dan kontrol tidak aktif, tidak pernah untuk body copy.

• Provenance: explicit (creative direction: palette)
• Rasional: memastikan keterbacaan penuh di atas latar near-black.

NFR-5 — Tanpa dependensi eksternal yang terlihat pengguna Tidak ada provider eksternal, layanan pihak ketiga, atau backend yang terlihat oleh pengguna. Seluruh animasi dijalankan di sisi klien.

• Provenance: required_inference (delivery_shape: custom_ui; tidak ada integrasi yang disebutkan)
• Rasional: lingkup uji coba tidak memerlukan integrasi apa pun.

NFR-6 — Konten bergerak tetap dapat dibaca Konten yang bergerak dan dapat digulir (marquee, ticker) boleh melintasi tepi viewport atau kontainer secara desain; setiap item harus menjadi terbaca penuh saat melewatinya. Dengan prefers-reduced-motion, konten berhenti dan menampilkan item utuh — membungkus menjadi baris atau duduk dalam baris yang dapat digulir horizontal (overflow-x: auto).

• Provenance: explicit (creative direction: readable text and controls rule)
• Rasional: gerakan tidak boleh mengorbankan keterbacaan.

10. Tech Stack

• Frontend: React (aplikasi web satu halaman).
• Animasi: Canvas/SVG untuk grid node generatif, jejak partikel, dan garis gelombang sinus; requestAnimationFrame dengan velocity damping untuk seluruh gerakan; transform/opacity saja.
• Tipografi: Space Grotesk (700 untuk heading, 400 untuk body).
• Styling: CSS dengan custom properties untuk token warna dan tipe; grid 12 kolom dengan gutter 24px.
• Build: Vite (default yang sesuai untuk aplikasi React satu halaman).
• Deployment: static hosting; tidak ada backend, tidak ada database, tidak ada Docker/Kubernetes yang diperlukan untuk lingkup uji coba ini.

Catatan: pilihan teknologi di atas adalah default yang wajar untuk lingkup uji coba satu halaman; pengguna tidak menetapkan teknologi spesifik.

11. Assumptions and Constraints

Batasan keras (dari sumber):

• Tidak ada tujuan produk spesifik yang ditetapkan pengguna; animasi web dibuat sebagai uji coba.
• Pengguna menyerahkan pengerjaan sepenuhnya kepada asisten tanpa menentukan tujuan atau detail produk.

Asumsi (sempit dan berlabel):

• [Asumsi] Halaman tunggal (Landing) sudah cukup untuk lingkup uji coba; tidak ada halaman tambahan yang diperlukan.
• [Asumsi] Tidak ada identitas aplikasi, akun, atau sesi yang diperlukan karena tidak ada keadaan pengguna yang harus dimiliki secara privat atau dilanjutkan.
• [Asumsi] Tidak ada backend, database, atau integrasi eksternal yang diperlukan untuk lingkup uji coba.
• [Asumsi] Showcase menampilkan satu set eksperimen animasi yang dirender di sisi klien; nama-nama eksperimen di marquee dan ticker adalah bagian dari konten showcase itu sendiri.

Batasan desain (dari creative direction):

• Palet terbatas pada #0E0E10, #17171B, #F4F2ED, #F2FF3A, #FF4D2E, #8A8A93. Tidak ada gradien, tidak ada glass, tidak ada biru.
• Tipografi hanya Space Grotesk.
• Sudut keras 0px; tanpa bayangan, tanpa radius, tanpa pill.
• Tidak ada fotografi, ilustrasi, atau aset 3D.
• Gerakan hanya pada transform/opacity; tidak ada animasi yang berjalan di bawah prefers-reduced-motion.
• Template SaaS indigo/biru-di-atas-putih dilarang untuk proyek ini.

Di luar lingkup (pengecualian):

• Tidak ada katalog produk, transaksi, pembayaran, atau pengiriman.
• Tidak ada akun pengguna, masuk, atau pengelolaan profil.
• Tidak ada dashboard admin atau panel konfigurasi.
• Tidak ada fitur masa depan yang direncanakan dalam dokumen ini.

12. Glossary

• Showcase animasi — halaman web yang memperlihatkan efek animasi sebagai isi utamanya.
• Panggung hero — area 100dvh di bagian atas Landing tempat headline kinetik dan grid node hidup.
• Headline kinetik — kata display "animasi" yang setiap hurufnya merupakan elemen independen yang bergerak sebagai respons terhadap kursor.
• Grid node reaktif — matriks 24×14 titik acid-yellow pada opasitas 30% yang beriak keluar dari posisi kursor dan mereda hingga diam.
• Marquee — pita berjalan berisi nama-nama eksperimen yang bergerak dari kanan ke kiri di tepi bawah setiap bagian dan berhenti saat hover.
• Transisi sapuan warna — pita acid-yellow atau oranye selebar penuh yang menyapu viewport saat menggulir melewati batas bagian, mengungkap bagian berikutnya di bawahnya.
• Readout performa — label mikro monospace tetap di sudut kanan atas yang menampilkan FPS, kecepatan kursor, dan offset gulir.
• Ticker vertikal — daftar label mikro di tepi kiri yang menyebutkan nama eksperimen saat ini.
• Eksperimen animasi — unit showcase yang ditampilkan; namanya muncul di marquee dan ticker.
• prefers-reduced-motion — preferensi sistem operasi yang meminta antarmuka mengurangi gerakan; ketika aktif, semua loop berhenti dan konten ditampilkan utuh dan diam.
• Uji coba — lingkup proyek ini: animasi web dibuat sebagai percobaan tanpa tujuan produk komersial.