System Requirements Document for ucapan-ulang-tahun

1. Introduction

ucapan-ulang-tahun adalah produk web yang memungkinkan seorang pacar laki-laki membuat link website ucapan ulang tahun untuk pacar perempuannya — sebuah hadiah digital, bukan utilitas. Pembuat menyusun isi ucapan, menyiapkan tampilan dan animasi, lalu menghasilkan sebuah link yang dapat dibagikan (misalnya lewat WhatsApp). Penerima membuka link tersebut dan melihat halaman ucapan ulang tahun beserta animasinya.

Produk ini ditujukan untuk:

• Pembuat Ucapan (Boyfriend) — pacar laki-laki yang ingin membuat dan membagikan link ucapan.
• Penerima Ucapan (Girlfriend) — pacar perempuan yang menerima dan membuka link ucapan.

Dua hal wajib dari permintaan pengguna menjadi inti produk: hasilnya harus bagus secara tampilan dan harus menyertakan animasi. Keduanya bukan pelengkap, melainkan syarat penerimaan.

2. System Overview

Produk ini adalah aplikasi web satu-arah yang terdiri dari empat halaman yang saling terhubung:

1. Landing — halaman awal anonim yang menjelaskan tujuan produk dan mengarahkan pembuat untuk mulai membuat ucapan.
2. Greeting Editor — ruang kerja pembuat untuk menyusun isi ucapan dan menyiapkan tampilan serta animasi bagi penerima.
3. Share Link — halaman penyelesaian yang menampilkan link website ucapan agar dapat dibagikan kepada penerima.
4. Birthday Greeting — halaman publik yang dibuka melalui link dan menampilkan ucapan ulang tahun beserta animasinya kepada penerima.

Aktor:

• Pembuat Ucapan (Boyfriend) — manusia, pengguna aktif. Menyusun ucapan, menyiapkan animasi, menghasilkan link.
• Penerima Ucapan (Girlfriend) — manusia, pengguna aktif. Membuka link dan melihat ucapan beserta animasinya.

Perilaku yang diterima:

• Membuat link website ucapan ulang tahun yang ditujukan untuk pacar perempuan.
• Tampilan yang bagus (art-directed, bukan template generik).
• Animasi yang menyertai ucapan.
• Ucapan dan animasi disimpan bersama link yang dihasilkan agar halaman tetap dapat dibuka oleh penerima.
• Pembuat menyelesaikan penyusunan ucapan sebelum link dibagikan.
• Penerima memerlukan link yang dihasilkan untuk membuka halaman ucapan.

Kepemilikan dan batas:

• Keempat halaman dimiliki oleh aplikasi (custom UI).
• Tidak ada autentikasi atau akun yang diperlukan pada halaman mana pun; akses bersifat publik/anonim sesuai kontrak halaman.
• Tidak ada integrasi pihak ketiga yang diwajibkan untuk pengiriman link; pembuat membagikan link secara manual (misalnya lewat WhatsApp).

Pengecualian sempit:

• Tidak ada fitur akun, login, atau manajemen pengguna.
• Tidak ada katalog template ucapan, galeri publik, atau feed sosial.
• Tidak ada analitik penerima, pelacakan pembukaan, atau notifikasi otomatis.
• Tidak ada editor animasi tingkat lanjut (timeline, keyframe kustom); animasi disiapkan sebagai pilihan yang telah disediakan.

2a. Product Interpretation and Delivery Boundary

Produk ini adalah gift object, bukan alat produktivitas. Nilai utamanya adalah momen ketika penerima membuka link dan melihat ucapan yang dibuat khusus untuknya, lengkap dengan animasi yang membuatnya terasa seperti perayaan.

Kepemilikan delivery dan akses:

• Seluruh halaman adalah milik aplikasi (first-party custom UI).
• Tidak ada identitas aplikasi yang diperlukan: pembuat tidak perlu membuat akun untuk menyusun ucapan, dan penerima tidak perlu membuat akun untuk membukanya. Ini konsisten dengan sifat produk sebagai hadiah sekali pakai yang dibagikan lewat link.
• Link yang dihasilkan bersifat publik dan dapat dibuka siapa pun yang memegangnya — ini adalah mekanisme berbagi yang diterima, bukan celah keamanan.

Batas current vs future:

• Current: keempat halaman, penyusunan ucapan, penyiapan animasi, pembuatan link, pembukaan link oleh penerima.
• Future (tidak termasuk dalam acceptance saat ini): fitur-fitur yang tidak diminta secara eksplisit, seperti akun pengguna, katalog template, penjadwalan pengiriman, atau analitik.

2b. Source Content Inventory

Tidak ada content_source yang dideklarasikan dalam directive referensi. Bagian ini tidak berlaku.

2c. Page Content and Component Coverage

Landing

Informasi dan state:

• Judul hero besar yang menyatakan tujuan produk: membuat dan membagikan website ucapan ulang tahun dengan animasi.
• Subteks singkat yang menjelaskan alur: susun ucapan → dapatkan link → bagikan.
• State: default (anonim, belum ada ucapan yang dibuat).

Aksi utama:

• Tombol CTA "Buat Ucapan" yang mengarahkan ke Greeting Editor.

Aksi pendukung:

• Tidak ada.

Entitas domain:

• Tidak ada entitas persisten; halaman ini murni entry point.

Tanggung jawab komponen:

• Hero section: headline, subteks, CTA.
• Marquee frasa sayang berbahasa Indonesia di bagian bawah hero.
• Sticker props dekoratif (stroberi, hati chrome, disco ball) yang bleed off edge.

State:

• Loading: tidak berlaku (halaman statis).
• Empty: tidak berlaku.
• Success: tidak berlaku.
• Error: tidak berlaku.
• Recovery: tidak berlaku.

Greeting Editor

Informasi dan state:

• Formulir penyusunan ucapan: nama penerima, isi ucapan, pilihan animasi.
• Preview langsung dari halaman ucapan yang akan dihasilkan.
• State: kosong (belum ada input), terisi sebagian, siap (semua field wajib terisi).

Aksi utama:

• Mengisi nama penerima.
• Menulis isi ucapan.
• Memilih animasi yang akan ditampilkan.
• Menyelesaikan penyusunan dan melanjutkan ke Share Link.

Aksi pendukung:

• Melihat preview yang diperbarui saat input berubah.

Entitas domain:

• Greeting: nama penerima, isi ucapan, pilihan animasi.

Tanggung jawab komponen:

• Panel editor (cream panel di atas pink ground) dengan field label sticker-chip.
• Preview card yang menampilkan hasil secara langsung.
• Tombol lanjut ke Share Link.

State:

• Loading: tidak berlaku (semua operasi lokal).
• Empty: field kosong dengan placeholder yang jelas; tombol lanjut dinonaktifkan sampai field wajib terisi.
• Success: semua field terisi; tombol lanjut aktif.
• Error: field wajib kosong saat mencoba lanjut — pesan inline yang menunjuk field yang bermasalah.
• Recovery: pengguna mengisi field yang kurang; state kembali ke success.

Share Link

Informasi dan state:

• Link website ucapan yang telah dihasilkan, ditampilkan dalam bentuk yang dapat disalin.
• State: link tersedia (selalu, karena halaman ini hanya dapat dicapai setelah penyusunan selesai).

Aksi utama:

• Menyalin link ke clipboard.
• Membagikan link (misalnya membuka WhatsApp dengan link yang sudah terisi).

Aksi pendukung:

• Membuka preview halaman ucapan di tab baru.

Entitas domain:

• Greeting (read-only): link yang dihasilkan terikat pada ucapan yang telah disusun.

Tanggung jawab komponen:

• Ticket card (cream) yang menampilkan link.
• Tombol copy.
• CTA lime untuk membagikan.

State:

• Loading: tidak berlaku.
• Empty: tidak berlaku (link selalu ada di halaman ini).
• Success: link berhasil disalin — feedback visual singkat.
• Error: clipboard tidak tersedia — link tetap ditampilkan sebagai teks yang dapat dipilih manual.
• Recovery: pengguna menyalin link secara manual.

Birthday Greeting

Informasi dan state:

• Ucapan ulang tahun yang telah disusun, ditampilkan dengan animasi yang dipilih.
• Nama penerima ditampilkan sebagai bagian dari ucapan.
• State: memuat (link sedang dibuka), berhasil (ucapan tampil), tidak ditemukan (link tidak valid).

Aksi utama:

• Tidak ada aksi wajib; halaman ini bersifat presentasional.

Aksi pendukung:

• Tidak ada.

Entitas domain:

• Greeting (read-only): nama penerima, isi ucapan, animasi.

Tanggung jawab komponen:

• Hero ucapan dengan headline besar dan nama penerima.
• Animasi yang dipilih (misalnya confetti burst saat halaman dimuat).
• Sticker props dekoratif.

State:

• Loading: indikator singkat saat ucapan diambil.
• Empty: tidak berlaku (link selalu membawa data ucapan).
• Success: ucapan dan animasi tampil.
• Error: link tidak valid atau ucapan tidak ditemukan — pesan yang jelas bahwa link tidak dapat dibuka.
• Recovery: penerima meminta link baru kepada pembuat.

3. Functional Requirements

FR-1: Membuat link website ucapan ulang tahun untuk pacar perempuan

• Provenance: explicit
• Story: As a Pembuat Ucapan (Boyfriend), I should dapat membuat link website ucapan ulang tahun yang ditujukan untuk pacar perempuan saya, so that saya dapat memberikannya sebagai hadiah.
• Lifecycle:
  • Initiator: Pembuat Ucapan.
  • Trigger/input: Pembuat membuka Landing dan memulai pembuatan ucapan.
  • Observable result: Sebuah link website ucapan yang dapat dibagikan.
  • Access state: Anonim; tidak ada akun yang diperlukan.
  • Failure/recovery: Jika penyusunan belum selesai, link belum dihasilkan; pembuat melengkapi field yang kurang.
  • Continuation: Pembuat melanjutkan ke Share Link untuk membagikan link.
• Acceptance: Link yang dihasilkan dapat dibuka dan menampilkan ucapan yang telah disusun.

FR-2: Tampilan website ucapan harus bagus

• Provenance: explicit
• Story: As a Pembuat Ucapan (Boyfriend), I should mendapatkan website ucapan dengan tampilan yang bagus, so that hadiah terasa istimewa dan layak diberikan.
• Lifecycle:
  • Initiator: Pembuat Ucapan (melalui pilihan tampilan di Greeting Editor).
  • Trigger/input: Pembuat menyusun ucapan di Greeting Editor.
  • Observable result: Halaman Birthday Greeting tampil dengan tata letak, warna, dan tipografi yang art-directed.
  • Access state: Anonim.
  • Failure/recovery: Tidak berlaku; tampilan selalu diterapkan.
  • Continuation: Penerima membuka link dan melihat tampilan tersebut.
• Acceptance: Halaman Birthday Greeting menggunakan palet, tipografi, dan tata letak yang ditentukan dalam Bagian 6, bukan template generik.

FR-3: Website ucapan harus menyertakan animasi

• Provenance: explicit
• Story: As a Pembuat Ucapan (Boyfriend), I should dapat menyertakan animasi pada website ucapan, so that penerima merasakan momen perayaan yang hidup.
• Lifecycle:
  • Initiator: Pembuat Ucapan (memilih animasi di Greeting Editor).
  • Trigger/input: Pembuat memilih animasi yang akan ditampilkan.
  • Observable result: Animasi tampil saat halaman Birthday Greeting dibuka.
  • Access state: Anonim.
  • Failure/recovery: Jika prefers-reduced-motion aktif, animasi berhenti dan state statis tetap terbaca penuh.
  • Continuation: Penerima melihat ucapan dengan animasi.
• Acceptance: Animasi yang dipilih tampil pada halaman Birthday Greeting; dengan prefers-reduced-motion, animasi tidak berjalan dan teks tetap terbaca.

FR-4: Ucapan dan animasi disimpan bersama link

• Provenance: required_inference
• Story: As a Pembuat Ucapan (Boyfriend), I should dapat menyimpan ucapan dan animasi bersama link yang dihasilkan, so that halaman tetap dapat dibuka oleh penerima kapan pun.
• Lifecycle:
  • Initiator: Pembuat Ucapan.
  • Trigger/input: Pembuat menyelesaikan penyusunan ucapan.
  • Observable result: Ucapan dan pilihan animasi tersimpan dan terikat pada link yang dihasilkan.
  • Access state: Anonim.
  • Failure/recovery: Jika penyimpanan gagal, pembuat diberi tahu dan dapat mencoba lagi.
  • Continuation: Link dapat dibuka dan menampilkan ucapan yang tersimpan.
• Acceptance: Membuka link menampilkan ucapan dan animasi yang persis seperti yang disusun.

FR-5: Pembuat menyelesaikan penyusunan sebelum link dibagikan

• Provenance: required_inference
• Story: As a Pembuat Ucapan (Boyfriend), I should menyelesaikan penyusunan ucapan sebelum link dibagikan, so that penerima tidak menerima link yang belum lengkap.
• Lifecycle:
  • Initiator: Pembuat Ucapan.
  • Trigger/input: Pembuat mencoba melanjutkan ke Share Link.
  • Observable result: Link hanya dihasilkan setelah semua field wajib terisi.
  • Access state: Anonim.
  • Failure/recovery: Jika field wajib kosong, tombol lanjut dinonaktifkan dan pesan inline menunjuk field yang bermasalah.
  • Continuation: Setelah lengkap, pembuat melanjutkan ke Share Link.
• Acceptance: Share Link tidak dapat diakses sebelum penyusunan selesai.

FR-6: Penerima memerlukan link untuk membuka halaman ucapan

• Provenance: required_inference
• Story: As a Penerima Ucapan (Girlfriend), I should membuka link yang dibagikan untuk melihat ucapan ulang tahun saya, so that saya dapat menikmati hadiah tersebut.
• Lifecycle:
  • Initiator: Penerima Ucapan.
  • Trigger/input: Penerima membuka link yang diterima.
  • Observable result: Halaman Birthday Greeting menampilkan ucapan dan animasi.
  • Access state: Anonim; tidak ada akun yang diperlukan.
  • Failure/recovery: Jika link tidak valid, pesan jelas ditampilkan; penerima meminta link baru kepada pembuat.
  • Continuation: Penerima membaca ucapan dan melihat animasi.
• Acceptance: Link yang valid membuka halaman Birthday Greeting dengan ucapan yang benar.

4. User Personas

Pembuat Ucapan (Boyfriend)

Konteks produk: Pacar laki-laki yang ingin membuat hadiah digital berupa link website ucapan ulang tahun untuk pacar perempuannya. Ia adalah pengguna aktif yang mengendalikan seluruh proses pembuatan.

Tujuan utama: Menghasilkan link website ucapan ulang tahun yang bagus dan beranimasi, lalu membagikannya kepada pacarnya.

Tanggung jawab yang diterima:

• Menyusun isi ucapan ulang tahun.
• Menyiapkan tampilan dan animasi bagi penerima.
• Menghasilkan link yang dapat dibagikan.
• Memastikan penyusunan selesai sebelum link dibagikan.

Input dan keputusan:

• Nama penerima.
• Isi ucapan.
• Pilihan animasi.

Interaksi dengan peserta lain:

• Berinteraksi dengan Penerima Ucapan secara tidak langsung melalui link yang dibagikan; ia tidak melihat reaksi penerima di dalam produk.

Keberhasilan yang dapat diamati: Link yang dihasilkan dapat dibuka dan menampilkan ucapan beserta animasi yang persis seperti yang ia susun.

Yang membedakan perannya: Ia adalah satu-satunya aktor yang menciptakan konten dan mengendalikan keputusan kreatif; tanpa tindakannya, tidak ada yang bisa dibuka penerima.

Penerima Ucapan (Girlfriend)

Konteks produk: Pacar perempuan yang menjadi sasaran ucapan. Ia menerima link dari pembuat dan membukanya untuk melihat hadiah.

Tujuan utama: Melihat ucapan ulang tahun yang dibuat khusus untuknya, beserta animasinya, sebagai pengalaman yang menyenangkan.

Tanggung jawab yang diterima:

• Membuka link yang dibagikan.
• Melihat halaman ucapan ulang tahun beserta animasinya.

Input dan keputusan:

• Tidak ada input; ia hanya membuka link.

Interaksi dengan peserta lain:

• Menerima link dari Pembuat Ucapan; tidak berinteraksi dengan pembuat di dalam produk.

Keberhasilan yang dapat diamati: Halaman ucapan tampil dengan namanya, isi ucapan, dan animasi yang menyenangkan.

Yang membedakan perannya: Ia adalah satu-satunya aktor yang mengalami hasil akhir; perannya murni reseptif dan tidak memiliki kontrol atas konten.

5. Core User Flows

Flow 1: Pembuat Ucapan membuat dan membagikan link

1. Mulai: Pembuat Ucapan membuka Landing di ponselnya.
2. Aksi: Ia membaca headline dan subteks yang menjelaskan bahwa ia dapat membuat website ucapan ulang tahun dengan animasi.
3. Keputusan: Ia menekan tombol CTA "Buat Ucapan".
4. Hasil: Ia diarahkan ke Greeting Editor.
5. Aksi: Di Greeting Editor, ia mengisi nama penerima.
6. Aksi: Ia menulis isi ucapan ulang tahun.
7. Keputusan: Ia memilih animasi yang akan ditampilkan pada halaman ucapan.
8. Hasil: Preview card diperbarui secara langsung menampilkan hasil susunannya.
9. Keputusan: Ia menekan tombol lanjut untuk menyelesaikan penyusunan.
10. Hasil: Karena semua field wajib terisi, ia diarahkan ke Share Link.
11. Aksi: Di Share Link, ia menyalin link yang ditampilkan pada ticket card.
12. Hasil: Link tersalin; feedback visual singkat muncul.
13. Aksi: Ia membagikan link kepada pacarnya (misalnya lewat WhatsApp).
14. Lanjutan: Ia dapat membuka preview halaman ucapan di tab baru untuk memastikan hasilnya.

Kegagalan dan pemulihan:

• Jika ia mencoba lanjut sebelum mengisi semua field wajib, tombol lanjut dinonaktifkan dan pesan inline menunjuk field yang bermasalah. Ia melengkapi field tersebut dan melanjutkan.
• Jika clipboard tidak tersedia, link tetap ditampilkan sebagai teks yang dapat ia pilih dan salin secara manual.

Flow 2: Penerima Ucapan membuka dan menikmati ucapan

1. Mulai: Penerima Ucapan menerima link dari pacarnya (misalnya lewat WhatsApp).
2. Aksi: Ia mengetuk link tersebut.
3. Hasil: Halaman Birthday Greeting dimuat, menampilkan indikator loading singkat.
4. Hasil: Ucapan ulang tahun tampil dengan namanya, isi ucapan yang disusun pembuat, dan animasi yang dipilih.
5. Hasil: Animasi berjalan — misalnya confetti burst saat halaman dimuat.
6. Lanjutan: Ia membaca ucapan dan menikmati pengalaman tersebut.

Kegagalan dan pemulihan:

• Jika link tidak valid atau ucapan tidak ditemukan, pesan yang jelas ditampilkan bahwa link tidak dapat dibuka. Ia meminta link baru kepada pembuat.
• Jika prefers-reduced-motion aktif di perangkatnya, animasi tidak berjalan dan ucapan tetap terbaca penuh.

6. Visuals Colors and Theme

Muse: Jessica Walsh — surreal candy maximalism untuk surat cinta ulang tahun.

Headline direction: "SELAMAT ULANG TAHUN, CINTA" — poster raksasa yang terasa seperti pesta permen yang langsung mendarat di layar ponsel.

Palet (light mode)

Proporsi: ~55% pink ground, ~30% cream panels, ~15% lime/tangerine/cobalt accents.

Kontras: Body copy di panel cream #FFF3E2 dengan ink #1A0B2E mencapai rasio 4.5:1. Muted #7A5C8E hanya digunakan di dalam panel cream, tidak pernah di atas pink.

Tipografi

• Headings: Unbounded, weight 700–900, tracking -0.02em. Uppercase untuk hero wordmark, mixed case untuk greeting headline.
• Body: Syne, weight 400–600, line-height 1.6.
• Skala: 1.5 modular scale.
  • Hero: clamp(48px, 14vw, 132px)
  • Section headline: clamp(32px, 7vw, 64px)
  • Card title: clamp(22px, 4vw, 34px)
  • Body: clamp(16px, 2.2vw, 19px)
  • Label: clamp(12px, 2vw, 13px), uppercase, tracking 0.14em

Shape language

• Tombol capsule dan pill dengan radius 999px.
• Blob-shaped colour fields di belakang teks.
• Kartu cream dengan outline 3px #1A0B2E.
• Hard offset shadow 8px 8px 0 #1A0B2E — bukan soft blur.
• Sticker chips dirotasi antara -6° hingga +8°.
• Confetti sebagai flat circles, stars, dan hearts.
• Dilarang: glass, blur, soft gradient blobs.

Layout

• Mobile-first single column.
• Menjadi asymmetric two-column editorial grid pada 768px dan 1280px.
• Greeting hero: full-bleed hot-pink field, headline stacked di 9 dari 12 kolom, cream sticker card di bawahnya.
• Editor: cream panel di atas pink dengan live preview card di kanan (desktop) atau di bawah (mobile).
• Share page: cream "ticket" card di tengah dengan link, copy button, dan lime CTA.
• Setiap section dipisahkan oleh full-width colour-block wipe, bukan hairline rule.

Imagery

Surreal art-directed props sebagai flat 3D-ish sticker illustrations: stroberi glossy raksasa, chrome balloon heart, melted candle, cassette, disco ball, slice of cake. Bright, staged, witty, hard outlines, tanpa photographic realism.

Dilarang: stock photos, gradient-blob heroes, generic UI mockups.

7. Signature Design Concept

Konsep: "Kartu Sticker Raksasa" — Landing dibuka sebagai poster hot-pink full-bleed yang terasa seperti halaman scrapbook yang meledak menjadi pesta.

Komposisi:

• Field #FF4D8D full-bleed memenuhi viewport.
• Headline Unbounded raksasa clamp(48px, 14vw, 132px) dalam #1A0B2E dan #FFF3E2, stacked di sembilan kolom, membungkus menjadi 2–3 baris di mobile.
• Sticker chip lime yang dirotasi membawa nama penerima, menimpa baris terakhir headline.
• Di bawahnya, cream sticker card memuat satu baris subteks dan lime pill CTA "Buat Ucapan".
• Marquee frasa sayang berbahasa Indonesia ("sayang, cinta, manis, kesayanganku") bergulir di sepanjang tepi bawah hero dalam pill cream dan lime bergantian.
• Tiga sticker props raksasa (stroberi, chrome heart, disco ball) bleed off tepi kanan dan bawah, berlapis di belakang teks.

Prinsip: Tidak ada headline terpusat + subteks + tombol biru. Tidak ada gradient blob. Ground adalah hot pink, bukan putih.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

Focal subject: Headline Unbounded raksasa "SELAMAT ULANG TAHUN, CINTA" dengan sticker chip lime berisi nama penerima yang menimpa baris terakhir, dikelilingi sticker props surreal.

Input → transformation → outcome thesis: Saat halaman dimuat, sticker chips dan props scale in dengan springy 1.08 overshoot; marquee frasa sayang mulai bergulir di tepi bawah; sticker props perlahan bob. Hasilnya adalah hero yang terasa hidup dan mengundang, bukan halaman statis.

Motion vocabulary:

• Marquee scrolling frasa sayang berbahasa Indonesia.
• Sticker chips scale in dengan springy 1.08 overshoot pada first paint.
• Slow bob pada sticker props.
• Colour flip pink → lime pada hover/tap dengan 120ms ease-out.

Composed first frame: Field hot-pink penuh, headline sudah terbaca penuh, sticker chip nama sudah di posisinya, marquee sudah bergulir, props sudah terlihat. Tidak ada elemen yang menutupi teks atau kontrol yang dapat dibaca.

Reduced-motion state: Semua animasi berhenti. Marquee berhenti dan membungkus menjadi baris-baris yang menampilkan item utuh. Sticker chips dan props tampil statis. Teks tetap terbaca penuh.

Birthday Greeting Motion Brief

Focal subject: Ucapan ulang tahun dengan nama penerima dan animasi yang dipilih.

Input → transformation → outcome thesis: Saat halaman dimuat, confetti burst 60 flat shapes (hearts, stars, circles) dalam lime, tangerine, dan cobalt jatuh sekali dan mengendap; ucapan tampil dengan sticker chips yang scale in.

Motion vocabulary:

• Confetti burst 60 flat shapes pada page load.
• Sticker chips scale in dengan springy overshoot.
• Colour flip pada hover/tap.

Reduced-motion state: Confetti tidak berjalan. Semua elemen tampil statis dan terbaca penuh.

9. Non-Functional Requirements

NFR-1: Aksesibilitas teks dan kontrol

• Provenance: explicit (creative direction)
• Constraint: Headline, wordmark, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan container-nya pada 375px, 768px, dan 1280px. Tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca.
• Rationale: Keterbacaan adalah syarat mutlak; gesture visual dibawa oleh imagery dan dekorasi, bukan dengan mengorbankan teks.

NFR-2: Preferensi reduced motion

• Provenance: explicit (creative direction)
• Constraint: Semua animasi berhenti di bawah prefers-reduced-motion. State statis tetap terbaca penuh. Marquee berhenti dan membungkus menjadi baris atau menjadi baris yang dapat di-scroll horizontal.
• Rationale: Menghormati preferensi pengguna dan memastikan konten tetap dapat diakses.

NFR-3: Mobile-first

• Provenance: explicit (creative direction)
• Constraint: Halaman harus mendarat dengan baik di layar ponsel dan dibagikan lewat WhatsApp.
• Rationale: Audiens adalah pengguna muda Indonesia yang mobile-first.

NFR-4: Kontras warna

• Provenance: explicit (creative direction)
• Constraint: Body copy di panel cream #FFF3E2 dengan ink #1A0B2E mencapai 4.5:1. Muted #7A5C8E hanya di dalam panel cream.
• Rationale: Keterbacaan di atas ground hot-pink.

NFR-5: Persistensi ucapan dan link

• Provenance: required_inference
• Constraint: Ucapan dan pilihan animasi harus tersimpan dan terikat pada link yang dihasilkan agar halaman tetap dapat dibuka oleh penerima.
• Rationale: Diperlukan agar journey yang diterima dapat dieksekusi.

10. Tech Stack

• Frontend: React (web) — custom UI untuk keempat halaman.
• Backend: Python/FastAPI — menyimpan ucapan dan pilihan animasi, menghasilkan dan melayani link.
• Storage: Penyimpanan persisten untuk entitas Greeting (nama penerima, isi ucapan, pilihan animasi) yang terikat pada link.
• Deployment: Docker/docker-compose untuk pengembangan dan deployment.
• Kubernetes: Tidak diperlukan untuk skala produk ini.

Catatan: Tidak ada pilihan teknologi yang ditentukan secara eksplisit oleh pengguna; stack di atas adalah default yang sesuai dengan kebutuhan produk.

11. Assumptions and Constraints

Asumsi:

• A-1: Pembuat Ucapan dan Penerima Ucapan adalah dua orang berbeda yang berbagi link di luar produk (misalnya lewat WhatsApp). (required_inference)
• A-2: Link yang dihasilkan bersifat publik dan dapat dibuka siapa pun yang memegangnya. (required_inference)
• A-3: Tidak ada akun atau autentikasi yang diperlukan pada halaman mana pun. (explicit — kontrak halaman)
• A-4: Animasi disiapkan sebagai pilihan yang telah disediakan, bukan editor animasi kustom. (required_inference)

Batasan:

• C-1: Keempat halaman (Landing, Greeting Editor, Share Link, Birthday Greeting) adalah kontrak halaman final dan tidak boleh ditambah, dikurangi, digabung, dipisah, diganti nama, atau diubah urutannya. (explicit — page contract version 1)
• C-2: Dua persona (Pembuat Ucapan, Penerima Ucapan) adalah katalog tertutup dan tidak boleh ditambah, dikurangi, digabung, atau diganti. (explicit — persona contract)
• C-3: Tidak ada fitur akun, login, katalog template, galeri publik, feed sosial, analitik penerima, pelacakan pembukaan, notifikasi otomatis, atau editor animasi tingkat lanjut. (explicit — pengecualian sempit)
• C-4: Palet, tipografi, shape language, layout, motion, dan imagery mengikuti creative direction secara ketat. (explicit)
• C-5: Template SaaS indigo/biru-di-atas-putih dilarang untuk proyek ini. (explicit)

12. Glossary

• Greeting: Entitas domain yang menyimpan nama penerima, isi ucapan, dan pilihan animasi; terikat pada link yang dihasilkan.
• Link: URL publik yang dihasilkan setelah penyusunan selesai dan dapat dibagikan kepada penerima.
• Pembuat Ucapan (Boyfriend): Persona yang membuat dan membagikan link.
• Penerima Ucapan (Girlfriend): Persona yang membuka link dan melihat ucapan.
• Sticker chip: Komponen visual berupa pill atau kartu cream dengan outline 3px ink, hard offset shadow 8px, dan rotasi -6° hingga +8°.
• Marquee: Baris teks yang bergulir horizontal, berisi frasa sayang berbahasa Indonesia.
• Confetti burst: Animasi 60 flat shapes (hearts, stars, circles) dalam lime, tangerine, dan cobalt yang jatuh sekali saat halaman Birthday Greeting dimuat.
• Colour flip: Interaksi di mana kartu atau tombol mengubah background dari pink ke lime dengan 120ms ease-out pada hover/tap.
• prefers-reduced-motion: Preferensi sistem pengguna yang menghentikan semua animasi dan menampilkan state statis yang tetap terbaca penuh.