System Requirements Document for tepung-telur

1. Introduction

tepung-telur is a novelty interactive web experience whose entire product payload is a single, comic, physical outcome: making a person basah kuyup (soaking wet) and filling their head with tepung (flour), cairan kuning telur (egg-yolk liquid), and pecahan cangkang telur (broken eggshell fragments).

The product intent, derived directly from the authoritative user requirement thread, is:

• Make the person soaking wet.
• Make the person's head full of flour.
• Make the person's head full of egg-yolk liquid.
• Make the person's head full of broken eggshell fragments.

This is a stunt, not a utility. The audience is anyone with a sense of humour and a phone who wants to trigger and watch a gleeful, tactile, slightly gross, photographed mess. The interface itself is designed to look handmade and physical — like a photographed art prank built on a kitchen floor — rather than a conventional product UI.

The product is delivered as a first-party custom web application with three anonymous, publicly reachable pages: Landing, Actions, and Results. No account, sign-in, or identity continuity is required by the source.

2. System Overview

tepung-telur is a small, self-contained interactive web toy. A single human actor — Pengguna — arrives at a public entry surface, learns what the product does, triggers the mess-making action, and then views the final condition of the person: drenched, and with a head covered in flour, egg-yolk liquid, and eggshell fragments.

The current delivery consists of three custom first-party pages, all reachable anonymously:

1. Landing — the public entry surface that explains the product and its capability before the user runs the action.
2. Actions — where the user triggers the action that makes the person soaking wet and fills their head with flour, egg-yolk liquid, and eggshell fragments.
3. Results — where the user sees the final condition of the person after the action has run.

The product's defining behaviour is the four-part mess outcome. Each part is a distinct, observable result state:

• Basah kuyup — the person is soaking wet.
• Tepung — the person's head is full of flour.
• Cairan kuning telur — the person's head is full of egg-yolk liquid.
• Pecahan cangkang telur — the person's head is full of broken eggshell fragments.

Actors. The only accepted active human persona is Pengguna. There are no other human personas, no administrators, no moderators, and no differentiated permission roles. No system, provider, or external service is an accepted product actor; the mess outcome is produced and presented entirely within the first-party application.

Ownership. All three pages are owned by the application and are reachable without identity. The mess outcome is initiated, observed, and completed by Pengguna on first-party surfaces.

Narrow exclusions. This document does not introduce account creation, sign-in, profiles, social sharing, leaderboards, saved history, notifications, payments, or any adjacent capability that the authoritative source did not accept. The product does exactly one thing: it makes a person soaking wet and fills their head with flour, egg-yolk liquid, and eggshell fragments, and it shows that result.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. tepung-telur is delivered as a first-party custom web application. All three pages — Landing, Actions, and Results — are owned and rendered by the application itself. There is no provider-owned surface, no external destination, and no headless-only delivery in the current scope.

Access ownership. All three pages are publicly reachable with no access requirement. The source does not ask for accounts, sign-in, invitations, provisioning, or any identity continuity, and no accepted journey requires durable actor-specific state to be privately owned or resumed. The product is therefore anonymous end to end: a user can arrive, trigger the mess, and view the result without establishing identity. No identity-establishment interaction is introduced, because none is indispensable to any accepted outcome.

Current boundary. The current product covers: explaining the product on Landing; triggering the mess on Actions; and viewing the final condition — wetness, flour coverage, egg-yolk coverage, and eggshell fragments — on Results.

Future boundary. Nothing in the authoritative source establishes a future horizon. No future capabilities are claimed, promised, or scheduled in this document. Any capability not listed in the current boundary is out of scope for this generation.

2c. Page Content and Component Coverage

The page inventory below is the final, closed page contract for this generation. Each page appears exactly once.

Landing

• Information and state. The public entry surface. It presents the product's identity and its single promise: making a person soaking wet and filling their head with flour, egg-yolk liquid, and eggshell fragments. No user-specific state is held here; the page is the same for every visitor.
• Primary action. A single chunky letterpress trigger, MULAI BASAH, that moves the user into the mess-making sequence.
• Supporting actions. A body-level marquee of material words (tepung · telur · basah kuyup) that runs along the bottom edge, pauses on hover, and stops entirely under reduced motion. A thin ink rule runs the full width behind the hero block.
• Domain entities. The product itself; the four mess materials (air/wetness, tepung, cairan kuning telur, pecahan cangkang telur).
• Component responsibilities.
  • Hero headline block — a yolk-gold flat colour block occupying columns 1–7, carrying the headline TEPUNG · TELUR in Alfa Slab One at clamp(56px, 11vw, 128px), with the word TELUR partly replaced by a photographed handmade yolk letterform that overhangs the block's edge.
  • Hero photograph — a full-bleed flash-lit photograph of the soaked, flour-and-yolk-caked head, bleeding off the right edge at 60% of the viewport, cropped tight so the mess fills the frame.
  • Body copy line — one line of Archivo body copy beneath the headline.
  • Primary trigger — the MULAI BASAH button, pinned to the block's bottom-left with a 6px ink offset shadow.
  • Material marquee — the bottom-edge ticker of material words.
• States.
  • Loading — the hero photograph and the handmade letterform load; the headline block and trigger render immediately so the page is usable before imagery resolves.
  • Empty — not applicable; the page has no user-specific data.
  • Success — the page renders fully: headline, photograph, body copy, trigger, marquee.
  • Error — if the hero photograph fails to load, the yolk-gold block, headline, body copy, and trigger remain fully readable and the trigger stays operable.
  • Recovery — the user can still proceed via MULAI BASAH; the missing photograph is replaced by the flat colour block rather than blocking the journey.

Actions

• Information and state. The mess-making surface, laid out as a three-stage sequence — Drench, Flour, Egg — as three stacked poster panels. Each panel carries its own photographed material swatch and a single oversized trigger. The page shows which stages have been run and which remain.
• Primary action. Running each stage: drenching the person, covering the head in flour, and covering the head in egg-yolk liquid and eggshell fragments.
• Supporting actions. Advancing to the next stage; proceeding to Results once the mess is complete.
• Domain entities. The person; the four mess materials; the stage sequence (Drench → Flour → Egg); per-stage completion state.
• Component responsibilities.
  • Drench panel — photographed water/material swatch and an oversized trigger that makes the person soaking wet.
  • Flour panel — photographed flour swatch and an oversized trigger that fills the head with flour.
  • Egg panel — photographed yolk-and-shell swatch and an oversized trigger that fills the head with egg-yolk liquid and broken eggshell fragments.
  • Stage progress — a visible indication of which stages have landed and which have not.
  • Frame-counter caption — a visible frame 03/04-style caption on each stage animation, as a deliberate handmade tell.
• States.
  • Loading — material swatches load; panels and triggers render immediately.
  • Empty — no stage has been run yet; all three triggers are available and the progress indicator shows nothing landed.
  • Success — each stage lands in its stepped frames and the progress indicator records it; when all stages have landed, the path to Results is available.
  • Error — if a stage fails to land, that stage's trigger remains available and the progress indicator does not record it; the user can re-run that stage without losing stages that already landed.
  • Recovery — re-running a failed stage restores the sequence; the user is never left with a partially recorded stage that cannot be retried.

Results

• Information and state. A dark gallery presenting the final condition of the person. One enormous full-bleed 'after' photograph with a torn-paper caption strip, plus four counters arranged as stamped tickets: WETNESS, TEPUNG, KUNING TELUR, and CANGKANG.
• Primary action. Viewing the final result.
• Supporting actions. Returning to Actions to run the mess again.
• Domain entities. The final 'after' photograph; the four result counters (wetness, flour coverage, egg-yolk coverage, eggshell shards).
• Component responsibilities.
  • After photograph — full-bleed, flash-lit, showing the person soaking wet with a head covered in flour, egg-yolk liquid, and eggshell fragments.
  • Torn-paper caption strip — the caption band over or beside the photograph.
  • Mess ticket strip — four stamped, misregistered ticket panels, each with oversized numerals in Alfa Slab One, a torn edge, and a red stamp mark: WETNESS, TEPUNG, KUNING TELUR, CANGKANG.
  • Return control — a control that takes the user back to Actions.
• States.
  • Loading — the after photograph and counters load; the ticket strip renders immediately with its labels.
  • Empty — if the user reaches Results before running the stages, the page shows the un-messed state and the counters read at their baseline; the return control to Actions is available.
  • Success — the after photograph shows the full mess and all four counters read their final values.
  • Error — if the after photograph fails to load, the four counters and their labels remain fully readable and the return control stays operable.
  • Recovery — the user can return to Actions and re-run the mess; Results re-renders with the new outcome.

3. Functional Requirements

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

FR-1 — Make the person soaking wet. As a Pengguna, I should be able to make the person basah kuyup (soaking wet), so that the person's body is drenched as the source requires.

• Provenance: explicit.
• Trigger/input: the user runs the Drench stage on Actions.
• Observable result/state change: the person is visibly soaking wet; the wetness result is recorded and later shown on Results.
• Access state: anonymous; no identity required.
• Failure/recovery: if the stage fails to land, the Drench trigger remains available and the user can re-run it.
• Continuation: the user proceeds to the Flour stage.

FR-2 — Fill the person's head with flour. As a Pengguna, I should be able to make the person's head penuh dengan tepung (full of flour), so that the head is covered in flour as the source requires.

• Provenance: explicit.
• Trigger/input: the user runs the Flour stage on Actions.
• Observable result/state change: the person's head is visibly covered in flour; the flour coverage is recorded and later shown on Results.
• Access state: anonymous; no identity required.
• Failure/recovery: if the stage fails to land, the Flour trigger remains available and the user can re-run it.
• Continuation: the user proceeds to the Egg stage.

FR-3 — Fill the person's head with egg-yolk liquid. As a Pengguna, I should be able to make the person's head penuh dengan cairan kuning telur (full of egg-yolk liquid), so that the head is covered in yolk as the source requires.

• Provenance: explicit.
• Trigger/input: the user runs the Egg stage on Actions.
• Observable result/state change: the person's head is visibly covered in egg-yolk liquid; the yolk coverage is recorded and later shown on Results.
• Access state: anonymous; no identity required.
• Failure/recovery: if the stage fails to land, the Egg trigger remains available and the user can re-run it.
• Continuation: the user proceeds to Results.

FR-4 — Fill the person's head with broken eggshell fragments. As a Pengguna, I should be able to make the person's head penuh dengan pecahan cangkang telur (full of broken eggshell fragments), so that shell fragments are caught in the head as the source requires.

• Provenance: explicit.
• Trigger/input: the user runs the Egg stage on Actions.
• Observable result/state change: broken eggshell fragments are visibly caught in the person's head; the shell-shard count is recorded and later shown on Results.
• Access state: anonymous; no identity required.
• Failure/recovery: if the stage fails to land, the Egg trigger remains available and the user can re-run it.
• Continuation: the user proceeds to Results.

FR-5 — Learn what the product does before running it. As a Pengguna, I should see, on the public entry surface, what tepung-telur does — that it makes a person soaking wet and fills their head with flour, egg-yolk liquid, and eggshell fragments — so that I know what I am about to trigger.

• Provenance: required_inference.
• Trigger/input: the user opens Landing.
• Observable result/state change: the product's promise and the four materials are presented; the MULAI BASAH trigger is available.
• Access state: anonymous; no identity required.
• Failure/recovery: if the hero photograph fails to load, the headline, body copy, and trigger remain readable and operable.
• Continuation: the user activates MULAI BASAH and moves to Actions.

FR-6 — Trigger the mess-making sequence. As a Pengguna, I should be able to trigger the mess-making action from the entry surface, so that I can start the sequence without friction.

• Provenance: required_inference.
• Trigger/input: the user activates MULAI BASAH on Landing.
• Observable result/state change: the user arrives on Actions with the three stages available.
• Access state: anonymous; no identity required.
• Failure/recovery: if navigation fails, the trigger remains available and can be activated again.
• Continuation: the user runs the Drench stage.

FR-7 — See the final condition of the person. As a Pengguna, I should see the final result — the person soaking wet with a head full of flour, egg-yolk liquid, and eggshell fragments — so that I can observe the outcome the source requires.

• Provenance: required_inference.
• Trigger/input: the user proceeds to Results after running the stages.
• Observable result/state change: the after photograph and the four counters (WETNESS, TEPUNG, KUNING TELUR, CANGKANG) are shown.
• Access state: anonymous; no identity required.
• Failure/recovery: if the after photograph fails to load, the counters and labels remain readable and the return control stays operable.
• Continuation: the user can return to Actions and run the mess again.

FR-8 — Run the mess again. As a Pengguna, I should be able to return from Results to Actions and run the mess again, so that I can repeat the outcome.

• Provenance: required_inference.
• Trigger/input: the user activates the return control on Results.
• Observable result/state change: the user is back on Actions with the stages available.
• Access state: anonymous; no identity required.
• Failure/recovery: if the return control fails, it remains available and can be activated again.
• Continuation: the user re-runs the stages and returns to Results.

4. User Personas

Pengguna

Product context. Pengguna is the only accepted active human actor in tepung-telur. They arrive at a public web toy with a sense of humour and, typically, a phone. They are not looking for a utility; they are looking for a stunt — a comic, physical, photographed outcome they can trigger and watch.

Primary goal. To make a person basah kuyup and to fill that person's head with tepung, cairan kuning telur, and pecahan cangkang telur — and then to see the final condition.

Distinct accepted responsibilities.

• Learning what the product does on the public entry surface before running anything.
• Triggering the mess-making sequence.
• Running each of the three stages — Drench, Flour, Egg — so that all four materials land.
• Observing the final condition: wetness, flour coverage, egg-yolk coverage, and eggshell fragments.
• Re-running the mess if they want to see it again.

Relevant inputs or decisions. Pengguna decides when to start (MULAI BASAH), decides when to run each stage, and decides whether to proceed to Results or run the mess again. There are no configuration choices, no accounts, and no permissions to manage.

Interactions with other accepted participants. None. Pengguna is the sole accepted human actor. The person who gets drenched and covered is the subject of the outcome, not a separate accepted persona with its own product responsibilities.

Observable success. Pengguna sees the person soaking wet with a head visibly covered in flour, egg-yolk liquid, and broken eggshell fragments, with the four result counters reading their final values on Results.

What makes this role's work different. Pengguna's work is entirely initiation and observation: there is no data entry, no approval, no administration, and no continuity to maintain. The role exists to trigger one comic physical outcome and watch it land.

5. Core User Flows

Flow A — Pengguna learns the product and starts the mess

1. Starting context. Pengguna opens tepung-telur on a phone or desktop browser. No account, no sign-in, no prior state.
2. Landing. The Landing page renders: the yolk-gold headline block carrying TEPUNG · TELUR in Alfa Slab One, the full-bleed flash-lit photograph of the soaked, flour-and-yolk-caked head bleeding off the right edge, one line of Archivo body copy, the MULAI BASAH trigger pinned to the block's bottom-left with its 6px ink offset shadow, and the material marquee running along the bottom edge.
3. Reading. Pengguna reads the headline and body copy and understands the promise: a person made soaking wet, head filled with flour, egg-yolk liquid, and eggshell fragments.
4. Decision. Pengguna decides to start.
5. Action. Pengguna activates MULAI BASAH.
6. Observable result. Pengguna arrives on Actions, where the three stages — Drench, Flour, Egg — are presented as stacked poster panels, each with its photographed material swatch and an oversized trigger.
7. Failure/recovery. If the hero photograph failed to load, the headline, body copy, and trigger were still readable and operable, and Pengguna proceeded normally.
8. Next step. Pengguna runs the Drench stage (Flow B).

Flow B — Pengguna runs the three stages and makes the mess

1. Starting context. Pengguna is on Actions. No stage has landed yet; the progress indicator shows nothing recorded.
2. Drench. Pengguna activates the Drench panel's oversized trigger. The drench animation lands in four hard steps, with a visible frame 03/04-style caption. Observable result: the person is basah kuyup, and the progress indicator records the Drench stage.
3. Flour. Pengguna activates the Flour panel's oversized trigger. The flour animation lands in three hard steps, with its frame-counter caption. Observable result: the person's head is full of tepung, and the progress indicator records the Flour stage.
4. Egg. Pengguna activates the Egg panel's oversized trigger. The yolk animation lands in five hard steps and the shell shards drop with a single settle, each with its frame-counter caption. Observable result: the person's head is full of cairan kuning telur and pecahan cangkang telur, and the progress indicator records the Egg stage.
5. Completion. All three stages have landed; the path to Results is available.
6. Failure/recovery. If any stage fails to land, that stage's trigger remains available and the progress indicator does not record it. Pengguna re-runs that stage; stages that already landed are not lost.
7. Next step. Pengguna proceeds to Results (Flow C).

Flow C — Pengguna views the final condition

1. Starting context. Pengguna has run all three stages on Actions and proceeds to Results.
2. Results. The Results page renders as a dark gallery: one enormous full-bleed 'after' photograph with a torn-paper caption strip, and the mess ticket strip — four stamped, misregistered ticket panels with oversized numerals, torn edges, and red stamp marks: WETNESS, TEPUNG, KUNING TELUR, CANGKANG.
3. Observation. Pengguna sees the person soaking wet with a head covered in flour, egg-yolk liquid, and broken eggshell fragments, and reads the four counters at their final values.
4. Observable result. The final condition of the person is fully presented.
5. Failure/recovery. If the after photograph fails to load, the four counters and their labels remain fully readable and the return control stays operable.
6. Continuation. Pengguna either stops here, or activates the return control to go back to Actions and run the mess again (Flow D).

Flow D — Pengguna runs the mess again

1. Starting context. Pengguna is on Results and wants to repeat the outcome.
2. Action. Pengguna activates the return control.
3. Observable result. Pengguna is back on Actions with the three stages available.
4. Repeat. Pengguna re-runs the stages (Flow B) and returns to Results (Flow C).
5. Failure/recovery. If the return control fails, it remains available and can be activated again.
6. Continuation. The cycle can repeat as many times as Pengguna wants.

6. Visuals, Colors and Theme

Muse and headline. The creative direction is Stefan Sagmeister — handmade chaos, proudly staged: an egg-and-flour mess treated as a designed artefact. The headline idea is that the interface itself looks like it was built on a kitchen floor: real materials, imperfection on purpose, photographed handmade typography. Type made from flour, yolk, and shell — not a vector font.

Mode. Light mode is the default ground; the Results reveal inverts to a dark ink ground.

Colour tokens (light mode).

Colour tokens (dark mode — Results reveal). Ink ground #1A1614 with cream type #F4EFE4, retaining the same yolk gold #E8A317 and shell red #C7332B signals.

Colour rules. No blue anywhere. Colour appears as flat poster fields and hard-edged bands, never gradient blends. The only gradients allowed are the photographic sheen on wet skin and yolk.

Typography.

Type scale (1.333 modular). Display clamp(56px, 11vw, 128px); h2 clamp(32px, 5vw, 56px); h3 28px; body 18px/1.6; label 13px caps with 0.12em tracking; counter numerals clamp(40px, 8vw, 96px) in Alfa Slab One.

Handmade letterforms. Some display words are replaced by photographed handmade letterforms built from flour, yolk, and shell shards, placed inline inside the Alfa Slab One headline.

Shape language. Hard-edged poster blocks and thick 4px ink rules. Deliberately misregistered stamp borders, torn-paper edges, and panels rotated 1–3°. Buttons are chunky rectangles with a 6px offset ink shadow, like a letterpress block — not pills. The only round things are the eggs and shell shards themselves, which are photographic, not UI.

Layout. An asymmetric editorial grid that breaks itself on purpose: a 12-column base where the hero headline runs off the left edge and the subject photograph bleeds off the right. Section openers are full-bleed colour bands — yolk gold, shell red, ink — with type stamped across them. Actions is a three-stage sequence — Drench, Flour, Egg — laid out as three stacked poster panels, each with its own photographed material swatch and a single oversized trigger. Results is a dark gallery: one enormous full-bleed 'after' photograph with a torn-paper caption strip and four counters arranged as stamped tickets.

Imagery. Art-directed photography of one real subject, shot close: hair matted and dripping, skin glistening, flour caked into eyebrows, yolk running down the temple, shell fragments caught in the hair. High-contrast flash-lit against a plain cream or ink backdrop, deliberately un-retouched, with visible grains and drips. Secondary imagery: macro shots of cracked shell halves, a flour cloud mid-fall, yolk pooling on tile. Hand-built typography photographed on a kitchen table. No vector illustration, no stock people, no 3D blobs.

Readable text and controls. Headlines, wordmarks, labels, numbers, cards' 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. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut exactly as the direction asks, as long as they cover no readable text or control.

7. Signature Design Concept

The kitchen-floor poster.

The public entry is composed as a single photographed poster, not a SaaS hero. A full-bleed flash-lit photograph of the soaked, flour-and-yolk-caked head bleeds off the right edge at 60% of the viewport, cropped tight so the mess fills the frame. Overlapping it from the left, a yolk-gold flat colour block occupies columns 1–7 and carries the headline TEPUNG · TELUR in Alfa Slab One at clamp(56px, 11vw, 128px). The word TELUR is partly replaced by a photographed handmade yolk letterform that overhangs the block's edge — the headline is physically built from the product's own materials.

Beneath the headline sits one line of Archivo body copy and a single chunky letterpress button, MULAI BASAH, pinned to the block's bottom-left with a 6px ink offset shadow. A thin ink rule runs the full width behind the block. A slow marquee of material words — tepung · telur · basah kuyup — crosses the bottom edge.

Nothing is centred. Nothing floats. There is no gradient blob. The composition is deliberately misregistered and asymmetric, and it recomposes only accepted content: the product's promise, the four materials, and the single trigger that starts the mess.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief.

• Focal subject. The full-bleed flash-lit photograph of the soaked, flour-and-yolk-caked head, bleeding off the right edge, with the yolk-gold headline block overlapping it from the left.
• Input → transformation → outcome thesis. The user's arrival composes the poster: the headline block and the photographed head settle into their misregistered positions, the handmade yolk letterform overhangs the block's edge, and the material marquee begins its slow crossing of the bottom edge. The outcome is a composed, handmade poster that reads as a photographed art prank — and the MULAI BASAH trigger sits ready at the block's bottom-left.
• Motion vocabulary. Stop-motion feel: state changes land in stepped frames rather than eased tweens. The marquee moves slowly and continuously. Hover on a stage panel swaps the material photograph with a 120ms cut, with no lift.
• Composed first frame. The yolk-gold block occupying columns 1–7 with TEPUNG · TELUR set huge and tight; the photographed head bleeding off the right edge; the ink rule running full width behind the block; the MULAI BASAH button pinned bottom-left with its 6px ink offset shadow; the marquee at the bottom edge.
• Reduced-motion state. Everything halts. The marquee stops and shows whole, wrapped items. The final frame is shown. No stepped animation plays.

Stage animations. The drench animation splashes in 4 hard steps, flour puffs in 3, yolk drips in 5, and shell shards drop with a single settle. Each carries a visible frame-counter caption (frame 03/04) as a deliberate handmade tell.

Section transitions. Full-bleed colour bands — yolk gold, shell red, ink — with type stamped across them at an angle, breaking the grid between Landing, Actions, and Results.

Marquee behaviour. The body-level marquee of material words runs along the bottom edge of the hero, pauses on hover, and stops entirely under reduced motion. Under reduced motion it shows whole items, wrapped into rows or in a horizontally scrollable row whose further items are reached by scrolling.

Prohibited motion. No smooth eased tweens and no bouncy spring physics. Motion must feel stepped and physical.

9. Non-Functional Requirements

NFR-1 — Anonymous access. All three pages — Landing, Actions, and Results — are reachable without an account, sign-in, or any identity establishment. Provenance: explicit planning scope (access_requirement: none for all three surfaces). Rationale: no accepted journey requires durable actor-specific state to be privately owned or resumed.

NFR-2 — Readable text and controls at every viewport. Headlines, wordmarks, labels, numbers, cards' text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit. No other element covers any part of them. Provenance: explicit creative direction. Rationale: the direction's deliberate misregistration and bleed must never cost readability or operability.

NFR-3 — Reduced-motion support. Under prefers-reduced-motion, all motion halts, the final frame is shown, and moving content shows whole, wrapped items. Provenance: explicit creative direction. Rationale: accessibility of the stepped, marquee-driven motion language.

NFR-4 — No blue. No blue or indigo UI colour appears anywhere in the product. Provenance: explicit creative direction. Rationale: the palette is photographic naturals — cream, ink, yolk gold, shell red, warm grey.

NFR-5 — No forbidden typefaces. Inter, Roboto, Arial, Helvetica, Poppins, and system-ui are not used for headings or body. Provenance: explicit creative direction.

NFR-6 — No forbidden visual patterns. No gradient-blob heroes, no glassmorphism panels, no hover-lift card grids, no clean vector illustration or emoji standing in for the photographed mess, no centred headline-plus-subtext-plus-button SaaS hero composition, and no retouched, glossy, advertising-clean skin. Provenance: explicit creative direction.

NFR-7 — Photographic integrity. Imagery is art-directed photography of one real subject, deliberately un-retouched, with visible grains and drips. Provenance: explicit creative direction.

10. Tech Stack

The authoritative source does not specify a technology stack. The following are coherent defaults for a small, anonymous, three-page interactive web toy with stepped animation and photographic imagery.

• Frontend: React (web). [Default — not specified by user]
• Styling: CSS with custom properties for the colour and type tokens; clamp() for the type scale. [Default — not specified by user]
• Animation: CSS stepped animations (animation-timing-function: steps(...)) for the stop-motion stage frames and the marquee, with prefers-reduced-motion media queries. [Default — not specified by user]
• Backend: Python / FastAPI, serving the page shell and any static assets. [Default — not specified by user]
• Storage: none required. The product holds no durable user state and no identity. [Default — not specified by user]
• Containerisation: Docker / docker-compose for local and single-host deployment. [Default — not specified by user]
• Orchestration: Kubernetes is not required for this deployment shape and is not included. [Default — not specified by user]

11. Assumptions and Constraints

Assumptions.

• A-1. The person who is made soaking wet and whose head is filled with flour, egg-yolk liquid, and eggshell fragments is the subject of the outcome, not a separate accepted persona with its own product responsibilities. [Assumption — narrow, consistent with the closed persona catalog]
• A-2. The three pages — Landing, Actions, and Results — are the complete and final page inventory for this generation. [Assumption — from the versioned page contract]
• A-3. The mess outcome is produced and presented entirely within the first-party application; no external service or provider is an accepted actor. [Assumption — no provider is named in the source]
• A-4. The four result counters (WETNESS, TEPUNG, KUNING TELUR, CANGKANG) are the observable representation of the four required outcomes. [Assumption — from the creative direction's signature move]

Constraints.

• C-1. The product must make the person basah kuyup. [Explicit]
• C-2. The product must make the person's head full of tepung. [Explicit]
• C-3. The product must make the person's head full of cairan kuning telur. [Explicit]
• C-4. The product must make the person's head full of pecahan cangkang telur. [Explicit]
• C-5. All three pages are anonymous; no account, sign-in, or identity establishment is introduced. [Explicit planning scope]
• C-6. No blue or indigo UI colour; no Inter, Roboto, Arial, Helvetica, Poppins, or system-ui for headings or body; no gradient-blob heroes, glassmorphism, hover-lift card grids, vector illustration, or emoji standing in for the photographed mess. [Explicit creative direction]
• C-7. Readable text and controls stay whole and uncovered at 375px, 768px, and 1280px. [Explicit creative direction]
• C-8. Motion is stepped and physical; no smooth eased tweens and no bouncy spring physics. [Explicit creative direction]
• C-9. No adjacent capabilities are introduced: no accounts, profiles, social sharing, leaderboards, saved history, notifications, or payments. [Constraint — nothing in the authoritative source accepts them]

12. Glossary

• tepung-telur — The product name; literally "flour–egg". The novelty web experience described in this document.
• Pengguna — The single accepted active human persona; the person who triggers and observes the mess.
• Basah kuyup — Soaking wet; the drenched state of the person's body.
• Tepung — Flour; the material that fills the person's head.
• Cairan kuning telur — Egg-yolk liquid; the material that fills the person's head.
• Pecahan cangkang telur — Broken eggshell fragments; the material caught in the person's head.
• Drench — The first stage on Actions: making the person soaking wet.
• Flour — The second stage on Actions: filling the person's head with flour.
• Egg — The third stage on Actions: filling the person's head with egg-yolk liquid and broken eggshell fragments.
• Mess ticket strip — The four stamped, misregistered ticket panels on Results showing WETNESS, TEPUNG, KUNING TELUR, and CANGKANG.
• Frame-counter caption — The visible frame 03/04-style caption on each stage animation, a deliberate handmade tell.
• Material marquee — The body-level ticker of material words (tepung · telur · basah kuyup) running along the bottom edge of the hero.