System Requirements Document for wilz-down

1. Introduction

wilz-down is an Android application (APK) that reproduces the web tool at https://wilz-down.vercel.app as closely as possible — the user's stated fidelity target is "mirip 100%" (100% similar). The referenced site is a media downloader utility branded Dropr whose promise is: "Tempel tautan, pilih kualitas, unduh." — paste a link, choose a quality, download. It handles video, music, and photos from 23 services, with no account and no additional app required.

The product intent is therefore narrow and concrete: give everyday Indonesian mobile users the same single-moment workflow the website offers — paste a media link, have the platform recognized automatically, fetch the media, choose a quality, and download it — packaged as an installable Android app rather than a browser page. The audience is the same audience the site serves: casual mobile users who want speed and zero friction, with no sign-up, no onboarding, and no account state.

This document treats the referenced site as an authoritative content, structure, feature, and visual source. Its textual content, section order, interactive flows, and observable layout patterns are preserved item by item. Where the site's styling could not be verified from the captured snapshot, the supplied creative direction fills the visual layer, and those fills are labeled as such.

2. System Overview

wilz-down is a single-purpose, single-column Android utility app. It opens directly onto its working surface — there is no login wall, no dashboard, and no account. The app's current behavior consists of:

• A prominent headline and short description establishing what the tool does.
• A media-link input with a label, a placeholder, and two actions: Tempel (paste) and Ambil (fetch).
• Automatic platform recognition from the pasted link, surfaced as a visible detected-platform badge.
• A fetch-and-choose-quality step that leads to a download.
• A collapsible Detail teknis section.
• A Platform yang didukung section listing the 23 supported services.
• A Terakhir dibuka section showing recently opened links, with a Hapus riwayat action.
• A footer carrying the usage/copyright note and the attribution line.

Actors. The only active human actor is the Site Visitor — a person who opens the app and uses the same content and features the website offers. There is no second human role, no administrator, and no operator. The external media services (TikTok, Instagram, YouTube, and the other supported platforms) and the underlying fetch tooling are non-persona external actors: they are addressed by the app, they are not users of it.

Access. The referenced site states plainly: "Tanpa akun, tanpa aplikasi tambahan" — no account, no additional app. The app therefore has no application-owned identity, no sign-in, no session continuity, and no protected destinations. Every surface is anonymously reachable. This is a hard, source-backed access fact, not a default.

Ownership. All accepted human-facing behavior is owned by the app's own first-party surfaces. The media retrieval itself is performed by external tooling on the user's behalf; the app owns the interaction, the visible state, and the result.

Exclusions. The app does not add accounts, profiles, cloud sync, social features, subscriptions, analytics dashboards, or any capability the referenced site does not present. It does not become a general-purpose browser or file manager. It does not claim ownership of third-party media or grant rights the user does not have — the site's own usage note governs.

2a. Product Interpretation and Delivery Boundary

Delivery. The deliverable is an Android APK. The user asked for the website to be turned into an APK that is as close to 100% similar as possible. That means the app is a native-packaged reproduction of the site's content, structure, features, and visual design — not a redesign, not a reimagining, and not a subset. The app is installed and launched like any Android app; it does not require the user to visit the website in a browser.

Access ownership. The referenced site is explicitly account-free. The app inherits that: there is no first-use identity establishment, no returning verification, no invitation or provisioning flow, and no protected state. Nothing in the accepted behavior requires the app to know who the user is, because nothing in the accepted behavior is bound to a durable per-person entitlement, commitment, or value transfer. The only durable state is a local list of recently opened links, which belongs to the device rather than to an identity.

Current vs. future. Everything described in this document is current. No future-horizon requirements were stated by the user, and none are invented here. The fidelity constraint ("mirip 100%") applies to the current site as observed; if the site changes, that is a future concern outside this document.

External responsibility. Fetching media from a third-party platform is performed by external tooling. The app owns the request, the visible progress, the quality choices presented, and the download outcome; it does not own the third-party platform's availability, terms, or content. The site's own attribution line and usage note are preserved as content.

2b. Source Content Inventory

The referenced site is an authoritative content source. The following verified content items are preserved exactly and must appear in the app.

Branding and headline

Input area

Section headings and controls

Footer content

Supported platform count. The site states 23 services. The platform row must present 23 platform entries; the specific roster beyond the named examples (TikTok, Instagram, YouTube, Twitter/X, Facebook) is drawn from the site's own supported-platform list at build time and must total 23.

Media types. Video, musik, dan foto (video, music, and photos).

2c. Page Content and Component Coverage

The app has exactly two pages: Landing and Features. Both are anonymously reachable.

Landing

The Landing page is the app's entry surface and its primary working surface. It carries the full vertical flow of the referenced site.

Information and state

• Service branding: Dropr.
• Headline: "Tempel tautan, pilih kualitas, unduh."
• Description: "Video, musik, dan foto dari 23 layanan. Tanpa akun, tanpa aplikasi tambahan."
• Current input value (empty on first open).
• Detected-platform state: none / detected (with platform name and icon).
• Fetch state: idle / fetching / result-ready / failed.
• Quality-selection state: not shown / shown with available options.
• Recently-opened list state: populated / empty.
• Technical-details state: collapsed (default) / expanded.

Primary actions

• Tempel — reads the clipboard and places the media link into the input.
• Ambil — submits the link for fetching.
• Download — after a quality is chosen, retrieves the media.
• Hapus riwayat — clears the recently-opened list.

Supporting actions

• Editing the link directly in the input field.
• Expanding/collapsing Detail teknis.
• Dragging/scrolling the Platform yang didukung row.
• Re-opening an entry from Terakhir dibuka.

Domain entities

• Media link (URL string).
• Detected platform (name, icon, detected status).
• Media result (title/thumbnail where available, media type, available qualities).
• Quality option (label, e.g. resolution or bitrate).
• Recent entry (link, platform, timestamp of last open).
• Supported platform (name, icon).

Component responsibilities

• Hero headline — full-width kinetic type, the dominant element, sitting directly on the warm paper ground with no card container.
• Media link input — single wide rectangle, label Tautan media above it, placeholder inside, ink border that shifts to orange on focus.
• Tempel button — secondary action, white fill with ink border.
• Ambil button — primary action, orange fill with white text.
• Platform-detected badge — pill with platform icon and name, appears inline below the input when a valid link is recognized.
• Auto-detect note — "Platform dikenali otomatis dari tautan."
• Detail teknis — collapsible section with a monospace summary line and a rotating +/× affordance.
• Platform yang didukung — horizontal draggable row of 23 pill badges, each with a monochrome icon.
• Terakhir dibuka — simple list of recent links with the Hapus riwayat button.
• Footer — usage note and attribution line.

States

• Loading: while fetching, the Ambil action shows an in-progress state and the result area is not yet populated.
• Empty: the input is empty and no platform badge is shown; Terakhir dibuka shows an empty state when no links have been opened.
• Success: the detected-platform badge is visible; after fetching, quality options are presented and a download can be started; the link is added to Terakhir dibuka.
• Error: if the link is not recognized or the fetch fails, a clear inline message is shown and the input remains editable so the user can correct or retry.
• Recovery: the user can edit the link, paste again, or retry Ambil without losing the rest of the page state.

Features

The Features page owns the referenced site's available features and functions as a browsable surface for the Site Visitor.

Information and state

• The set of functions the tool offers, described in the site's own terms.
• The supported-platform roster (23 services) with icons.
• The media types handled: video, musik, dan foto.
• The account-free, no-extra-app positioning.

Primary actions

• Navigating back to Landing to use the tool.
• Browsing the feature and platform information.

Supporting actions

• Scrolling the page.
• Following the attribution link to the source site.

Domain entities

• Feature entry (name, description).
• Supported platform (name, icon).
• Media type (video / musik / foto).

Component responsibilities

• Feature list — the tool's functions presented as discrete entries.
• Platform roster — the 23 supported services with monochrome icons.
• Media-type summary — video, musik, dan foto.
• Attribution / source link — points to https://wilz-down.vercel.app.

States

• Loading: static content; no network dependency for the page itself.
• Empty: not applicable — the feature set is fixed content.
• Success: content renders fully and the back-to-Landing path is available.
• Error: if the attribution link cannot be opened, the page remains usable and the failure is non-blocking.
• Recovery: the user returns to Landing and continues working.

3. Functional Requirements

Each requirement is a distinct story point with provenance, lifecycle facts, and observable acceptance.

FR-1 — Open the app to the working surface As a Site Visitor, I should land directly on the tool's working surface when I open the app, so that I can start immediately without any gate.

• Provenance: explicit (site is account-free; "Tanpa akun, tanpa aplikasi tambahan").
• Trigger: app launch.
• Observable result: the Landing page renders with the Dropr branding, the headline, the description, the input, and both buttons.
• Access state: anonymous; no sign-in, no onboarding.
• Failure/recovery: not applicable — no network or identity dependency for first render.
• Continuation: the user can paste or type a link.

FR-2 — See the product's promise As a Site Visitor, I should see the headline and description, so that I understand what the tool does before I use it.

• Provenance: explicit (content source).
• Trigger: Landing page render.
• Observable result: headline "Tempel tautan, pilih kualitas, unduh." and description "Video, musik, dan foto dari 23 layanan. Tanpa akun, tanpa aplikasi tambahan." are visible.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the user proceeds to the input.

FR-3 — Paste a media link As a Site Visitor, I should press Tempel to place a copied media link into the input, so that I do not have to type a long URL.

• Provenance: explicit (feature reference: Tempel action).
• Trigger: tapping Tempel.
• Observable result: the clipboard's link appears in the Tautan media input.
• Access state: anonymous.
• Failure/recovery: if the clipboard is empty or contains no usable link, the input is left unchanged and the user can type or paste manually.
• Continuation: the user presses Ambil or edits the link.

FR-4 — Type or edit the link directly As a Site Visitor, I should be able to type or edit the link in the input field, so that I can correct or enter a link myself.

• Provenance: explicit (input field with label and placeholder).
• Trigger: focusing the input and entering text.
• Observable result: the input holds the entered value; the label Tautan media and placeholder https://www.tiktok.com/@akun/video/… are present.
• Access state: anonymous.
• Failure/recovery: invalid text is simply not recognized as a platform; the user can keep editing.
• Continuation: the user presses Ambil.

FR-5 — Automatic platform recognition As a Site Visitor, I should have the platform recognized automatically from the link, so that I do not have to tell the app which service the link belongs to.

• Provenance: explicit (feature reference: "Platform dikenali otomatis dari tautan.").
• Trigger: a valid media link present in the input.
• Observable result: a pill-shaped badge with the detected platform's icon and name appears inline below the input; the detected platform's icon fills to the accent colour.
• Access state: anonymous.
• Failure/recovery: if the link is not recognized, no badge appears and the user can correct the link.
• Continuation: the user presses Ambil.

FR-6 — Fetch the media As a Site Visitor, I should press Ambil to fetch the media behind the link, so that I can see what is available to download.

• Provenance: explicit (feature reference: download flow — "User pastes link, press Ambil to fetch media and choose quality, then download.").
• Trigger: tapping Ambil with a link in the input.
• Observable result: a fetching state is shown, then the media result is presented with its available qualities.
• Access state: anonymous.
• Failure/recovery: if the fetch fails, a clear inline error is shown and the input remains editable so the user can retry.
• Continuation: the user chooses a quality.

FR-7 — Choose a quality As a Site Visitor, I should choose from the available qualities, so that I get the version of the media I want.

• Provenance: explicit (headline: "pilih kualitas"; download flow).
• Trigger: a successful fetch presenting quality options.
• Observable result: the available quality options are listed and the chosen one is marked as selected.
• Access state: anonymous.
• Failure/recovery: if no qualities are available, the user is told and can try another link.
• Continuation: the user starts the download.

FR-8 — Download the media As a Site Visitor, I should download the media at the quality I chose, so that I have the file on my device.

• Provenance: explicit (headline: "unduh"; download flow).
• Trigger: confirming a quality.
• Observable result: the download proceeds with visible progress and completes to a saved file on the device.
• Access state: anonymous.
• Failure/recovery: if the download fails or is interrupted, the user is told and can retry the download without re-pasting the link.
• Continuation: the link is recorded in Terakhir dibuka.

FR-9 — See recently opened links As a Site Visitor, I should see the links I recently opened, so that I can return to one without pasting it again.

• Provenance: explicit (content source: "## Terakhir dibuka"; feature reference: recent links shown).
• Trigger: Landing page render after at least one link has been used.
• Observable result: the Terakhir dibuka section lists recent links with their platform.
• Access state: anonymous; the list is device-local.
• Failure/recovery: if the list is empty, an empty state is shown instead.
• Continuation: the user can re-open an entry or clear the list.

FR-10 — Re-open a recent link As a Site Visitor, I should tap a recent entry to reuse it, so that I can fetch it again quickly.

• Provenance: required_inference (the Terakhir dibuka list is only useful if its entries can be acted on; the site presents them as opened links).
• Trigger: tapping an entry in Terakhir dibuka.
• Observable result: the link is placed into the input and the platform is recognized, ready for Ambil.
• Access state: anonymous.
• Failure/recovery: if the entry is no longer valid, the fetch fails with the standard error and the user can paste a fresh link.
• Continuation: the user presses Ambil.

FR-11 — Clear the history As a Site Visitor, I should press Hapus riwayat to clear the recently opened list, so that I can remove links I no longer want stored.

• Provenance: explicit (content source: "Hapus riwayat" action).
• Trigger: tapping Hapus riwayat.
• Observable result: the Terakhir dibuka list is emptied and shows its empty state.
• Access state: anonymous.
• Failure/recovery: not applicable — the action is local.
• Continuation: the user continues using the tool.

FR-12 — Read the technical details As a Site Visitor, I should expand Detail teknis to read the technical information, so that I can understand how the tool works.

• Provenance: explicit (content source: "Detail teknis" link; structure reference: technical details section).
• Trigger: tapping the Detail teknis affordance.
• Observable result: the section expands from its collapsed default and shows its technical content; the affordance rotates from + to ×.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the user collapses it again or continues using the tool.

FR-13 — Browse the supported platforms As a Site Visitor, I should see the 23 supported platforms, so that I know whether my link's service is covered.

• Provenance: explicit (content source: "## Platform yang didukung"; description: "23 layanan").
• Trigger: Landing page render.
• Observable result: a horizontal row of 23 pill badges, each with a monochrome platform icon, is present and can be dragged/scrolled.
• Access state: anonymous.
• Failure/recovery: not applicable — the roster is static content.
• Continuation: the user returns to the input.

FR-14 — Read the usage and copyright note As a Site Visitor, I should see the usage note, so that I understand the permitted use of the tool.

• Provenance: explicit (content source: usage note).
• Trigger: Landing page render.
• Observable result: the note "Gunakan untuk konten milikmu atau yang diizinkan pemiliknya. Hormati hak cipta dan aturan tiap platform." is visible in the footer.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: not applicable.

FR-15 — See the attribution As a Site Visitor, I should see the attribution line, so that the tool's source is credited.

• Provenance: explicit (content source: "Ditenagai (wilz-down.vercel.app)").
• Trigger: Landing page render.
• Observable result: the attribution line is visible in the footer and links to https://wilz-down.vercel.app.
• Access state: anonymous.
• Failure/recovery: if the link cannot be opened, the page remains usable.
• Continuation: not applicable.

FR-16 — Browse the app's features As a Site Visitor, I should be able to view the app's available features and functions, so that I can understand the full scope of what the tool offers.

• Provenance: explicit (planning scope: Features page owns the referenced site's available features and functions).
• Trigger: navigating to the Features page.
• Observable result: the feature set, the 23-platform roster, and the media types (video, musik, dan foto) are presented.
• Access state: anonymous.
• Failure/recovery: if the attribution link cannot be opened, the page remains usable.
• Continuation: the user returns to Landing to use the tool.

FR-17 — Move between Landing and Features As a Site Visitor, I should be able to move between the Landing and Features pages, so that I can switch between using the tool and reading about it.

• Provenance: explicit (planning scope: two pages, both anonymously reachable).
• Trigger: navigating between the two pages.
• Observable result: the destination page renders and the previous page's state is preserved where it is device-local.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the user continues on the destination page.

4. User Personas

Site Visitor

Product context. The Site Visitor is someone who has a media link — from TikTok, Instagram, YouTube, or one of the other supported services — and wants the file on their phone. They are on a mobile device, they are in a hurry, and they have no interest in creating an account or learning a workflow. The referenced site addresses them directly: "Tanpa akun, tanpa aplikasi tambahan." The app is the same promise in installable form.

Primary goal. Turn a copied link into a downloaded file in as few steps as possible: paste, fetch, choose a quality, download.

Distinct accepted responsibilities. The Site Visitor is the only active human actor, and their responsibilities are the whole of the app's human-facing behavior:

• Bringing a link into the app, either by pasting from the clipboard or by typing/editing it.
• Confirming the fetch by pressing Ambil.
• Choosing among the qualities the fetch returns.
• Completing the download.
• Managing their own local history: reviewing Terakhir dibuka, re-opening an entry, or clearing it with Hapus riwayat.
• Reading the supporting content: Detail teknis, Platform yang didukung, the usage note, and the attribution.
• Browsing the Features page to understand the tool's scope.

Relevant inputs and decisions. The link itself is the primary input. The decisions are: which link to use, whether to paste or type it, which quality to pick, and whether to keep or clear the history. There is no identity decision, no permission decision, and no configuration decision — the app has none of those.

Interactions with other accepted participants. There are no other accepted human participants. The Site Visitor interacts with external media services only indirectly: the app fetches on their behalf, and the platform's identity is surfaced back to them as a detected-platform badge. The Site Visitor never negotiates with the platform directly inside the app.

Observable success. The media file is on the device at the chosen quality, the link appears in Terakhir dibuka, and the whole interaction took a handful of taps. A secondary success is that the app looks and behaves like the site they came from — the same headline, the same two buttons, the same sections in the same order.

What makes this role distinct. There is no second role to contrast against, and that is the point: the app is deliberately single-role. The Site Visitor's work is a single linear moment — paste, fetch, choose, download — with no handoff, no approval, no counterparty, and no state that outlives the device. Any design decision that introduces a second role, a gate, or a durable account would contradict the source.

5. Core User Flows

Flow 1 — Paste a link and download the media

1. The Site Visitor opens the app. The Landing page renders with the Dropr branding, the headline "Tempel tautan, pilih kualitas, unduh.", the description, the Tautan media input, and the Tempel and Ambil buttons. No sign-in is requested.
2. The Site Visitor taps Tempel. The link on their clipboard appears in the input.
3. The app recognizes the platform from the link. A pill-shaped badge with the platform's icon and name slides in below the input, and the icon pulses once. The note "Platform dikenali otomatis dari tautan." is visible.
4. The Site Visitor taps Ambil. The app shows a fetching state.
5. The fetch succeeds. The media result is presented with its available qualities.
6. The Site Visitor selects a quality.
7. The Site Visitor starts the download. Progress is visible, and the file is saved to the device.
8. The link is recorded in Terakhir dibuka.
9. Continuation: the Site Visitor can paste another link, re-open the entry from Terakhir dibuka, or leave the app.

Failure and recovery. If the link is not recognized, no badge appears and the input stays editable. If the fetch fails, an inline error is shown and the Site Visitor can edit the link or press Ambil again without losing the page state. If the download fails or is interrupted, the Site Visitor is told and can retry the download without re-pasting the link.

Flow 2 — Type or correct a link manually

1. The Site Visitor opens the app and focuses the Tautan media input.
2. They type or paste the link directly. The label and placeholder are visible throughout.
3. The app recognizes the platform and shows the detected-platform badge.
4. The Site Visitor taps Ambil and continues as in Flow 1 from step 4.

Failure and recovery. If the typed link is malformed, no badge appears; the Site Visitor keeps editing until it is recognized or replaces it.

Flow 3 — Re-open a recent link

1. The Site Visitor opens the app. The Terakhir dibuka section lists links they have used before, each with its platform.
2. The Site Visitor taps an entry.
3. The link is placed into the input and the platform is recognized.
4. The Site Visitor taps Ambil and continues as in Flow 1 from step 4.

Failure and recovery. If the entry is no longer valid, the fetch fails with the standard inline error and the Site Visitor can paste a fresh link.

Flow 4 — Clear the history

1. The Site Visitor opens the app and scrolls to Terakhir dibuka.
2. The Site Visitor taps Hapus riwayat.
3. The list is emptied and shows its empty state.
4. Continuation: the Site Visitor continues using the tool; the input and any in-progress result are unaffected.

Flow 5 — Read the technical details

1. The Site Visitor opens the app and finds the Detail teknis section, collapsed by default with a single monospace summary line and a + affordance.
2. The Site Visitor taps it. The content slides down and the + rotates to ×.
3. The Site Visitor reads the technical information.
4. The Site Visitor taps again to collapse it, or continues using the tool.

Flow 6 — Check whether a platform is supported

1. The Site Visitor opens the app and scrolls to Platform yang didukung.
2. The Site Visitor drags the horizontal row of 23 pill badges, each with a monochrome platform icon, until they find the service they care about.
3. Continuation: the Site Visitor returns to the input and pastes their link.

Flow 7 — Browse the app's features

1. The Site Visitor navigates from Landing to Features.
2. The Features page presents the tool's functions, the 23-platform roster, and the media types it handles — video, musik, dan foto.
3. The Site Visitor reads the content and can follow the attribution link to https://wilz-down.vercel.app.
4. Continuation: the Site Visitor navigates back to Landing and uses the tool.

Failure and recovery. If the attribution link cannot be opened, the page remains usable and the Site Visitor returns to Landing.

6. Visuals, Colors, and Theme

The creative direction is authoritative for this section. It names Yugo Nakamura as the muse and takes interaction as delight as its headline idea: the download tool that responds to every cursor move. The register is playful, instant, and slightly magical — a consumer tool with personality, not an enterprise utility. The palette is bright flat colour on a stark warm ground so that motion reads clearly.

Colour tokens — light mode (the only mode; dark mode is not the default and is not specified)

No blue or indigo appears anywhere. #0057FF, #2563EB, #4F46E5, and every blue-adjacent hue are excluded. The generic indigo/blue-on-white SaaS template is forbidden for this project.

Typography

• Headings: Space Grotesk. The headline uses weight 700, set large and tight with letter-spacing: -0.03em. Section headings (## Platform yang didukung, ## Terakhir dibuka) use Space Grotesk 500 at 20px with a 2px orange underline that animates in from the left on scroll.
• Body: DM Sans 400 at 16px with 1.6 line-height.
• Labels and buttons: DM Sans 600 at 14px with 0.02em tracking.
• Monospace summary line in Detail teknis: Space Grotesk 400 at 14px.
• Type scale — 1.333 modular: headline 56px (mobile) / 72px (tablet) / 96px (desktop); section headings 32 / 28 / 24; body 18 / 16 / 16; labels and buttons 14 / 14 / 14. All display type uses clamp() with the mobile size as the floor.
• Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are excluded for headings and body.

Shape language

• Sharp corners on the input field and buttons: border-radius: 4px.
• The hero's kinetic headline sits on a full-bleed warm paper ground with no card container — it floats directly on the background.
• Platform badges are pill-shaped (border-radius: 999px) with a 1px ink border and a filled dot indicating detected status.
• The input field is a single wide rectangle with a 2px ink border that thickens to 3px and shifts to orange on focus.
• No drop shadows anywhere. Depth comes from motion and colour, not from elevation.

Layout

• Single-column vertical flow at all breakpoints, max-width 720px centred, with 24px side margins on mobile and 48px on desktop.
• The hero headline spans the full viewport width, breaking out of the 720px column, and sits above the input.
• The input and the two buttons (Tempel, Ambil) sit in a horizontal row on desktop and stack vertically on mobile (Tempel full-width, Ambil full-width below).
• Below the input, the live platform-detected badge appears inline.
• Sections stack: Detail teknis (collapsible), Platform yang didukung (horizontal draggable row of 23 badges), Terakhir dibuka (list with Hapus riwayat), and the footer note.
• Vertical rhythm: 64px between major sections on desktop, 40px on mobile.

Imagery

• No photography, no 3D renders, no stock people.
• The visual language is procedural and typographic: the kinetic headline is the hero image.
• Platform icons are simple monochrome SVG glyphs (TikTok, Instagram, YouTube, Twitter/X, Facebook, and the rest of the 23) rendered at 24px in ink, with the detected platform's icon filling to orange.
• A subtle generative pattern of thin diagonal lines (1px, 8px apart, 10% opacity) sits behind the hero headline as texture, animating slowly on a 4s loop by shifting 4px horizontally.
• No gradient blobs, no glassmorphism, no frosted panels, no soft shadows.

Readable text and controls. Headlines, wordmarks, labels, numbers, and card text and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit. No other element covers any part of them. Decoration and motion may be cropped, bled, rotated, or overlapped as the direction asks, provided they cover no readable text or control. The Platform yang didukung row is a horizontally scrollable row: it may cross the container edge by design, and every badge must become fully readable as it passes. Under prefers-reduced-motion, the row remains horizontally scrollable so each badge can be brought fully into view.

7. Signature Design Concept

The living headline. The first screen is a full-viewport warm paper ground (#F5F3EF) carrying a single oversized kinetic headline — "Tempel tautan, pilih kualitas, unduh." — in Space Grotesk 700 at 56px on mobile and 96px on desktop, spanning the full viewport width and breaking out of the 720px column. Each character is its own span, and each shifts horizontally by up to 8px based on cursor proximity. The headline is alive before the user touches anything: the type itself is the hero image, and the product's promise is legible in the motion.

Behind the headline, a generative pattern of thin diagonal lines (1px, 8px apart, 10% opacity) drifts 4px horizontally on a slow 4s loop — texture, not decoration, and never over the readable type.

Below the headline, the working surface: the label Tautan media, a single wide input with a 2px ink border that thickens to 3px and turns orange on focus, and the placeholder https://www.tiktok.com/@akun/video/…. To the right on desktop and below on mobile, Tempel (white fill, ink border) and Ambil (orange fill #FF4D2E, white text). When a valid link is present, a pill badge with the detected platform's icon and name slides in from the left with a spring easing and the icon pulses once — the detection is visible and delightful, not silent.

There is no card container, no gradient, no illustration. Just type, input, and motion — the whole product's promise compressed into one screen that responds to the user before they have done anything.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject. The kinetic headline "Tempel tautan, pilih kualitas, unduh." — split into individual character spans, set in Space Grotesk 700, floating directly on the warm paper ground with no card container.
• Input → transformation → outcome thesis. Cursor or touch proximity to a character → that character shifts horizontally by up to 8px (magnetic type) → the headline reads as physically alive, and the same responsiveness carries into the input's focus transition and the detected-platform badge, so the whole first screen feels like one continuous, reactive surface.
• Motion vocabulary. Magnetic type on the headline; a 150ms ink-to-orange border transition on input focus; a spring-eased slide-in from the left for the detected-platform badge with a single icon pulse; a 120ms left-to-right background fill on the Ambil hover state with the label shifting 2px right; a draggable horizontal scroll with momentum on Platform yang didukung; a 200ms colour-block wipe (full-height #FF4D2E) on navigation between Landing and Features; a 120ms slide-down with a springy +→× rotation on Detail teknis.
• Composed first frame. Full-viewport #F5F3EF ground. The oversized headline spans the full width, breaking the 720px column, with the diagonal line pattern drifting behind it at 10% opacity. Below it, the Tautan media label, the wide input with its 2px ink border, and the Tempel and Ambil buttons. Nothing else. No badge yet — the badge only exists once a link is recognized.
• Reduced-motion state. Under prefers-reduced-motion, all motion is disabled or reduced to simple fades: the headline characters hold their positions, the diagonal pattern stops drifting, the detected-platform badge fades in instead of sliding, the page transition becomes a plain swap, and the Platform yang didukung row remains horizontally scrollable so every badge can still be brought fully into view.

Motion constraints. Motion is snappy and purposeful — 120–200ms — with spring easing reserved for the platform-detection badge and the collapsible icon rotation. No bouncy or playful easing that contradicts the tool's utility. No gradient blobs, no glassmorphism, no frosted panels, no soft shadows.

9. Non-Functional Requirements

NFR-1 — Android APK delivery. The deliverable is an installable Android application package. Provenance: explicit (user constraint: "buatkan menjadi apk"). Rationale: the user asked for the website as an APK, not as a mobile web page.

NFR-2 — Fidelity to the referenced site. The app must be as close as possible to 100% similar to https://wilz-down.vercel.app in content, structure, features, and visual design. Provenance: explicit (user constraint: "mirip 100%"). Rationale: this is the user's stated acceptance bar.

NFR-3 — No account, no additional app. The app requires no account and no additional application to function. Provenance: explicit (site description: "Tanpa akun, tanpa aplikasi tambahan"). Rationale: this is the product's stated positioning and a hard access fact.

NFR-4 — Mobile-first single-column layout. The app renders a single-column vertical flow at all breakpoints, with the input and buttons stacking vertically on mobile. Provenance: explicit (creative direction layout rules; site's mobile-oriented structure). Rationale: the audience is mobile.

NFR-5 — Readable text and controls at every viewport. Headlines, wordmarks, labels, numbers, and card text and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering them. Provenance: explicit (creative direction readability rule). Rationale: legibility is a hard constraint that outranks decorative cropping.

NFR-6 — Reduced-motion support. All motion is disabled or reduced to simple fades when prefers-reduced-motion is set, and the Platform yang didukung row remains horizontally scrollable so every badge can be brought fully into view. Provenance: explicit (creative direction motion rules). Rationale: accessibility without losing content.

NFR-7 — Light mode only. The ground is warm paper (#F5F3EF) with ink text; dark mode is not the default and is not specified. Provenance: explicit (creative direction: "No dark mode as the default"). Rationale: the palette is bright and flat so motion reads clearly.

NFR-8 — No blue or indigo. No blue or indigo appears anywhere in the palette. Provenance: explicit (creative direction exclusion). Rationale: the primary is orange, the accent is mint, and the ground is warm paper.

NFR-9 — Local history only. The Terakhir dibuka list is device-local and is cleared by Hapus riwayat. Provenance: required_inference (the site presents a clearable recent-links list with no account). Rationale: with no account, the only place history can live is the device.

NFR-10 — External fetch responsibility. Media retrieval is performed by external tooling on the user's behalf; the app owns the request, the visible progress, the quality choices, and the download outcome, but not the third-party platform's availability or terms. Provenance: explicit (feature reference: attribution to an external tool; site's usage note). Rationale: the app must not claim ownership of third-party content or rights.

10. Tech Stack

The user specified no technology stack beyond the APK delivery target. The following are the minimum choices consistent with the accepted behavior and the creative direction.

• Client: React Native (Android target), producing the APK. Chosen because the deliverable is an Android application package and the UI is a custom, motion-heavy single-column surface.
• Motion and styling: a React Native animation layer capable of the direction's vocabulary — character-level transforms, spring easing, and a colour-block page transition. The direction's layered_2d hero dimensionality means no WebGL or Canvas is required.
• Fonts: Space Grotesk (headings) and DM Sans (body), bundled with the app so the type renders identically offline.
• Icons: monochrome SVG platform glyphs for the 23 supported services, bundled locally.
• Local storage: on-device key-value or embedded storage for the Terakhir dibuka list. No server-side user data.
• Media retrieval: external fetch tooling invoked by the app; the app does not implement platform-specific scraping itself.
• No backend service is required for the accepted behavior, because there is no account, no sync, and no server-owned state.

11. Assumptions and Constraints

Assumptions

• A-1. The 23 supported platforms are the set the referenced site lists; the specific roster beyond the named examples (TikTok, Instagram, YouTube, Twitter/X, Facebook) is taken from the site's own supported-platform list at build time. (Assumption — the snapshot names examples but not the full roster.)
• A-2. The Detail teknis content is the technical information the referenced site presents in that section; its exact wording is taken from the site at build time. (Assumption — the snapshot identifies the section and its collapsed affordance but not its full body text.)
• A-3. The quality options presented after a fetch are those the external fetch tooling returns for the given link. (Assumption — the site states "pilih kualitas" but does not enumerate a fixed quality ladder.)
• A-4. The Terakhir dibuka list stores links locally on the device, since the app has no account. (Assumption — consistent with the site's account-free positioning.)

Constraints

• C-1. The deliverable is an Android APK. (Explicit.)
• C-2. Fidelity target is "mirip 100%" against https://wilz-down.vercel.app. (Explicit.)
• C-3. No account and no additional app are required to use the tool. (Explicit, source-backed.)
• C-4. The app has exactly two pages — Landing and Features — both anonymously reachable. (Planning scope, page contract version 1.)
• C-5. The only active human persona is the Site Visitor. No additional personas are created. (Planning scope, closed persona catalog.)
• C-6. The palette excludes blue and indigo entirely; the primary is #FF4D2E, the accent is #00C48C, and the ground is #F5F3EF. (Explicit, creative direction.)
• C-7. Headings use Space Grotesk and body uses DM Sans; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are excluded. (Explicit, creative direction.)
• C-8. No drop shadows, gradient blobs, glassmorphism, or frosted panels. (Explicit, creative direction.)
• C-9. The app does not add accounts, profiles, cloud sync, social features, subscriptions, analytics dashboards, or any capability the referenced site does not present. (Derived from the fidelity constraint and the site's account-free positioning.)
• C-10. The app does not claim ownership of third-party media; the site's usage note governs permitted use. (Explicit, source content.)

Future horizon. No future requirements were stated. Nothing in this document is deferred.

12. Glossary

• APK — Android application package; the installable deliverable the user requested.
• Ambil — the primary action button that submits the link for fetching.
• Tempel — the secondary action button that reads a link from the clipboard into the input.
• Dropr — the service branding of the referenced site.
• Detail teknis — the collapsible technical-details section on the Landing page.
• Platform yang didukung — the section listing the 23 supported services as a horizontal draggable row of pill badges.
• Terakhir dibuka — the section listing recently opened links, with the Hapus riwayat action.
• Hapus riwayat — the action that clears the Terakhir dibuka list.
• Site Visitor — the single active human persona; the person who opens the app and uses its content and features.
• Detected-platform badge — the pill-shaped badge showing the platform recognized from the pasted link.
• Kinetic headline — the hero headline split into individual character spans that shift horizontally based on cursor proximity.
• Colour-block wipe — the 200ms full-height orange transition used when navigating between Landing and Features.
• mirip 100% — the user's fidelity requirement: the app must be as close as possible to 100% similar to the referenced site.