System Requirements Document for ayam-geprek

1. Introduction

ayam-geprek is a public website about ayam geprek — Indonesian smashed fried chicken with sambal — built to be bagus dan enak dilihat: visually striking and genuinely appetising to look at. The product intent is a single, high-craft public web experience that presents the ayam geprek theme with a distinctive, non-template visual identity, so that a hungry visitor immediately understands what the food is and feels the punchy, saturated, joyful energy of the dish.

The audience is the Pengunjung Situs — a casual, mobile-first visitor who arrives curious or hungry, browses the ayam geprek content, and succeeds when the content is presented in a way that is pleasant, legible, and visually delightful to look at.

This document defines the current delivery: one public entry surface, its content and component coverage, the visual and motion system, and the constraints that keep the experience readable and accessible at every viewport.

2. System Overview

The current product is a public, single-surface website with no account, no login, and no protected state. All accepted behavior happens on one publicly reachable page, Landing, which is the public entry surface for the ayam geprek theme.

Actors

• Pengunjung Situs (human, active) — the visitor who views and explores the ayam geprek content.
• System / application (non-persona) — serves the page, renders the WebGL hero subject, and runs the motion and marquee behavior.

Accepted behavior

• A website themed around ayam geprek exists and is publicly reachable.
• The website has a high-quality, pleasant visual presentation as a first-class requirement, not a decoration.
• The presentation follows the supplied creative direction: sensual pop minimalism, candy-pink and acid-lime palette, rounded Comfortaa/Quicksand typography, blob and capsule shapes, asymmetric flowing layout, expressive motion, and a real-time WebGL hero subject.

Ownership

• The Landing page is owned by the application and is publicly accessible with no access requirement.
• There is no provider-owned or external-destination surface in the current scope.
• There is no headless or API-only delivery in the current scope.

Narrow exclusions

• No ordering, payment, checkout, delivery, or reservation capability is in scope. The hero CTA "Pesan Sekarang" is a visual and navigational element of the presentation, not an accepted transactional workflow.
• No user accounts, profiles, saved state, or personalization are in scope.
• No photographic food imagery is used; the direction is 3D renders and illustration.
• No blue or indigo appears anywhere in the palette.

2a. Product Interpretation and Delivery Boundary

The user asked for a website about ayam geprek that is good and pleasant to look at. That request is a visual-presentation commitment: the deliverable is a public page whose content is the ayam geprek theme and whose quality bar is aesthetic. The request does not name ordering, accounts, admin tools, or any transactional flow, and none are inferred here.

Delivery and access ownership. The site is delivered as a first-party public web page. Access is anonymous and open: the visitor needs no identity, no session, and no credential to see everything the product offers. Because no accepted journey requires durable actor-specific state, a commitment, an entitlement, or a value transfer bound to a particular person, no application-owned identity is established and no authentication surface exists. The Landing page is the anonymous entry boundary itself, so there is no separate pre-identity lifecycle to own.

Current vs. future. Everything in this document is current. No future-horizon requirements were accepted in the authoritative thread; the only forward-looking material is the non-binding idea space noted in Section 11, which is explicitly out of current scope and out of acceptance.

2c. Page Content and Component Coverage

Landing

Information and state

• The page is a single scrolling public document. There is no authenticated state, no user-specific state, and no persisted state.
• Content is static editorial content about ayam geprek, arranged in alternating cream (#FFF3E6) and pink (#FF4D6D) grounds separated by curved SVG wave dividers.
• The only runtime state is presentational: hero subject rotation/bob phase, marquee scroll position, sticky-navigation shrink state, and per-section reveal progress.

Primary actions

• Read the hero headline and subhead and understand the ayam geprek theme.
• Scroll through the page sections to view the ayam geprek content.
• Hover or tap a menu capsule card to see its lime hover glow and soft bounce.
• Use the floating pill navigation bar to move between page sections.

Supporting actions

• Hover the marquee band to pause it.
• Follow the hero pill CTA "Pesan Sekarang" as a navigational jump within the page.

Domain entities

• Dish — an ayam geprek menu item: name, short description, chunky rounded icon, and its glossy capsule card presentation.
• Hero subject — the glossy 3D chicken drumstick with a lime-green sambal drip.
• Decorative element — organic pink and lime blobs, curved SVG wave dividers, and the lime-on-pink marquee band.

Component responsibilities

• Floating pill navigation bar — sticky at the top, icon + label items, rounded icons, shrinks slightly on scroll; must remain fully readable and must not cover any readable text or control.
• Hero colour field — full-bleed pink (#FF4D6D) block; hosts the stacked headline, subhead, pill CTA, and the WebGL drumstick subject.
• Hero headline block — "AYAM GEPREK" in Comfortaa 700, white, clamp(48px, 12vw, 128px), stacked and slightly off-axis to the left.
• Hero subhead — "Pedasnya nagih, kriuknya juara" in Quicksand 18px.
• Hero CTA — pill button "Pesan Sekarang", lime (#B4E600) fill with charcoal (#1D1B1A) text.
• WebGL hero subject — real-time glossy 3D chicken drumstick, floating at roughly 60% viewport height, casting a soft shadow, rotating on a 10s loop and bobbing.
• Curved SVG wave dividers — organic curves between every section, filled with alternating cream and pink.
• Marquee band — pink band carrying repeating "GEPREK! GEPREK! GEPREK!" in lime, scrolling horizontally, pausing on hover.
• Menu capsule cards — glossy pill/capsule cards in a loose staggered grid, generous 24–32px radii, subtle inner glow, chunky rounded dish icon, lime hover glow, soft bounce on tap.
• Decorative blobs — soft pink (#FFB3C1) and lime organic shapes placed as decoration only.

States

• Loading — the WebGL hero subject initialises; the hero colour field, headline, subhead, and CTA render immediately and are never blocked by the 3D subject. If the 3D subject is still initialising, the hero shows its composed static pose.
• Empty — not applicable; the page has no user-generated or fetched collection that can be empty.
• Success — the page renders fully: hero, wave dividers, menu capsule cards, marquee band, and navigation are all visible and readable at 375px, 768px, and 1280px.
• Error / fallback — if WebGL is unavailable or the 3D subject fails to load, the hero falls back to a static composed pose of the same subject so the hero composition, headline, subhead, and CTA remain intact and readable.
• Reduced motion — with prefers-reduced-motion, all motion freezes to static poses: the drumstick holds a static pose, the sambal blob stops morphing, section reveals appear in place, and the marquee becomes a usable static arrangement (items wrapped into rows or horizontally scrollable so each item can be brought fully into view).
• Recovery — a failed or unavailable 3D subject never removes content; the visitor can continue scrolling and reading the entire page.

3. Functional Requirements

FR-1 — Ayam geprek themed website (provenance: explicit) As a Pengunjung Situs, I should land on a public website whose subject is ayam geprek, so that I immediately understand what the site is about.

• Trigger: the visitor opens the site URL.
• Observable result: the Landing page renders with ayam geprek content — the hero headline "AYAM GEPREK", the subhead "Pedasnya nagih, kriuknya juara", and ayam geprek dish content.
• Access state: public, anonymous, no identity required.
• Failure/recovery: if the WebGL hero subject cannot initialise, the page still renders its content with a static hero pose.
• Continuation: the visitor scrolls to explore the remaining sections.
• Acceptance: the page is reachable without credentials and its content is identifiably about ayam geprek.

FR-2 — Visually appealing presentation (provenance: explicit) As a Pengunjung Situs, I should see the ayam geprek content presented with a high-quality, pleasant visual treatment, so that looking at the site is itself enjoyable.

• Trigger: the visitor views the page at any supported viewport.
• Observable result: the page applies the full visual system — candy-pink and cream grounds, acid-lime accents, rounded Comfortaa headings, Quicksand body text, blob and capsule shapes, curved wave dividers, glossy 3D food renders, and expressive motion.
• Access state: public, anonymous.
• Failure/recovery: if a decorative or 3D element fails, the layout degrades to a still-composed, still-readable arrangement rather than breaking.
• Continuation: the visitor continues scrolling and reading.
• Acceptance: the rendered page matches the specified palette, typography, shape language, and layout, and contains no blue or indigo.

FR-3 — Readable content at every viewport (provenance: explicit, from the direction's readability rule) As a Pengunjung Situs, I should be able to read every headline, label, number, card text, and control in full at 375px, 768px, and 1280px, so that the visual boldness never costs me the information.

• Trigger: the visitor views the page at 375px, 768px, or 1280px width.
• Observable result: headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them.
• Access state: public, anonymous.
• Failure/recovery: where a gesture would crop or cover readable text or a control, the gesture is carried by imagery or decoration instead, keeping the text and control whole.
• Continuation: the visitor reads and interacts normally at any of the three widths.
• Acceptance: no readable text or control is clipped, covered, or pushed outside the viewport at any of the three widths.

FR-4 — Moving and scrollable content remains fully readable (provenance: explicit, from the direction's readability rule) As a Pengunjung Situs, I should be able to read every item in the marquee and any horizontally scrollable row as it passes or as I scroll it, so that motion never hides content from me.

• Trigger: the marquee scrolls, or the visitor scrolls a horizontally scrollable row.
• Observable result: moving and scrollable content may cross the viewport or container edge by design, and every item becomes fully readable as it passes or when brought into view.
• Access state: public, anonymous.
• Failure/recovery: with prefers-reduced-motion, the marquee and any scrollable row provide a usable static arrangement — items wrapped into rows or horizontally scrollable so each item can be brought fully into view.
• Continuation: the visitor reads the items and continues down the page.
• Acceptance: each marquee item becomes fully readable as it passes; each scrollable-row item can be brought fully into view; a scrollable row need not show every item fully at once.

FR-5 — WebGL hero subject (provenance: explicit, from the direction's hero dimensionality) As a Pengunjung Situs, I should see a real-time glossy 3D chicken drumstick as the hero subject, so that the entry to the site feels as punchy and indulgent as the food.

• Trigger: the visitor loads the Landing page.
• Observable result: a glossy 3D chicken drumstick in warm browns with a lime-green sambal drip floats at roughly 60% viewport height over the full-bleed pink field, casts a soft shadow, rotates slowly on a 10s loop, and bobs.
• Access state: public, anonymous.
• Failure/recovery: if WebGL is unavailable or the subject fails to load, the hero falls back to a static composed pose of the same subject; the headline, subhead, and CTA remain intact and readable.
• Continuation: the visitor reads the hero and scrolls on.
• Acceptance: the hero subject renders in real time and animates as specified, or degrades to the static pose without losing hero content.

FR-6 — Expressive motion system (provenance: explicit, from the direction's motion spec) As a Pengunjung Situs, I should experience expressive motion across the page, so that the site feels alive and playful rather than static.

• Trigger: page load, hover, tap, and scroll.
• Observable result: the 3D drumstick rotates and bobs on load; the sambal blob morphs gently; buttons have a soft bounce on hover; section reveals slide up with a springy ease; the "GEPREK! GEPREK! GEPREK!" marquee runs across the pink band.
• Access state: public, anonymous.
• Failure/recovery: all motion respects prefers-reduced-motion by freezing to static poses.
• Continuation: the visitor continues browsing with motion or with static poses.
• Acceptance: each listed motion behavior is present, and reduced-motion freezes all of it to static poses.

FR-7 — Floating pill navigation (provenance: explicit, from the direction's layout spec) As a Pengunjung Situs, I should have a floating pill navigation bar with icon + label items that sticks to the top and shrinks slightly on scroll, so that I can move between sections without losing my place.

• Trigger: the visitor scrolls the page.
• Observable result: the pill bar remains sticky at the top, shows rounded icons with labels, and shrinks slightly on scroll.
• Access state: public, anonymous.
• Failure/recovery: the bar never covers readable text or controls; if space is tight at 375px, its items wrap or scale to stay whole.
• Continuation: the visitor selects a section and continues reading.
• Acceptance: the bar is sticky, shrinks on scroll, and its labels and icons remain fully readable at all three widths.

FR-8 — Menu capsule cards (provenance: explicit, from the direction's layout spec) As a Pengunjung Situs, I should see ayam geprek menu items as glossy capsule cards in a loose staggered grid, so that browsing the dishes feels appetising and playful.

• Trigger: the visitor scrolls to the menu section.
• Observable result: each dish appears as a glossy capsule card with a chunky rounded icon, generous 24–32px radii, a subtle inner glow, a lime hover glow, and a soft bounce on tap.
• Access state: public, anonymous.
• Failure/recovery: if a card's icon fails to render, the card's text remains fully readable and the card keeps its shape.
• Continuation: the visitor hovers or taps cards and continues down the page.
• Acceptance: cards render in a loose staggered grid with the specified shape, glow, and bounce behavior, and their text stays whole at all three widths.

FR-9 — Wave-divided section rhythm (provenance: explicit, from the direction's signature moves) As a Pengunjung Situs, I should see curved SVG wave dividers between every section, filled with alternating cream and pink, so that the page reads as one flowing composition.

• Trigger: the visitor scrolls between sections.
• Observable result: each section boundary is a soft organic curve alternating cream (#FFF3E6) and pink (#FF4D6D).
• Access state: public, anonymous.
• Failure/recovery: if a divider fails to render, the section grounds still alternate and content remains readable.
• Continuation: the visitor continues through the sections.
• Acceptance: wave dividers appear between sections and alternate the two grounds.

FR-10 — Marquee band (provenance: explicit, from the direction's signature moves) As a Pengunjung Situs, I should see a lime-on-pink marquee band repeating "GEPREK! GEPREK! GEPREK!" that scrolls horizontally and pauses on hover, so that the page carries the dish's loud energy.

• Trigger: the band enters the viewport; the visitor hovers it.
• Observable result: the text scrolls horizontally in lime on a pink band and pauses while hovered.
• Access state: public, anonymous.
• Failure/recovery: with prefers-reduced-motion, the band becomes a usable static arrangement where each item can be brought fully into view.
• Continuation: the visitor continues scrolling.
• Acceptance: the band scrolls, pauses on hover, and every item becomes fully readable as it passes.

FR-11 — Hero call to action (provenance: explicit, from the direction's hero spec) As a Pengunjung Situs, I should see a pill CTA "Pesan Sekarang" in lime with charcoal text beneath the hero headline, so that the hero composition is complete and the next step is obvious.

• Trigger: the visitor views the hero.
• Observable result: a pill-shaped lime (#B4E600) button with charcoal (#1D1B1A) text labelled "Pesan Sekarang" sits beneath the headline.
• Access state: public, anonymous.
• Failure/recovery: the button remains fully readable and inside the viewport at 375px, 768px, and 1280px.
• Continuation: the visitor activates it as a navigational jump within the page.
• Acceptance: the CTA renders with the specified shape, colours, and label, and stays whole at all three widths.

4. User Personas

Pengunjung Situs

Product context. The visitor arrives at a public website about ayam geprek, most likely on a phone, most likely hungry or curious. They have no account, no prior relationship with the site, and no obligation to stay. Their first impression is formed in the hero, within a second or two of the page painting.

Primary goal. To see ayam geprek presented well — to look at a page that is bagus dan enak dilihat, where the food theme is immediately clear and the presentation is genuinely pleasant to look at.

Distinct accepted responsibilities. The visitor is the sole active human actor in the current product. Their work is entirely perceptual and exploratory: they read the hero, scroll the sections, look at the dish cards, and take in the motion and colour. They initiate nothing that changes durable state, and nothing they do is stored or resumed.

Relevant inputs or decisions. The visitor decides whether to keep scrolling, whether to hover or tap a menu capsule card, whether to pause the marquee, and whether to follow the hero CTA. Each of these is a presentational interaction with an immediate visual result.

Interactions with other accepted participants. There are no other accepted human participants in the current scope. The visitor interacts only with the page itself and the system that renders it.

Observable success. The visitor can read every headline, label, and card text in full at their viewport width; the page shows the ayam geprek theme with the specified candy-pink, cream, and lime treatment; the 3D drumstick hero renders and animates (or degrades gracefully to a static pose); and the visitor can scroll the whole page without any text or control being clipped or covered.

Constraints carried from source. The visitor's experience must never trade readability for visual boldness: at 375px, 768px, and 1280px, readable text and controls stay whole. Motion must respect prefers-reduced-motion. No blue or indigo may appear. No photographic food imagery is used.

5. Core User Flows

Flow 1 — Pengunjung Situs arrives and takes in the ayam geprek theme

1. Starting context. The visitor is on a phone or desktop browser, with no account and no prior session, and opens the ayam-geprek site URL.
2. Entry. The Landing page loads. It is publicly reachable with no access requirement; no identity is requested or established.
3. First frame. The full-bleed pink (#FF4D6D) hero field paints immediately, with the stacked headline "AYAM GEPREK" in white Comfortaa 700 at clamp(48px, 12vw, 128px) on the left, the subhead "Pedasnya nagih, kriuknya juara" in Quicksand 18px, and the lime pill CTA "Pesan Sekarang" with charcoal text beneath.
4. Hero subject. The real-time glossy 3D chicken drumstick — warm browns with a lime-green sambal drip — floats at roughly 60% viewport height, casts a soft shadow, rotates slowly on a 10s loop, and bobs.
5. Observable result. The visitor sees an unmistakably ayam geprek page whose hero is a poster-like colour block with the 3D subject as the focal point.
6. Failure/recovery. If WebGL is unavailable or the subject fails to load, the hero falls back to a static composed pose of the same subject; the headline, subhead, and CTA remain intact and readable, and the visitor loses no content.
7. Continuation. The visitor scrolls down into the content sections.

Flow 2 — Pengunjung Situs scrolls the section rhythm and reads the content

1. Starting context. The visitor has seen the hero and begins scrolling.
2. Navigation. The floating pill navigation bar sticks to the top, showing rounded icons with labels, and shrinks slightly as the visitor scrolls.
3. Section transitions. Each section boundary is a curved SVG wave divider filled with alternating cream (#FFF3E6) and pink (#FF4D6D), so the page reads as one flowing composition.
4. Reveals. Sections slide up with a springy ease as they enter view.
5. Observable result. The visitor moves through alternating cream and pink grounds, reading the ayam geprek content in Quicksand 18px with 1.6 line-height on the cream and white surfaces.
6. Failure/recovery. If a divider or reveal fails, the section grounds still alternate and all content remains readable in place.
7. Continuation. The visitor reaches the menu section.

Flow 3 — Pengunjung Situs browses the menu capsule cards

1. Starting context. The visitor reaches the menu section while scrolling.
2. Presentation. Ayam geprek dishes appear as glossy capsule cards in a loose, staggered grid rather than a rigid table, each with generous 24–32px radii, a subtle inner glow, and a chunky rounded icon of the dish.
3. Actor action. The visitor hovers a card and sees a lime hover glow; on tap the card gives a soft bounce.
4. Observable result. The visitor can read each dish's name and short description in full, and the card responds with the specified glow and bounce.
5. Failure/recovery. If a card's icon fails to render, the card's text remains fully readable and the card keeps its shape.
6. Continuation. The visitor continues past the menu into the marquee band.

Flow 4 — Pengunjung Situs encounters the marquee band

1. Starting context. The visitor scrolls into the marquee band.
2. Presentation. A pink band carries repeating "GEPREK! GEPREK! GEPREK!" in lime, scrolling horizontally.
3. Actor action. The visitor hovers the band; the marquee pauses.
4. Observable result. Every marquee item becomes fully readable as it passes; the visitor can read the repeated word in full.
5. Failure/recovery. With prefers-reduced-motion, the band becomes a usable static arrangement — items wrapped into rows or horizontally scrollable so each item can be brought fully into view.
6. Continuation. The visitor continues to the end of the page.

Flow 5 — Pengunjung Situs reads the page at a narrow or wide viewport

1. Starting context. The visitor views the page at 375px, 768px, or 1280px width.
2. Actor action. The visitor reads headlines, labels, numbers, card text, and controls, and scrolls the page.
3. Observable result. Every headline, wordmark, label, number, card text, and control stays entirely inside the viewport and its container, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them.
4. Failure/recovery. Where a gesture would crop, clip, or cover readable text or a control, the gesture is carried by imagery or decoration instead, keeping the text and control whole.
5. Continuation. The visitor reads and interacts normally at that width.

Flow 6 — Pengunjung Situs uses the hero CTA

1. Starting context. The visitor is at the hero and has read the headline and subhead.
2. Actor action. The visitor activates the lime pill CTA "Pesan Sekarang".
3. Observable result. The CTA behaves as a navigational jump within the page; it remains fully readable and inside the viewport at all three widths.
4. Continuation. The visitor arrives at the corresponding section and continues reading.

6. Visuals Colors and Theme

Muse and headline. Karim Rashid — Sensual pop minimalism for the crunch of ayam geprek. The register is playful, bold, and delicious: Indonesian street-food energy rendered as glossy candy colour and organic curves, never luxury and never corporate.

Mode. Light mode only.

Colour tokens (exact hex by role)

Proportion. 60% cream/white, 25% pink, 10% charcoal, 5% lime. Lime must stay a hot accent, never a ground colour.

Typography

• Headings: Comfortaa — rounded, futuristic display at large sizes, clamp(40px–96px), weight 700, tight tracking -0.02em, sentence case with occasional all-caps for labels. Headlines feel like inflated balloons: soft, glossy, confident.
• Body: Quicksand.
• Scale: 1.5 modular — 96 / 64 / 40 / 24 / 18 / 16px. Body 18px with 1.6 line-height for warmth.
• Hero headline override: clamp(48px, 12vw, 128px) in Comfortaa 700, white, stacked.

Shape language. Blob and capsule shapes dominate. Buttons are pill-shaped with a glossy highlight. Section dividers are soft organic curves. Image masks are rounded blobs rather than rectangles. Cards have generous radii (24–32px) and a subtle inner glow. No sharp corners except for small functional labels.

Layout. Asymmetric, flowing single-column layout with generous white space. The hero is a full-bleed pink colour field with a large 3D chicken drumstick floating over cream. Sections alternate between cream and pink grounds, separated by curved SVG waves. Menu items are glossy capsule cards in a loose, staggered grid rather than a rigid table. Navigation is a floating pill bar at the top with icon + label, sticky on scroll.

Imagery style. Glossy 3D renders of food — chicken drumstick, sambal bowl, lime wedge, rice — in candy colours, floating on plain cream or pink grounds. No photography. Decorative organic blobs in pink and lime. Icons are rounded and chunky, matching the type.

Forbidden. Any blue or indigo anywhere in the palette. Sharp corners, thin hairline borders, or flat rectangular cards. Photographic food imagery. Neutral or muted tones that would make the food feel bland. Gradient-blob heroes or centred SaaS-style layouts. Serious or luxury typography. Overuse of lime.

7. Signature Design Concept

The poster block with a floating drumstick.

The public entry is composed as a single poster-like colour block rather than a conventional web hero. A full-bleed bubblegum-pink (#FF4D6D) field fills the viewport. Slightly off-axis to the left, the headline "AYAM GEPREK" stacks in white Comfortaa 700 at up to 128px, with the subhead "Pedasnya nagih, kriuknya juara" in Quicksand 18px beneath it, and the lime pill CTA "Pesan Sekarang" with charcoal text below that.

Over the pink field, at roughly 60% viewport height, floats a giant glossy 3D chicken drumstick rendered in warm browns with a lime-green sambal drip, casting a soft shadow onto the cream below. The drumstick rotates slowly on a 10s loop and bobs gently.

The composition deliberately avoids gradient blobs and centred SaaS layouts: the colour block is flat and saturated, the subject is dimensional and glossy, and the type is oversized and rounded. The gesture of the page — the drumstick bleeding past the composition, the wave dividers cutting the sections, the marquee running off the edge — is carried by imagery and decoration, never by cropping or covering readable text or controls.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

Focal subject. The glossy 3D chicken drumstick in warm browns with a lime-green sambal drip, floating over the full-bleed pink (#FF4D6D) hero field at roughly 60% viewport height.

Input → transformation → outcome thesis. On load, the hero field, headline, subhead, and CTA paint immediately as a composed static poster; the WebGL drumstick then initialises and begins its slow 10s rotation and gentle bob, casting a soft shadow that shifts with the motion. The outcome is a hero that reads as a finished poster at first paint and gains dimensional life a moment later — never a hero that waits on the 3D subject to become legible.

Motion vocabulary. Expressive: slow continuous rotation, gentle vertical bob, a morphing sambal blob, soft bounce on button hover, springy slide-up section reveals, and a horizontally scrolling lime-on-pink marquee that pauses on hover.

Composed first frame. Full-bleed pink field; stacked white Comfortaa headline "AYAM GEPREK" at clamp(48px, 12vw, 128px) on the left; Quicksand subhead "Pedasnya nagih, kriuknya juara"; lime pill CTA "Pesan Sekarang" with charcoal text; the drumstick in a static composed pose at roughly 60% viewport height with its soft shadow. Every readable element is whole and inside the viewport at 375px, 768px, and 1280px.

Reduced-motion state. With prefers-reduced-motion, the drumstick holds its static composed pose, the sambal blob stops morphing, section reveals appear in place without sliding, button hover loses its bounce, and the marquee becomes a usable static arrangement — items wrapped into rows or horizontally scrollable so each item can be brought fully into view. The hero remains a complete, readable poster.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

Object. One crafted real-time subject: a glossy 3D chicken drumstick in warm browns, with a lime-green (#B4E600) sambal drip clinging to its lower edge. No scene clutter, no environment beyond the pink field.

Defining state shown. The crunch-and-sambal identity of ayam geprek — a single, oversized, appetising object presented as the hero, not a food scene or a plate.

Material and lighting. Glossy, candy-like surface with a soft specular highlight consistent with the direction's "glossy 3D renders in candy colours". A single soft key light produces the soft shadow cast onto the cream ground below. No photographic texture maps.

Motion. Continuous slow rotation on a 10s loop plus a gentle vertical bob. Motion is ambient and never blocks reading.

Fallback. If WebGL is unavailable or the subject fails to load, the hero renders the same subject as a static composed pose with its soft shadow, and the headline, subhead, and CTA remain intact and readable.

9. Non-Functional Requirements

NFR-1 — Readability across viewports (provenance: explicit, from the direction's readability rule) Headlines, wordmarks, labels, numbers, card text, 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. Rationale: the user's request is for a site that is enak dilihat, and visual boldness must not cost legibility.

NFR-2 — Motion accessibility (provenance: explicit, from the direction's motion spec) All motion must respect prefers-reduced-motion by freezing to static poses, and moving or scrollable content must provide a usable static arrangement in that mode. Rationale: the direction's expressive motion ceiling requires an accessible still equivalent.

NFR-3 — Graceful 3D degradation (provenance: required_inference) The WebGL hero subject must degrade to a static composed pose when WebGL is unavailable or the subject fails to load, without removing hero content. Rationale: the hero is the entry surface, and the accepted content must remain reachable regardless of rendering capability.

NFR-4 — Palette integrity (provenance: explicit, from the direction's avoid list) No blue or indigo may appear anywhere in the palette. Rationale: the direction explicitly forbids the generic indigo/blue-on-white SaaS template for this project.

NFR-5 — Public anonymous access (provenance: explicit, from the planning access contract) The Landing page must be reachable with no access requirement, no identity, and no session. Rationale: the accepted access contract sets access_requirement: none, and no accepted journey requires durable actor-specific state.

NFR-6 — No photographic food imagery (provenance: explicit, from the direction's imagery spec) Food imagery must be 3D renders and illustration only. Rationale: the direction explicitly excludes photography.

10. Tech Stack

• Frontend: React — single-page public site rendering the Landing surface.
• 3D / WebGL: React Three Fiber (with Drei) for the real-time glossy 3D chicken drumstick hero subject, per the direction's webgl hero dimensionality.
• Styling: CSS with the specified design tokens — Comfortaa and Quicksand font families, the exact hex palette, clamp()-based fluid type, and SVG wave dividers.
• Motion: CSS transitions and keyframes for hover bounce, section reveals, and the marquee; the R3F render loop for the hero subject's rotation and bob; prefers-reduced-motion media queries for the static fallback.
• Backend: none required for the current scope. The product is a static public presentation with no server-side behavior, no persistence, and no accounts.
• Storage: none required for the current scope.
• Deployment: static hosting of the built frontend. No Docker, docker-compose, or Kubernetes is required for the current scope.

11. Assumptions and Constraints

Assumptions

• The site is delivered as a single public page; the visitor needs no account, and no state is persisted between visits. (required_inference, from the accepted access contract access_requirement: none and the absence of any accepted journey requiring durable actor-specific state.)
• The hero CTA "Pesan Sekarang" is a navigational element within the page, not a transactional ordering flow. (required_inference: the direction specifies the CTA's appearance and placement but no ordering capability was accepted in the authoritative thread.)
• Menu dish content is editorial content authored for the site; no dish data is fetched from an external provider. (required_inference: no provider or external content source was accepted.)

Constraints

• The palette, typography, shape language, layout, motion, and imagery rules in Section 6 are binding and come from the authoritative creative direction.
• No blue or indigo may appear anywhere in the palette.
• No photographic food imagery may be used.
• Readable text and controls must stay whole at 375px, 768px, and 1280px; where a gesture would crop or cover them, the gesture is carried by imagery or decoration instead.
• All motion must respect prefers-reduced-motion.
• The Landing page is publicly accessible with no access requirement.

Out of scope (current)

• Ordering, payment, checkout, delivery, and reservation capabilities.
• User accounts, profiles, saved state, and personalization.
• Administrative or content-management surfaces.
• Provider-owned or external-destination surfaces.
• Headless or API-only delivery.

Future (not current, not in acceptance)

• No future-horizon requirements were accepted in the authoritative thread. Any extension beyond the current single public presentation surface — for example transactional ordering or account-based features — would require a new accepted requirement and is explicitly outside this document's current scope and acceptance.

12. Glossary

• Ayam geprek — Indonesian dish of fried chicken smashed (geprek) with sambal; the subject of this website.
• Sambal — Indonesian chili paste; in this product it appears as a lime-green drip on the hero subject and as a decorative blob.
• Pengunjung Situs — the accepted active human persona: a public visitor who views and explores the ayam geprek content.
• Landing — the single public entry page of the site; the only page in the current information architecture.
• Hero — the full-bleed pink entry block containing the headline, subhead, CTA, and the WebGL drumstick subject.
• Capsule card — a glossy pill-shaped card with generous radii and a subtle inner glow, used to present menu dishes.
• Wave divider — a curved SVG separator between sections, filled with alternating cream and pink.
• Marquee band — the pink band carrying repeating "GEPREK! GEPREK! GEPREK!" in lime, scrolling horizontally and pausing on hover.
• Reduced motion — the prefers-reduced-motion user preference, under which all motion freezes to static poses and moving content becomes a usable static arrangement.
• WebGL hero subject — the real-time glossy 3D chicken drumstick rendered in the hero.