System Requirements Document for penembus-link-sfl

1. Introduction

penembus-link-sfl adalah utilitas web gratis dan anonim yang berfungsi sebagai "box cutter" untuk link pendek TikTok yang buram. Pengguna menempelkan link pendek seperti https://vt.tiktok.com/ZSbCox5EQ/ — sebuah paket tertutup yang tidak mengungkap apa pun sampai redirect diselesaikan — dan situs menembusnya untuk menampilkan URL kanonik asli di baliknya (misalnya /@username/video/{id} atau /photo/).

Produk ini ditujukan untuk pengguna TikTok di Indonesia yang terbiasa berbagi konten melalui share sheet seluler (terutama iOS, di mana domain vt.tiktok.com lazim digunakan) dan ingin mengetahui ke mana sebuah link pendek sebenarnya mengarah sebelum membukanya. Register produk bersifat street-level, cepat, dan sedikit transgresif — energi "unboxing" — bukan korporat dan bukan calm-wellness. Payoff emosionalnya adalah pengungkapan: link buram menjadi URL yang dapat dibaca.

Audiens utama adalah pengguna anonim yang tidak perlu membuat akun, tidak perlu login, dan tidak perlu menyimpan riwayat apa pun untuk menyelesaikan satu tugas: tempel link, tembus, baca hasilnya.

2. System Overview

penembus-link-sfl adalah aplikasi web satu halaman yang menyelesaikan satu tugas inti: menerima link pendek TikTok dari pengguna, mengikuti redirect server-side yang dikeluarkan domain short-link TikTok, dan menampilkan URL kanonik hasilnya.

Aktor saat ini:

• Pengguna Penembus Link (persona manusia aktif, satu-satunya) — pemilik link pendek TikTok yang ingin mengungkap link asli di baliknya.
• Layanan short-link TikTok (vt.tiktok.com) — aktor non-persona eksternal yang memiliki dan menjalankan redirect HTTP (301/302). Situs tidak memiliki, tidak mengontrol, dan tidak menggantikan layanan ini.

Perilaku yang diterima saat ini:

• Menerima input berupa link pendek TikTok dari pengguna.
• Menembus link pendek tersebut untuk mengungkap link aslinya.
• Menampilkan link asli hasil penembusan.

Kepemilikan dan batas:

• Seluruh interaksi manusia terjadi pada satu halaman publik anonim bernama Landing. Tidak ada identitas aplikasi, tidak ada akun, tidak ada sesi tersimpan, dan tidak ada halaman terlindungi.
• Resolusi redirect adalah tanggung jawab layanan TikTok; situs hanya mengikuti dan membaca hasilnya.
• Situs tidak mengunduh, tidak mempratinjau, dan tidak menyimpan konten TikTok. Situs tidak menyimpulkan metadata kreator atau konten dari kode pendek itu sendiri.

Pengecualian sempit:

• Tidak ada akun, login, atau profil pengguna.
• Tidak ada unduhan video, pratinjau media, atau penyimpanan konten.
• Tidak ada riwayat penembusan yang disimpan lintas kunjungan.
• Tidak ada integrasi API TikTok resmi yang diasumsikan; resolusi bergantung pada perilaku redirect publik domain short-link.

2a. Product Interpretation and Delivery Boundary

penembus-link-sfl dikirim sebagai satu halaman web publik anonim. Pengguna tidak perlu membuat akun, tidak perlu memverifikasi identitas, dan tidak perlu kembali ke sesi sebelumnya — setiap kunjungan adalah tugas mandiri yang selesai dalam satu interaksi: tempel, tembus, baca.

Karena tidak ada keadaan yang harus dimiliki secara privat, dilanjutkan, atau diikatkan pada peserta tertentu, tidak ada identitas milik aplikasi yang diperlukan. Halaman Landing dapat diakses sepenuhnya secara anonim. Tidak ada halaman terlindungi, tidak ada gerbang masuk, dan tidak ada alur pra-identitas terpisah.

Batas saat ini: input link pendek, penembusan, dan tampilan link asli — semuanya di Landing.

Batas masa depan: tidak ada yang ditetapkan oleh sumber. Segala kemampuan di luar tiga hal di atas (riwayat, akun, unduhan, API resmi) berada di luar cakupan saat ini dan tidak boleh dibangun.

Kepemilikan eksternal: resolusi redirect dimiliki dan dijalankan oleh layanan short-link TikTok. Situs adalah konsumen dari perilaku tersebut, bukan pemiliknya.

2b. Source Content Inventory

Referensi https://vt.tiktok.com/ZSbCox5EQ/ diberikan dengan direktif domain_context dan feature_reference — bukan content_source. Karena tidak ada direktif yang secara eksplisit menyatakan content_source, bagian Source Content Inventory tidak disertakan. Fakta domain dan perilaku dari referensi tersebut digunakan sebagai konteks domain dan referensi fitur di seluruh dokumen ini, bukan sebagai inventaris konten.

2c. Page Content and Component Coverage

Landing

Halaman publik anonim tunggal yang menjelaskan fungsi situs, menerima link pendek TikTok, menjalankan penembusan, dan menampilkan link asli hasilnya.

Informasi dan keadaan:

• Identitas situs: band hazard-stripe kuning dengan label "PENEMBUS LINK SFL" dalam huruf kapital 12px.
• Headline display "TEMBUS "LINK" ASLI" dalam Archivo Black, tiga baris bertumpuk rata kiri, dengan kata "ASLI" di-reverse keluar dari blok solid safety orange.
• Penjelasan singkat fungsi situs (satu hingga dua baris) dalam Archivo Regular.
• Kolom metadata kecil huruf kapital: "DOMAIN", "STATUS", "HASIL" di atas garis rambut.
• Placeholder pada kolom tempel menampilkan contoh milik pengguna: https://vt.tiktok.com/ZSbCox5EQ/.
• Panel hasil (setelah penembusan berhasil): URL kanonik di panel readout berbingkai, plus baris metadata (kode pendek, domain, status, waktu resolusi) sebagai pasangan label/nilai dengan garis rambut.
• Keadaan kosong: panel hasil menampilkan keadaan awal tanpa URL, dengan label "HASIL" kosong dan garis rambut yang menunggu.
• Keadaan gagal: pesan kesalahan yang menyatakan link tidak dapat ditembus, dengan alasan yang dapat dibaca (link kedaluwarsa, postingan dihapus, postingan privat, atau pembatasan akses).

Aksi utama:

• Tembus — tombol solid #FF4A00 yang dipasang di bawah tepi kiri kolom tempel, berbagi margin kiri yang sama dengan headline. Memicu penembusan link pendek yang ditempelkan.
• Tempel link — kolom input berbingkai #161616 dengan border 2px #2A2A28, radius 0px, menerima link pendek TikTok.

Aksi pendukung:

• Salin — tombol salin pada panel readout URL kanonik; hover membalik tombol ke safety orange dengan pergeseran bayangan offset 1 frame.
• Tembus lagi — mengosongkan hasil dan mengembalikan fokus ke kolom tempel untuk penembusan berikutnya.

Entitas domain:

• Link pendek — URL vt.tiktok.com/{code}/ yang ditempelkan pengguna; buram, tidak mengandung metadata.
• Kode pendek — string acak dalam link pendek; ditampilkan sebagai teks industri mentah dan menjadi sumber grafis stripe barcode.
• Link asli (URL kanonik) — URL TikTok hasil redirect, misalnya /@username/video/{id} atau /photo/.
• Status resolusi — keadaan penembusan: menunggu, sedang menembus, berhasil, atau gagal.

Tanggung jawab komponen:

• Band hazard-stripe — pembatas bagian dan ticker horizontal lambat antara hero dan bagian hasil; juga membawa label identitas situs.
• Kolom tempel — menerima input link pendek, memvalidasi bahwa input adalah link pendek TikTok yang dapat ditembus, dan menampilkan placeholder contoh.
• Tombol TEMBUS — memicu penembusan; satu-satunya elemen dengan warna safety orange sebagai aksi utama.
• Panel readout hasil — menampilkan URL kanonik dengan border 2px, tanda sudut, dan tag/label berlubang yang menempel di sudut kiri atas.
• Baris metadata — pasangan label/nilai (kode pendek, domain, status, waktu resolusi) dengan garis rambut.
• Grafis stripe barcode — dihasilkan dari karakter kode pendek yang dikirimkan, dirender sebagai dekorasi terekspos yang meluber keluar tepi kontainer.
• Tombol salin — menyalin URL kanonik ke clipboard.

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

• Loading — saat penembusan berjalan, panel readout menampilkan scanline yang menyapu ke bawah satu kali; status menampilkan "MENEMBUS".
• Kosong — sebelum penembusan, panel readout kosong dengan label "HASIL" dan garis rambut; tidak ada URL yang ditampilkan.
• Sukses — URL kanonik diketik karakter demi karakter ke dalam panel readout setelah scanline selesai; baris metadata terisi (kode pendek, domain, status "BERHASIL", waktu resolusi); tombol salin aktif.
• Error — pesan kesalahan yang dapat dibaca ditampilkan di panel readout dengan alasan kegagalan; kolom tempel tetap berisi input asli sehingga pengguna dapat memperbaikinya; tombol TEMBUS tetap aktif untuk percobaan ulang.
• Pemulihan — pengguna dapat menempelkan link lain atau memperbaiki input dan menekan TEMBUS lagi; keadaan hasil sebelumnya digantikan sepenuhnya.
• prefers-reduced-motion — URL muncul seketika secara utuh tanpa pengetikan karakter demi karakter dan tanpa scanline; ticker hazard-stripe berhenti dan menampilkan item secara utuh.

3. Functional Requirements

FR-1 — Menembus link pendek TikTok menjadi link asli As a Pengguna Penembus Link, I should dapat menempelkan link pendek TikTok dan menembusnya untuk mengungkap link asli di baliknya, so that saya mengetahui URL kanonik yang sebenarnya dituju oleh link pendek tersebut.

• Provenance: explicit
• Aktor: Pengguna Penembus Link (pemrakarsa); layanan short-link TikTok (peserta eksternal yang menjalankan redirect)
• Pemicu/input: pengguna menempelkan link pendek TikTok (misalnya https://vt.tiktok.com/ZSbCox5EQ/) ke kolom tempel dan menekan tombol TEMBUS
• Hasil yang dapat diamati: URL kanonik TikTok (misalnya /@username/video/{id} atau /photo/) ditampilkan di panel readout hasil
• Keadaan akses: publik anonim; tidak ada identitas atau sesi yang diperlukan
• Kegagalan/pemulihan: jika link tidak dapat ditembus (kedaluwarsa, postingan dihapus, postingan privat, atau pembatasan akses), pesan kesalahan yang dapat dibaca ditampilkan dan pengguna dapat mencoba lagi dengan link yang sama atau berbeda
• Kelanjutan: setelah hasil ditampilkan, pengguna dapat menyalin URL kanonik atau menembus link lain
• Penerimaan: setelah menempelkan https://vt.tiktok.com/ZSbCox5EQ/ dan menekan TEMBUS, URL kanonik yang sesuai ditampilkan di panel readout.

FR-2 — Menerima input link pendek TikTok As a Pengguna Penembus Link, I should dapat memasukkan link pendek TikTok ke dalam situs, so that saya dapat memulai proses penembusan.

• Provenance: explicit
• Aktor: Pengguna Penembus Link
• Pemicu/input: pengguna menempelkan atau mengetikkan link pendek TikTok ke kolom tempel
• Hasil yang dapat diamati: link pendek diterima di kolom tempel dan siap ditembus; placeholder menampilkan contoh https://vt.tiktok.com/ZSbCox5EQ/
• Keadaan akses: publik anonim
• Kegagalan/pemulihan: jika input kosong atau bukan link pendek TikTok yang dapat ditembus, penembusan tidak dijalankan dan pengguna diberi tahu untuk memasukkan link pendek yang valid
• Kelanjutan: pengguna menekan TEMBUS untuk memulai penembusan
• Penerimaan: kolom tempel menerima link pendek TikTok dan mempertahankan nilainya sampai penembusan dijalankan.

FR-3 — Menampilkan link asli hasil penembusan As a Pengguna Penembus Link, I should melihat link asli yang ditampilkan setelah link pendek ditembus, so that saya dapat membaca dan menggunakan URL kanonik tersebut.

• Provenance: explicit
• Aktor: Pengguna Penembus Link
• Pemicu/input: penembusan link pendek berhasil diselesaikan
• Hasil yang dapat diamati: URL kanonik ditampilkan di panel readout berbingkai, disertai baris metadata (kode pendek, domain, status, waktu resolusi) sebagai pasangan label/nilai
• Keadaan akses: publik anonim
• Kegagalan/pemulihan: jika penembusan gagal, panel readout menampilkan pesan kesalahan yang dapat dibaca alih-alih URL, dan pengguna dapat mencoba lagi
• Kelanjutan: pengguna dapat menyalin URL kanonik atau menembus link lain
• Penerimaan: setelah penembusan berhasil, URL kanonik terlihat sepenuhnya di panel readout tanpa terpotong atau tertutup elemen lain.

FR-4 — Menyalin link asli hasil penembusan As a Pengguna Penembus Link, I should dapat menyalin URL kanonik yang ditampilkan, so that saya dapat menggunakannya di tempat lain.

• Provenance: required_inference
• Aktor: Pengguna Penembus Link
• Pemicu/input: pengguna menekan tombol salin pada panel readout setelah hasil ditampilkan
• Hasil yang dapat diamati: URL kanonik disalin ke clipboard; tombol salin membalik ke safety orange dengan pergeseran bayangan offset 1 frame saat hover
• Keadaan akses: publik anonim
• Kegagalan/pemulihan: jika penyalinan tidak tersedia, URL tetap terlihat utuh di panel readout sehingga pengguna dapat menyalinnya secara manual
• Kelanjutan: pengguna dapat menembus link lain
• Penerimaan: URL kanonik tersalin ke clipboard setelah tombol salin ditekan.
• Rasional inferensi: hasil penembusan adalah URL yang harus dapat digunakan pengguna di luar situs; penyalinan adalah mekanisme indispensable untuk melanjutkan hasil tersebut, bukan kemampuan terpisah.

FR-5 — Menangani link pendek yang tidak dapat ditembus As a Pengguna Penembus Link, I should mendapat penjelasan yang dapat dibaca ketika link pendek tidak dapat ditembus, so that saya memahami mengapa penembusan gagal dan dapat memutuskan langkah berikutnya.

• Provenance: required_inference
• Aktor: Pengguna Penembus Link
• Pemicu/input: penembusan dijalankan pada link yang kedaluwarsa, postingan yang dihapus, postingan privat, atau link yang terkena pembatasan akses
• Hasil yang dapat diamati: pesan kesalahan yang dapat dibaca ditampilkan di panel readout dengan alasan kegagalan; kolom tempel tetap berisi input asli
• Keadaan akses: publik anonim
• Kegagalan/pemulihan: pengguna dapat memperbaiki input atau menempelkan link lain dan menekan TEMBUS lagi; keadaan hasil sebelumnya digantikan sepenuhnya
• Kelanjutan: pengguna dapat mencoba lagi atau berhenti
• Penerimaan: ketika penembusan gagal, pesan kesalahan yang dapat dibaca terlihat dan pengguna dapat memulai percobaan baru.
• Rasional inferensi: sumber menyatakan link pendek dapat gagal diselesaikan (kedaluwarsa, dihapus, privat, pembatasan akses); tanpa keadaan kegagalan yang dapat diamati, pengguna tidak dapat menyelesaikan atau memulihkan tugas yang diterima.

4. User Personas

Pengguna Penembus Link

Konteks produk: Pengguna TikTok di Indonesia yang menerima atau memiliki link pendek TikTok — biasanya dari share sheet seluler, terutama di iOS, di mana domain vt.tiktok.com lazim digunakan. Link tersebut buram: kode pendek acak tidak mengungkap kreator, jenis konten, atau tujuan apa pun sampai redirect diselesaikan. Pengguna ingin mengetahui ke mana link itu sebenarnya mengarah sebelum membukanya, dan tidak ingin membuat akun atau meninggalkan jejak untuk melakukan itu.

Tujuan utama: Mengungkap URL kanonik asli di balik link pendek TikTok yang mereka miliki, secepat mungkin, tanpa hambatan.

Tanggung jawab yang diterima:

• Memasukkan link pendek TikTok ke dalam situs (FR-2).
• Menjalankan proses penembusan (FR-1).
• Membaca hasil link asli yang ditampilkan (FR-3).
• Menyalin URL kanonik untuk digunakan di tempat lain (FR-4).
• Menafsirkan dan memulihkan diri dari kegagalan penembusan (FR-5).

Input dan keputusan:

• Input: link pendek TikTok, misalnya https://vt.tiktok.com/ZSbCox5EQ/.
• Keputusan: apakah link yang ditempelkan valid dan layak ditembus; apakah akan menyalin hasil atau menembus link lain; bagaimana menanggapi kegagalan.

Interaksi dengan peserta lain: Pengguna adalah satu-satunya aktor manusia. Satu-satunya peserta lain adalah layanan short-link TikTok, yang menjalankan redirect server-side secara otomatis sebagai respons terhadap permintaan penembusan. Pengguna tidak berinteraksi langsung dengan layanan tersebut; mereka hanya melihat hasilnya di panel readout.

Keberhasilan yang dapat diamati: Link asli dari link pendek yang dimasukkan berhasil ditampilkan di panel readout, dapat dibaca sepenuhnya, dan dapat disalin.

Yang membedakan peran ini: Pekerjaan pengguna adalah satu tugas cepat yang bersifat sekali jalan dan anonim — bukan alur berulang dengan keadaan tersimpan, bukan tugas kolaboratif, dan bukan tugas yang memerlukan identitas. Nilainya terletak pada momen pengungkapan: paket buram dibuka dan isinya menjadi dapat dibaca.

5. Core User Flows

Alur 1 — Menembus link pendek TikTok dan membaca link asli

Konteks awal: Pengguna Penembus Link membuka Landing di peramban, tanpa akun dan tanpa sesi sebelumnya. Halaman menampilkan headline "TEMBUS "LINK" ASLI", kolom tempel dengan placeholder https://vt.tiktok.com/ZSbCox5EQ/, dan panel readout hasil yang masih kosong dengan label "HASIL".

1. Pengguna menempelkan link pendek TikTok (misalnya https://vt.tiktok.com/ZSbCox5EQ/) ke kolom tempel. Link muncul di kolom; placeholder tergantikan.
2. Pengguna menekan tombol TEMBUS yang dipasang di bawah tepi kiri kolom tempel.
3. Situs mengirimkan permintaan penembusan ke layanan short-link TikTok. Layanan tersebut — sebagai pemilik redirect — mengembalikan redirect HTTP (301/302) ke URL kanonik TikTok, misalnya /@username/video/{id} atau /photo/.
4. Selama penembusan berjalan, panel readout menampilkan scanline yang menyapu ke bawah satu kali dan status "MENEMBUS".
5. Setelah redirect diselesaikan, URL kanonik diketik karakter demi karakter ke dalam panel readout. Baris metadata terisi: kode pendek, domain, status "BERHASIL", dan waktu resolusi.
6. Hasil yang dapat diamati: URL kanonik terlihat sepenuhnya di panel readout, tidak terpotong dan tidak tertutup elemen lain. Grafis stripe barcode yang dihasilkan dari kode pendek muncul sebagai dekorasi yang meluber keluar tepi kontainer.
7. Langkah berikutnya: pengguna dapat menekan tombol salin untuk menyalin URL kanonik (lihat Alur 2), atau menempelkan link lain dan menekan TEMBUS lagi untuk memulai penembusan baru.

Jika prefers-reduced-motion aktif: URL muncul seketika secara utuh tanpa pengetikan karakter demi karakter dan tanpa scanline; ticker hazard-stripe berhenti dan menampilkan item secara utuh.

Alur 2 — Menyalin link asli hasil penembusan

Konteks awal: Pengguna Penembus Link telah menyelesaikan Alur 1 dan URL kanonik terlihat di panel readout.

1. Pengguna mengarahkan kursor ke tombol salin pada panel readout. Tombol membalik ke safety orange dengan pergeseran bayangan offset 1 frame.
2. Pengguna menekan tombol salin.
3. Hasil yang dapat diamati: URL kanonik tersalin ke clipboard.
4. Langkah berikutnya: pengguna dapat menempelkan URL kanonik di tempat lain, atau kembali ke kolom tempel untuk menembus link berikutnya.

Jika penyalinan tidak tersedia: URL tetap terlihat utuh di panel readout sehingga pengguna dapat menyalinnya secara manual.

Alur 3 — Menangani link pendek yang tidak dapat ditembus

Konteks awal: Pengguna Penembus Link telah menempelkan link pendek dan menekan TEMBUS, tetapi link tersebut kedaluwarsa, postingannya telah dihapus, postingannya privat, atau terkena pembatasan akses.

1. Situs mengirimkan permintaan penembusan ke layanan short-link TikTok.
2. Layanan short-link TikTok tidak mengembalikan redirect ke URL kanonik; sebagai gantinya, permintaan berakhir pada halaman kesalahan atau halaman terbatas.
3. Hasil yang dapat diamati: panel readout menampilkan pesan kesalahan yang dapat dibaca dengan alasan kegagalan, alih-alih URL kanonik. Kolom tempel tetap berisi input asli sehingga pengguna dapat memperbaikinya.
4. Pemulihan: pengguna dapat memperbaiki input atau menempelkan link lain dan menekan TEMBUS lagi. Keadaan hasil sebelumnya digantikan sepenuhnya oleh percobaan baru.
5. Langkah berikutnya: pengguna dapat mencoba lagi dengan link yang berbeda, atau berhenti.

6. Visuals Colors and Theme

Muse: Virgil Abloh. Headline: Remixed familiarity — an industrial label-maker for opaque links.

Register visualnya adalah street-level, cepat, dan sedikit transgresif: link pendek adalah paket tersegel, dan situs adalah box cutter. Desain harus terasa seperti memegang objek industri yang ditandai dan direkatkan, lalu merobek rekatannya.

Palet (dark mode)

Tidak ada gradien, tidak ada glass, tidak ada biru di mana pun.

Tipografi

• Headings: Archivo Black — grotesque kelas Helvetica pada bobot maksimum untuk display, selalu ALL CAPS dengan letterspacing lebar 0.08em, dan tanda kutip literal di sekitar kata benda kunci ("LINK", "ASLI", "TEMBUS") sebagai perangkat tipografis kelas satu. Ukuran display besar dengan leading ketat 0.92 sehingga headline terbaca sebagai label yang direkatkan, bukan copy marketing.
• Body: Archivo Regular/Medium dengan line-height lega untuk keterbacaan URL dan kode.
• Skala: modular 1.333 dengan lompatan 1.5 untuk display — display clamp(44px, 9vw, 104px), h2 32/48, h3 24/28, body 17/18, label 12/12 uppercase dengan tracking 0.14em, teks URL mono-ish 15/16 dengan angka tabular.

Bahasa bentuk

Geometri industri keras: radius 0px atau 2px (tidak ada kartu lembut), border solid 2px, garis grid 1px yang terekspos dan tanda sudut, band hazard-stripe sebagai pembatas bagian, bentuk tag/label (persegi panjang dengan lubang berlubang dan strap pendek) yang menempel pada kartu hasil, dan strip "tape" orange tipis yang membentang diagonal melintasi hero. Tidak ada yang membulat, tidak ada yang berbentuk pil, tidak ada bayangan lembut — kedalaman berasal dari border hitam offset 4px dan layering datar.

Tata letak

Grid industri asimetris: bidang 12 kolom dengan gutter 1.5rem, tetapi hero sengaja melanggarnya — wordmark "TEMBUS" yang oversized meluber keluar tepi kanan pada 1280px sementara kolom tempel duduk rata kiri di kolom 1–7. Di bawahnya, tata letak "spec sheet" dua kolom untuk hasil: kolom kiri = URL kanonik di panel readout berbingkai dengan tombol salin; kolom kanan = baris metadata (kode pendek, domain, status, waktu resolusi) sebagai pasangan label/nilai dengan garis rambut. Mobile runtuh menjadi satu kolom dengan wordmark diskalakan via clamp sehingga tetap sepenuhnya di dalam viewport, dan setiap pasangan label/nilai bertumpuk tanpa pemotongan.

Gaya imagery

Tidak ada foto stok, tidak ada ilustrasi. Imagery adalah antarmuka itu sendiri sebagai artefak industri: kode pendek yang ditempelkan dirender sebagai teks mentah yang terekspos, grafis stripe seperti barcode yang dihasilkan dari karakter kode pendek, tekstur concrete-noise pada opacity sangat rendah sebagai ground halaman, dan motif tag/label yang secara fisik menempel pada panel hasil. Satu detail makro kontras tinggi (tepi tape, lubang berlubang) dapat digunakan sebagai elemen dekoratif yang dipotong di hero, meluber keluar tepi, tidak pernah menutupi teks.

7. Signature Design Concept

Layar pertama adalah label industri, bukan hero SaaS. Di kolom kiri 7: band hazard-stripe kuning kecil dengan "PENEMBUS LINK SFL" dalam huruf kapital 12px, lalu baris display "TEMBUS "LINK" ASLI" dalam Archivo Black pada clamp(44px, 9vw, 104px), leading ketat 0.92, ditumpuk dalam tiga baris, dengan kata "ASLI" di-reverse keluar dari blok solid #FF4A00 yang membentang ke tepi panel. Tepat di bawahnya, rata kiri dan tidak pernah di tengah, kolom tempel berbingkai (#161616, border 2px #2A2A28, radius 0px) dengan placeholder yang menampilkan contoh milik pengguna https://vt.tiktok.com/ZSbCox5EQ/ dan tombol solid #FF4A00 "TEMBUS" yang dipasang di bawah tepi kirinya — tombol dan kolom berbagi margin kiri yang sama dengan headline.

Di kolom kanan 5: tumpukan vertikal label metadata huruf kapital kecil ("DOMAIN", "STATUS", "HASIL") di atas garis rambut, plus grafis stripe barcode dekoratif yang dihasilkan dari kode pendek contoh yang meluber keluar tepi kanan.

Wordmark "TEMBUS" yang oversized terpotong sebagian oleh tepi viewport hanya di desktop; pada 375px ia membungkus menjadi tiga baris utuh di dalam viewport tanpa pemotongan.

Signature moves:

• Headline Archivo Black oversized "TEMBUS "LINK" ASLI" bertumpuk rata kiri dengan kata ASLI di-reverse keluar dari blok safety orange solid, dengan tanda kutip literal sebagai bagian dari bahasa visual.
• Band hazard-stripe caution digunakan sebagai pembatas bagian dan sebagai ticker horizontal lambat antara hero dan bagian hasil.
• Panel hasil dibangun sebagai artefak industri yang ditandai: tag/label berlubang dengan strap pendek yang menempel di sudut kiri atas readout, plus tanda sudut dan border offset 2px alih-alih bayangan.
• Grafis stripe barcode yang dihasilkan dari karakter kode pendek yang dikirimkan, dirender sebagai dekorasi terekspos yang meluber keluar tepi kontainer.
• URL hasil diketik karakter demi karakter dengan satu sapuan scanline, dan tombol salin membalik ke safety orange dengan pergeseran bayangan keras 1 frame saat hover.

Yang dihindari: aksen biru/indigo atau hero gradient-blob; tombol pil membulat, bayangan lembut, glassmorphism atau panel frosted; simetri headline tengah + subteks + tombol; Inter, Roboto, Poppins, atau system-ui sebagai font heading atau body; fotografi stok orang atau perangkat, atau mockup perangkat 3D; easing bouncy playful, partikel, atau animasi float; grid kartu identik dengan hover-lift; memotong atau menutupi URL, label, kode, atau kontrol yang dapat dibaca — dekorasi boleh meluber, teks tidak pernah.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction) Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

Focal subject: Antarmuka itu sendiri sebagai artefak industri — kolom tempel berbingkai dengan placeholder link pendek contoh, tombol TEMBUS solid safety orange, dan band hazard-stripe kuning yang membawa label identitas situs.

Tesis input → transformasi → hasil: Pengguna menempelkan link pendek TikTok yang buram ke kolom tempel → menekan TEMBUS, memicu scanline yang menyapu ke bawah panel readout satu kali → URL kanonik diketik karakter demi karakter ke dalam panel readout, mengubah paket tersegel menjadi URL yang dapat dibaca.

Vocabulary gerak: Perubahan keadaan snappy dan mekanis, 120–180ms linear/ease-out saja. Band hazard-stripe bergulir sebagai ticker lambat. Scanline menyapu panel readout satu kali saat submit. URL diketik karakter demi karakter. Hover pada tombol salin membalik ke safety orange dengan pergeseran bayangan offset 1 frame. Tidak ada bounce, tidak ada float, tidak ada partikel.

Frame pertama yang tersusun: Kolom kiri 7 menampilkan band hazard-stripe kuning dengan "PENEMBUS LINK SFL", headline "TEMBUS "LINK" ASLI" dalam Archivo Black tiga baris dengan "ASLI" di-reverse keluar dari blok safety orange, kolom tempel berbingkai dengan placeholder https://vt.tiktok.com/ZSbCox5EQ/, dan tombol TEMBUS solid safety orange di bawah tepi kiri kolom. Kolom kanan 5 menampilkan label metadata huruf kapital kecil di atas garis rambut dan grafis stripe barcode yang meluber keluar tepi kanan. Panel readout hasil di bawah masih kosong dengan label "HASIL".

Keadaan reduced-motion: URL muncul seketika secara utuh tanpa pengetikan karakter demi karakter dan tanpa scanline; ticker hazard-stripe berhenti dan menampilkan item secara utuh; semua perubahan keadaan tetap terjadi tanpa animasi.

9. Non-Functional Requirements

NFR-1 — Akses publik anonim Situs harus dapat digunakan sepenuhnya tanpa akun, login, atau identitas apa pun. Tidak ada halaman terlindungi dan tidak ada gerbang masuk. Provenance: required_inference — tidak ada keadaan yang harus dimiliki secara privat atau dilanjutkan, sehingga identitas aplikasi tidak diperlukan. Rasional: tugas selesai dalam satu interaksi dan tidak menghasilkan hubungan, komitmen, atau nilai yang harus diikatkan pada peserta tertentu.

NFR-2 — Ketergantungan pada layanan short-link TikTok Resolusi link pendek bergantung pada perilaku redirect publik domain vt.tiktok.com yang dimiliki dan dijalankan oleh TikTok. Situs tidak memiliki, tidak mengontrol, dan tidak menggantikan layanan tersebut. Provenance: explicit (dari konteks domain referensi) Rasional: redirect terjadi server-side via HTTP 301/302; situs adalah konsumen dari perilaku tersebut.

NFR-3 — Tidak ada penyimpanan konten atau metadata Situs tidak boleh mengunduh, mempratinjau, atau menyimpan konten TikTok, dan tidak boleh menyimpulkan metadata kreator atau konten dari kode pendek itu sendiri. Provenance: explicit (dari batasan referensi fitur) Rasional: link pendek tidak mengandung metadata dan tidak dapat diuraikan sampai diperluas; konten tidak dapat diunduh atau dipratinjau sampai redirect diikuti.

NFR-4 — Keterbacaan teks dan kontrol di semua 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 boleh menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca. Provenance: explicit (dari batasan kreatif) Rasional: URL, kode, dan label adalah inti produk; memotongnya akan menghilangkan nilai.

NFR-5 — Dukungan prefers-reduced-motion Ketika prefers-reduced-motion aktif, URL hasil harus muncul seketika secara utuh tanpa pengetikan karakter demi karakter dan tanpa scanline; ticker hazard-stripe harus berhenti dan menampilkan item secara utuh. Provenance: explicit (dari batasan kreatif) Rasional: aksesibilitas gerak tanpa mengorbankan penyampaian hasil.

NFR-6 — Tidak ada gradien, glass, atau biru Palet harus tetap pada ground industri gelap tanpa gradien, tanpa glassmorphism, dan tanpa aksen biru/indigo di mana pun. Provenance: explicit (dari batasan kreatif) Rasional: template SaaS indigo/biru-putih dilarang untuk proyek ini.

10. Tech Stack

• Frontend: React — antarmuka satu halaman untuk Landing, dengan komponen kolom tempel, tombol TEMBUS, panel readout hasil, baris metadata, dan tombol salin.
• Backend: Python/FastAPI — menangani permintaan penembusan, mengikuti redirect server-side dari layanan short-link TikTok, dan mengembalikan URL kanonik serta status resolusi ke frontend.
• Storage: tidak ada penyimpanan persisten yang diperlukan — tidak ada riwayat, tidak ada akun, tidak ada konten yang disimpan. Keadaan hasil hanya hidup selama satu interaksi di peramban.
• Docker/docker-compose: untuk menjalankan frontend dan backend secara lokal dan konsisten.
• Kubernetes: tidak diperlukan — tidak ada kebutuhan deployment yang dinyatakan oleh sumber.

Catatan: pilihan teknologi di atas adalah default yang wajar untuk aplikasi web satu halaman dengan backend ringan; sumber tidak menetapkan teknologi tertentu.

11. Assumptions and Constraints

Asumsi:

• A-1 — Pengguna memiliki akses ke peramban web dan dapat menempelkan link pendek TikTok ke kolom tempel. (Asumsi sempit; tidak menambahkan kemampuan.)
• A-2 — Layanan short-link TikTok terus mengeluarkan redirect HTTP publik untuk link pendek yang valid. (Berdasarkan konteks domain referensi; jika perilaku ini berubah, penembusan dapat gagal dan FR-5 berlaku.)
• A-3 — Link pendek yang ditempelkan pengguna adalah link pendek TikTok yang valid dan dapat ditembus. (Jika tidak, FR-5 berlaku.)
• A-4 — Situs diakses dalam satu kunjungan tanpa kebutuhan untuk melanjutkan keadaan sebelumnya. (Konsisten dengan NFR-1.)

Batasan:

• C-1 — Tidak ada akun, login, profil, atau identitas aplikasi. (NFR-1)
• C-2 — Tidak ada unduhan video, pratinjau media, atau penyimpanan konten TikTok. (NFR-3)
• C-3 — Tidak ada riwayat penembusan yang disimpan lintas kunjungan. (NFR-3)
• C-4 — Tidak ada integrasi API TikTok resmi yang diasumsikan; resolusi bergantung pada perilaku redirect publik domain short-link. (NFR-2)
• C-5 — Palet, tipografi, bahasa bentuk, tata letak, dan gerak mengikuti Creative Direction tanpa penyimpangan: tanpa gradien, tanpa glass, tanpa biru, tanpa radius membulat, tanpa bayangan lembut. (NFR-6)
• C-6 — Teks dan kontrol yang dapat dibaca tidak boleh dipotong, diklip, ditutupi, atau meluber keluar tepi; dekorasi boleh meluber. (NFR-4)

Di luar cakupan saat ini: akun pengguna, riwayat penembusan, unduhan video, pratinjau media, integrasi API resmi, dan segala kemampuan lain yang tidak secara eksplisit diterima oleh sumber.

12. Glossary

• Link pendek TikTok — URL ringkas pada domain vt.tiktok.com (atau vm.tiktok.com di Android) yang berisi kode acak dan mengarah ke URL kanonik TikTok melalui redirect HTTP. Buram: tidak mengungkap kreator atau konten sampai diselesaikan.
• Kode pendek — String acak dalam link pendek (misalnya ZSbCox5EQ dalam https://vt.tiktok.com/ZSbCox5EQ/). Tidak mengandung metadata; menjadi sumber grafis stripe barcode.
• Link asli / URL kanonik — URL TikTok lengkap hasil redirect, misalnya /@username/video/{id} atau /photo/.
• Penembusan — Proses mengikuti redirect server-side dari link pendek untuk mengungkap URL kanonik di baliknya.
• Redirect server-side — Respons HTTP (301/302) yang dikeluarkan layanan short-link TikTok yang mengarahkan permintaan ke URL kanonik.
• Panel readout — Panel berbingkai pada Landing yang menampilkan URL kanonik hasil penembusan beserta baris metadata.
• Hazard-stripe band — Band caution kuning yang digunakan sebagai pembatas bagian dan ticker horizontal lambat.
• Tag/label — Motif industri berupa persegi panjang dengan lubang berlubang dan strap pendek yang menempel pada panel readout.
• prefers-reduced-motion — Preferensi sistem pengguna yang mengurangi atau menghilangkan animasi; ketika aktif, URL muncul seketika dan ticker berhenti.