System Requirements Document for simple-desa55

1. Introduction

simple-desa55 is a single public landing page for the desa55 brand. Its product intent is narrow and deliberate: present the desa55 name and its keyword derivatives as a confident, high-production first screen, display the images supplied by the user as the page's primary visual content, and funnel every visitor to one external destination — https://desa55x.pages.dev — through the three labelled actions LOGIN, DAFTAR, and GROUP DESA55.

The audience is Indonesian-language visitors who arrive from search queries around "desa55" and its derivatives ("desa55 login", "desa55 daftar", "desa55 group", "link desa55", "desa55 resmi"). They need instant recognition of the keyword, a page that feels like a destination worth entering, and a frictionless path to the external destination. The page is a public entry surface: it has no accounts, no forms, no dashboards, and no product state of its own.

2. System Overview

simple-desa55 is delivered as one public, statically served landing page. It owns exactly one responsibility: the public entry surface for the desa55 brand. Everything beyond that entry — login, registration, and the community group — is owned by the external destination https://desa55x.pages.dev, which this project links to and does not build, replicate, frame, or preview.

Actors. The only active human actor is the Landing Page Visitor, who arrives anonymously, reviews the imagery and keyword content, and leaves through one of the three destination actions. The external destination https://desa55x.pages.dev is a non-persona external actor: it receives the visitor and owns all downstream work.

Accepted behaviour. The page renders the user-supplied images as its primary visual content; it presents "desa55" and its derivatives as visible, indexable keyword content; and it exposes three actions — LOGIN, DAFTAR, GROUP DESA55 — each of which navigates to https://desa55x.pages.dev and to no other destination. The page is required to be as neat and as attractive as possible.

Ownership and exclusions. The landing page is application-owned and publicly reachable with no access requirement. The destination is external and out of scope. No account creation, authentication, session, profile, dashboard, telemetry, or community feature is part of this project.

2a. Product Interpretation and Delivery Boundary

This project is a public, anonymous, single-page delivery. A visitor needs no identity, no sign-in, and no prior state to use it: the page opens, shows the desa55 imagery and keyword content, and offers three buttons that all lead to the same external destination. Because nothing on the page is private, resumable, or bound to a specific person, no application-owned identity, account, or session is established anywhere in this project.

The boundary between this project and the outside world is sharp. This project owns the landing page only. The destination at https://desa55x.pages.dev is owned externally: it is linked to, never rebuilt, mirrored, embedded in a frame, or previewed. All work that happens after a visitor leaves — logging in, registering, joining the group — belongs to that external destination and is outside this document's scope.

Nothing in this document is deferred to a future horizon. The keyword targeting, the supplied imagery, the three destination actions, and the visual quality requirement are all current commitments.

2b. Source Content Inventory

The authoritative content source for this project is the set of user-supplied images attached to the request. No media metadata, filenames, captions, dimensions, or alt text were provided with them, and no factual entity, collection item, field, value, description, date, contact, or link was supplied alongside them. Accordingly, this inventory records only what is verifiable:

• User-supplied images — attached to the request; no media metadata provided. Role: primary visual content on the landing page. Count, subject matter, and captions are unspecified by the source and must not be invented.
• External destination — https://desa55x.pages.dev. Role: the single target for the LOGIN, DAFTAR, and GROUP DESA55 actions. Not to be built, replicated, or framed.
• Keyword set — "desa55" and its derivatives, including the derivatives named in the creative direction: "desa55 login", "desa55 daftar", "desa55 group", "link desa55", "desa55 resmi".

No other verified content entities exist for this project.

2c. Page Content and Component Coverage

Landing

The public entry surface for the desa55 brand. Anonymous, no access requirement, no application state.

Information and state

• Brand identity: the desa55 name presented as the dominant headline element.
• Keyword content: "desa55" and its derivatives ("desa55 login", "desa55 daftar", "desa55 group", "link desa55", "desa55 resmi") rendered as visible page text so they are readable and indexable.
• The user-supplied images as the page's primary visual content.
• A short supporting sentence describing the page as the desa55 community gateway.
• No user-specific, session-specific, or persisted state exists on this page.

Primary actions

• LOGIN — navigates to https://desa55x.pages.dev.
• DAFTAR — navigates to https://desa55x.pages.dev.
• GROUP DESA55 — navigates to https://desa55x.pages.dev.

Supporting actions

• In-page navigation to the page's own sections (hero, keyword band, image diptych, data strip, closing panel).
• No other outbound action exists; no third destination is permitted.

Domain entities

• Brand keyword ("desa55" and derivatives).
• Supplied image asset.
• External destination URL (https://desa55x.pages.dev).

Component responsibilities

• Sticky top bar — 64px; transparent over the hero, solid #05060A with a hairline rule once scrolled. Carries the desa55 wordmark and the LOGIN and DAFTAR actions.
• Generative hero — full-viewport WebGL particle field on #05060A ground; slow-drifting ember (#FF4D2E) and mint (#5BF0C8) particles that periodically resolve into the glyphs "desa55". Left-anchored in columns 1–8: a 12px uppercase mint micro-label reading "DESA55 — GERBANG KOMUNITAS", the oversized keyword headline with "desa55" in ember and the supporting line in #F4F6FA, one 16px muted sentence, and the two pill actions (LOGIN as a 1px mint outline, DAFTAR filled ember with a black label). A thin vertical hairline at column 9 marks the composition edge; the right third stays mostly empty field.
• Keyword band — a horizontally moving band of desa55 derivative chips in ember and mint, crossing the container edge by design.
• Image diptych — a two-up presentation of the supplied images, desaturated toward ink and bled off opposite viewport edges, separated by a single ember rule.
• Ruled data strip — hairline top and bottom, three tabular metrics in mint with tabular numerals, treated as museum wall labels.
• Closing flow panel — full-bleed flow panel carrying the three destination actions: LOGIN, DAFTAR, GROUP DESA55.
• Footer — minimal; may repeat the destination actions and the keyword set.

States

• Loading — the hero canvas initialises; the page's text, images, and actions are present and usable without waiting on the canvas.
• Empty — not applicable; the page has no collections, lists, or user-generated content that can be empty.
• Success — the page renders fully: imagery visible, keyword content readable, all three actions present and pointing to https://desa55x.pages.dev.
• Error — if a supplied image fails to load, its reserved space is retained and the surrounding layout does not collapse or shift; the keyword content and all three actions remain fully visible and usable.
• Recovery — if the generative canvas is unavailable (unsupported WebGL, context loss, or a script failure), the hero falls back to a static near-black #05060A ground with the headline, supporting sentence, and both pill actions fully readable and operable.
• Reduced motion — under prefers-reduced-motion, the canvas renders a single static frame, all reveals resolve immediately, and the keyword chips wrap into rows so each derivative is fully readable.

3. Functional Requirements

FR-1 — Public landing page for the desa55 brand (explicit) As a Landing Page Visitor, I should arrive at a public landing page for the desa55 brand so that I immediately understand what desa55 is and where to go next.

• Trigger: the visitor opens the landing page URL.
• Observable result: the page renders with the desa55 brand headline, the supplied imagery, the keyword content, and the three destination actions.
• Access state: public, anonymous, no access requirement.
• Failure/recovery: if the generative canvas cannot run, the page still renders its text, imagery, and actions on a static near-black ground.
• Continuation: the visitor reviews the page and chooses one of the three destination actions.

FR-2 — Supplied images as primary visual content (explicit) As a Landing Page Visitor, I should see the images supplied by the user presented as the page's primary visual content so that the page reflects the brand's own material rather than generic stock imagery.

• Trigger: the page loads.
• Observable result: the supplied images are displayed on the page as its primary visual content, treated as desaturated, high-contrast data substrates composited into the page's visual system.
• Access state: public, anonymous.
• Failure/recovery: if an image fails to load, its reserved space is retained so the layout does not collapse, and the rest of the page remains fully usable.
• Continuation: the visitor continues to the keyword content and the destination actions.

FR-3 — Keyword targeting for "desa55" and its derivatives (explicit) As a Landing Page Visitor arriving from search, I should find "desa55" and its derivatives present as visible page content so that the page matches the query I searched for.

• Trigger: the page is loaded or indexed.
• Observable result: "desa55" appears as the dominant headline term, and its derivatives — including "desa55 login", "desa55 daftar", "desa55 group", "link desa55", and "desa55 resmi" — appear as visible, readable page text.
• Access state: public, anonymous.
• Failure/recovery: if the keyword band's motion is unavailable, the derivatives wrap into readable rows rather than disappearing.
• Continuation: the visitor recognises the keyword and proceeds to a destination action.

FR-4 — LOGIN action (explicit) As a Landing Page Visitor, I should be able to activate a control labelled LOGIN so that I am taken to https://desa55x.pages.dev.

• Trigger: the visitor activates the LOGIN control.
• Observable result: navigation to https://desa55x.pages.dev.
• Access state: public, anonymous; no identity is required or established on this page.
• Failure/recovery: if navigation does not complete, the visitor remains on the landing page and can retry the action.
• Continuation: the external destination owns everything that follows.

FR-5 — DAFTAR action (explicit) As a Landing Page Visitor, I should be able to activate a control labelled DAFTAR so that I am taken to https://desa55x.pages.dev.

• Trigger: the visitor activates the DAFTAR control.
• Observable result: navigation to https://desa55x.pages.dev.
• Access state: public, anonymous.
• Failure/recovery: if navigation does not complete, the visitor remains on the landing page and can retry the action.
• Continuation: the external destination owns everything that follows.

FR-6 — GROUP DESA55 action (explicit) As a Landing Page Visitor, I should be able to activate a control labelled GROUP DESA55 so that I am taken to https://desa55x.pages.dev.

• Trigger: the visitor activates the GROUP DESA55 control.
• Observable result: navigation to https://desa55x.pages.dev.
• Access state: public, anonymous.
• Failure/recovery: if navigation does not complete, the visitor remains on the landing page and can retry the action.
• Continuation: the external destination owns everything that follows.

FR-7 — Single destination for all three actions (explicit) As a Landing Page Visitor, I should find that every LOGIN, DAFTAR, and GROUP DESA55 control leads to the same destination so that I am never sent somewhere unexpected.

• Trigger: the visitor activates any of the three controls, from any placement on the page (top bar, hero, or closing panel).
• Observable result: every one of those controls resolves to https://desa55x.pages.dev and to no other destination.
• Access state: public, anonymous.
• Failure/recovery: not applicable; the constraint is a property of the controls themselves.
• Continuation: the visitor arrives at the external destination.

FR-8 — Neat and attractive presentation (explicit) As a Landing Page Visitor, I should experience a page that is as neat and as attractive as possible so that desa55 feels like a destination worth entering.

• Trigger: the page renders at any supported viewport.
• Observable result: a coherent, museum-grade composition — full-bleed generative hero, hairline-ruled sections, hard-cropped imagery, restrained pill actions — with no visual clutter and no broken layout.
• Access state: public, anonymous.
• Failure/recovery: if motion or canvas rendering is unavailable, the static composition remains neat and complete.
• Continuation: the visitor proceeds to a destination action.

FR-9 — Supplied images available to the page (required_inference) As a Landing Page Visitor, I should have the supplied images actually served and rendered by the page so that FR-2 is executable.

• Trigger: the page loads and requests its image assets.
• Observable result: the supplied images are delivered and displayed.
• Access state: public, anonymous.
• Failure/recovery: a failed image request leaves its reserved space intact and does not block the rest of the page.
• Continuation: the visitor continues through the page.

FR-10 — Each labelled action resolves to the destination (required_inference) As a Landing Page Visitor, I should have each of the three labelled controls individually resolve to https://desa55x.pages.dev so that FR-4, FR-5, and FR-6 are executable from every placement.

• Trigger: the visitor activates LOGIN, DAFTAR, or GROUP DESA55 from the top bar, the hero, or the closing panel.
• Observable result: the activated control navigates to https://desa55x.pages.dev.
• Access state: public, anonymous.
• Failure/recovery: a failed navigation leaves the visitor on the landing page with the control still available.
• Continuation: the external destination owns everything that follows.

FR-11 — Readable text and controls at every viewport (required_inference) As a Landing Page Visitor, I should be able to read every headline, label, keyword chip, and metric and operate every control at 375px, 768px, and 1280px so that the page is usable on any device.

• Trigger: the page renders at a given viewport width.
• Observable result: headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container, wrapping or scaling to fit; no other element covers any part of them.
• Access state: public, anonymous.
• Failure/recovery: under reduced motion, moving and scrollable content resolves into a static arrangement in which every item can be brought fully into view.
• Continuation: the visitor reads the content and activates a destination action.

4. User Personas

Landing Page Visitor

Product context. The Landing Page Visitor is an Indonesian-language web user who arrives at the desa55 landing page, most often from a search query built around the keyword "desa55" or one of its derivatives. They have no account, no invitation, and no prior relationship with the page; they land anonymously and decide within seconds whether this is the desa55 they were looking for.

Primary goal. Confirm that this is the desa55 destination, take in what it offers, and continue to https://desa55x.pages.dev through whichever of the three actions matches their intent — logging in, registering, or joining the group.

Distinct accepted responsibilities. This persona carries the entire human side of the product. They are the reader of the keyword content, the viewer of the supplied imagery, and the actor who activates LOGIN, DAFTAR, or GROUP DESA55. They are also the person who judges whether the page is neat and attractive enough to trust. No other human role exists in this project.

Relevant inputs and decisions. The visitor's inputs are their search query and their intent — do they want to log in, register, or join the group? Their decision is which of the three labelled controls to activate. They supply no data to the page and create no state on it.

Interactions with other accepted participants. The visitor's only counterparty is the external destination https://desa55x.pages.dev, which receives them after they activate a control. That destination is not a persona; it is an external owner. The visitor never interacts with another human through this page.

Observable success. The visitor recognises "desa55" immediately, sees the brand's own imagery, finds the page clean and attractive, and reaches https://desa55x.pages.dev smoothly from the control they chose. Success is measured by a clean arrival and an unobstructed exit.

Constraints carried from source. The visitor arrives anonymously and needs no account to use this page. Every control they can activate leads to the same single destination.

5. Core User Flows

Flow 1 — Arriving from search and recognising the keyword

1. The Landing Page Visitor follows a search result for "desa55" or a derivative such as "desa55 login" or "link desa55".
2. The Landing page loads publicly and anonymously; no sign-in is requested.
3. The generative hero renders on the near-black #05060A ground, with ember and mint particles drifting and periodically resolving into the glyphs "desa55".
4. The visitor reads the mint micro-label "DESA55 — GERBANG KOMUNITAS" and the oversized headline with "desa55" set in ember.
5. The visitor scans the keyword band and sees the derivatives — "desa55 login", "desa55 daftar", "desa55 group", "link desa55", "desa55 resmi" — as readable chips.
6. Observable result: the visitor confirms this is the desa55 destination they searched for.
7. Continuation: the visitor scrolls on to the imagery and the destination actions.
8. Failure/recovery: if the canvas cannot run, the hero renders as a static near-black ground with the headline, sentence, and both pill actions fully readable; if the keyword band's motion is unavailable, the chips wrap into readable rows.

Flow 2 — Reviewing the supplied imagery

1. From the Landing page, the visitor scrolls to the image diptych.
2. The supplied images appear as desaturated, high-contrast substrates bled off opposite viewport edges, separated by a single ember rule, reading as part of the same visual system as the generative field.
3. Observable result: the visitor sees the brand's own material presented as the page's primary visual content.
4. Continuation: the visitor continues to the ruled data strip and the closing panel.
5. Failure/recovery: if an image fails to load, its reserved space is retained, the layout does not collapse, and the keyword content and all three actions remain fully visible and usable.

Flow 3 — Continuing through LOGIN

1. From the Landing page — in the sticky top bar, the hero, or the closing flow panel — the visitor decides to log in.
2. The visitor activates the control labelled LOGIN.
3. Observable result: the browser navigates to https://desa55x.pages.dev.
4. Continuation: the external destination owns everything that follows; this project performs no login work itself.
5. Failure/recovery: if navigation does not complete, the visitor remains on the landing page with the LOGIN control still available and can retry.

Flow 4 — Continuing through DAFTAR

1. From the Landing page, the visitor decides to register.
2. The visitor activates the control labelled DAFTAR — the filled ember pill with the black label.
3. Observable result: the browser navigates to https://desa55x.pages.dev.
4. Continuation: the external destination owns everything that follows; this project performs no registration work itself.
5. Failure/recovery: if navigation does not complete, the visitor remains on the landing page with the DAFTAR control still available and can retry.

Flow 5 — Continuing through GROUP DESA55

1. From the Landing page, the visitor decides to join the community group.
2. The visitor activates the control labelled GROUP DESA55.
3. Observable result: the browser navigates to https://desa55x.pages.dev.
4. Continuation: the external destination owns everything that follows; this project performs no group work itself.
5. Failure/recovery: if navigation does not complete, the visitor remains on the landing page with the GROUP DESA55 control still available and can retry.

Flow 6 — Reading the page on a small screen

1. The Landing Page Visitor opens the Landing page at 375px width.
2. The hero headline scales down to its mobile floor and stays entirely inside the viewport; the micro-label, supporting sentence, and both pill actions remain whole and uncovered.
3. The keyword band continues to move across the container edge; each derivative becomes fully readable as it passes.
4. The image diptych, the ruled data strip, and the closing panel stack into a single readable column.
5. Observable result: every headline, label, keyword chip, metric, and control is readable and operable.
6. Continuation: the visitor activates LOGIN, DAFTAR, or GROUP DESA55.
7. Failure/recovery: under prefers-reduced-motion, the canvas renders a single static frame, all reveals resolve immediately, and the keyword chips wrap into rows so each derivative is fully readable.

6. Visuals, Colors and Theme

The creative direction is authoritative for this section. Its muse is Refik Anadol, and its headline idea is data made physical — a luminous desa55 field where every keyword becomes light. The keyword itself is the visual material: "desa55" is rendered as a generative particle field rather than as a caption.

Colour tokens (dark mode)

--primary (#FF4D2E) is reserved for the DAFTAR action and the keyword highlight, and never occupies more than roughly 5% of any screen. --accent (#5BF0C8) is the generative field's second hue and marks live/derivative keyword chips and hover states. --muted (#7C8798) is used only for metadata at 14px and above, where it still clears 4.5:1 against the void. There is no blue, no indigo, and no white ground anywhere in this project.

Typography

• Headings: Space Grotesk, weights 500–700, tracking -0.03em, mixed case for the giant keyword headline; uppercase 12px micro-labels with 0.22em letter-spacing for section markers.
• Body: Sora.
• Numerals: Sora 600, tabular.
• Scale: 1.5 modular — 128 / 88 / 56 / 32 / 20 / 16 / 14, with mobile floors. Hero keyword clamp(56px, 13vw, 168px); section heads clamp(32px, 5.5vw, 56px); body 16–18px at 1.65 line-height; micro-labels 12px at 0.22em.

Shape language. A full-bleed rectangular canvas with no rounded card grid. Sections are separated by hairline rules and by shifts in the generative field's density. The only rounded forms are the two pill actions (LOGIN outline, DAFTAR filled ember) and the small circular keyword chips. Imagery is cropped hard to the grid and bled off the left and right edges.

Layout. A museum-like vertical sequence on a 12-column grid with 96px desktop gutters (24px at 375px): (1) full-viewport generative hero with the keyword headline left-anchored in columns 1–8; (2) a horizontal keyword band of desa55 derivatives; (3) a two-up image diptych where the supplied photos bleed off opposite edges; (4) a ruled data strip with three tabular metrics; (5) a closing full-bleed flow panel with the three destination actions. The sticky top bar is 64px, transparent over the hero and solid #05060A with a hairline once scrolled.

Imagery style. The user-supplied images are treated as data substrates: desaturated toward ink, high-contrast, then composited into or layered beside the generative field so they read as one continuous visual system rather than as framed photos. No stock people, no clip art, no gradient blobs.

Explicitly avoided. Blue or indigo primary on a white or near-white ground; glassmorphism cards, frosted panels, or a grid of identical hover-lift cards; a centred headline with subtext, blue button, and gradient blob; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, or system-ui for headings or body; rounded-corner photo cards with drop shadows; any third destination; any preview or replica of the destination page; playful bounce easing, confetti, or cartoon illustration.

7. Signature Design Concept

The keyword as the artwork. The public entry is a full-viewport near-black field (#05060A) of slow-drifting ember (#FF4D2E) and mint (#5BF0C8) particles that periodically resolve into the glyphs desa55. The word is not a caption placed on top of a background — it is what the field itself becomes, so the first thing a visitor from search sees is the exact term they searched for, rendered as light.

Over that field, left-anchored in columns 1–8, sits a stacked headline set at clamp(56px, 13vw, 168px) in Space Grotesk 700, with the word "desa55" in ember and the supporting line in #F4F6FA. Above it, a 12px uppercase mint micro-label reads DESA55 — GERBANG KOMUNITAS. Beneath it, a single 16px muted sentence and two pill actions: LOGIN as a 1px mint outline, DAFTAR filled ember with a black label — both linking to https://desa55x.pages.dev. The right third of the viewport is left mostly empty field so the motion reads, and a thin vertical hairline at column 9 marks the composition edge.

Nothing is centred, nothing floats in a glass card, and there is no gradient blob behind a blue button. The first screen reads as a poster, not as a SaaS hero — and the poster's subject is the keyword itself.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject. A real-time WebGL particle field on a #05060A ground, composed of ember (#FF4D2E) and mint (#5BF0C8) particles that drift continuously and periodically resolve into the glyphs "desa55".
• Input → transformation → outcome thesis. The page's own keyword data — "desa55" and its derivatives — is the input; the field continuously transforms that data into drifting light and periodically resolves it into the word itself; the outcome is that the visitor's search term appears as the artwork before they read a single line of copy, and the two pill actions sit beneath it ready to carry them to https://desa55x.pages.dev.
• Motion vocabulary. One continuous shader/particle loop on roughly a 40-second cycle, requiring no interaction; scroll-linked morph in which the field's density compresses as sections advance; keyword chips revealing with a 400ms staggered fade-up; everything else instant.
• Composed first frame. Near-black void; the field already drifting; the mint micro-label "DESA55 — GERBANG KOMUNITAS" above a left-anchored headline with "desa55" in ember; one muted sentence; LOGIN as a 1px mint outline and DAFTAR filled ember with a black label; the right third mostly empty field; a vertical hairline at column 9.
• Reduced-motion state. Under prefers-reduced-motion, the canvas renders a single static frame, all reveals resolve immediately, and the keyword chips wrap into rows so each derivative is fully readable. The headline, sentence, and both pill actions remain fully readable and operable.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

One crafted real-time object: a particle field whose defining state is the moment its flow resolves the glyphs "desa55" out of ember and mint light. The scene shows the product's defining state directly — the keyword made physical — and is built so that its static first frame is already a complete, legible composition if motion is unavailable.

9. Non-Functional Requirements

NFR-1 — Single external destination (explicit) Every control labelled LOGIN, DAFTAR, or GROUP DESA55 must point to https://desa55x.pages.dev and to no other destination. Rationale: this is an explicit hard constraint in the authoritative source, and the creative direction reinforces it by banning any third destination.

NFR-2 — Destination is not built or replicated (explicit) The destination at https://desa55x.pages.dev must not be built, replicated, framed, or previewed by this project. It serves only as the external target for the three labelled actions. Rationale: explicit reference directive with authoritative status.

NFR-3 — Supplied imagery is present (explicit) The landing page must include the user-supplied images as its primary visual content. Rationale: explicit hard constraint in the authoritative source.

NFR-4 — Keyword coverage (explicit) Keyword targeting must cover "desa55" and its derivatives, which must appear as visible, readable page text. Rationale: explicit hard constraint in the authoritative source.

NFR-5 — Visual quality (explicit) The page must be as neat and as attractive as possible. Rationale: explicit hard constraint in the authoritative source; realised through the creative direction's composition, spacing, and restraint.

NFR-6 — Public anonymous access (explicit) The landing page is publicly reachable with no access requirement. No account, sign-in, session, or identity is established anywhere in this project. Rationale: the page is a public entry surface and the source establishes no identity requirement.

NFR-7 — Readable text and controls at every viewport (required_inference) Headlines, wordmarks, labels, numbers, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering any part of them. Imagery, decoration, and motion may be cropped, bled, overlapped, or cut as the direction requires, provided they cover no readable text or control. Moving and scrollable content may cross the viewport or container edge by design, judged by whether it actually moves and whether every item becomes fully readable as it passes. Rationale: required for the page to be usable by the accepted persona at the viewports the direction specifies.

NFR-8 — Reduced-motion support (required_inference) Under prefers-reduced-motion, the canvas must render a single static frame, all reveals must resolve immediately, and moving or scrollable content must resolve into a static arrangement in which every item can be brought fully into view. Rationale: required for the page to remain usable when motion is unavailable or unwanted.

NFR-9 — Graceful degradation (required_inference) If the generative canvas is unavailable — unsupported WebGL, context loss, or script failure — the hero must fall back to a static near-black ground with the headline, supporting sentence, and both pill actions fully readable and operable. If a supplied image fails to load, its reserved space must be retained so the layout does not collapse. Rationale: required so that the page's accepted content and actions survive a rendering failure.

NFR-10 — No application state or persistence (required_inference) The page must not create, store, or resume any user-specific state. Rationale: nothing in the accepted behaviour requires identity, continuity, or persistence, and adding it would introduce capabilities the source did not accept.

10. Tech Stack

• React — the landing page is a single custom UI surface built as a React application.
• WebGL / React Three Fiber — required by the creative direction's webgl hero dimensionality for the real-time generative particle field.
• Static hosting — the page is a public, anonymous, statically served entry surface with no server-side state, no database, and no backend service.
• No storage layer — no database, no persistence, and no session store are required, because the page owns no user state.
• No authentication layer — no identity provider, session handling, or account system is part of this project; all login and registration work belongs to the external destination.

11. Assumptions and Constraints

Assumptions

• A1 (narrow). The user-supplied images are available to the build as static assets. No media metadata, filenames, captions, or dimensions were provided, so their count, subject matter, and alt text are unspecified and must not be invented.
• A2 (narrow). The landing page is served at a single public URL with no access gate.
• A3 (narrow). The derivative keyword set used on the page is the set named in the creative direction — "desa55 login", "desa55 daftar", "desa55 group", "link desa55", "desa55 resmi" — alongside the base term "desa55".
• A4 (narrow). The external destination https://desa55x.pages.dev is live and reachable; this project does not verify or control it.

Constraints

• C1. All LOGIN, DAFTAR, and GROUP DESA55 controls point to https://desa55x.pages.dev and to no other destination.
• C2. The destination page is not built, replicated, framed, or previewed.
• C3. The landing page includes the user-supplied images as its primary visual content.
• C4. Keyword targeting covers "desa55" and its derivatives as visible page text.
• C5. The page is as neat and as attractive as possible.
• C6. The page is public and anonymous; no account, session, or identity is established.
• C7. The palette, typography, shape language, layout, and motion follow the creative direction; the generic indigo/blue-on-white SaaS template is forbidden.
• C8. No third destination exists anywhere on the page.

Presentation and technology defaults [Default — not specified by user]

• The specific static hosting provider is not specified by the user; any static host that serves the built page publicly is acceptable.
• The exact build tooling around React is not specified by the user.
• Image alt text is not specified by the user; it should be written to describe each supplied image truthfully once its content is known, and must not invent subject matter.

12. Glossary

• desa55 — the brand name and primary keyword this landing page targets.
• Derivatives (turunan) — keyword variants built from "desa55", including "desa55 login", "desa55 daftar", "desa55 group", "link desa55", and "desa55 resmi".
• Landing Page Visitor — the single active human persona: an anonymous visitor who arrives at the public landing page, reviews its imagery and keyword content, and continues to the external destination.
• Destination — https://desa55x.pages.dev, the single external target for the LOGIN, DAFTAR, and GROUP DESA55 actions. Externally owned; not built or replicated by this project.
• LOGIN / DAFTAR / GROUP DESA55 — the three labelled controls on the landing page, each of which navigates to the destination.
• Generative field — the full-viewport WebGL particle field that renders "desa55" out of ember and mint light; the page's signature visual element.
• Keyword band — the horizontally moving strip of desa55 derivative chips.
• Image diptych — the two-up presentation of the supplied images, desaturated toward ink and bled off opposite viewport edges.
• Ruled data strip — the hairline-bounded strip presenting three tabular metrics in mint.
• Reduced motion — the prefers-reduced-motion state, in which the canvas renders a single static frame, reveals resolve immediately, and moving content wraps into readable rows.