System Requirements Document for kopi-4dimensi-anime

1. Introduction

kopi-4dimensi-anime is a public coffee website that delivers a moving "4-dimensional" visual experience wrapped in anime-styled animation. The product intent, taken directly from the requester's brief ("Buatkan web kopi 4dimensi bergerak + animasi anime"), is a single immersive landing experience where a visitor encounters a coffee brand through a real-time, motion-driven WebGL hero and anime-energised animation language rather than a conventional café menu or static brochure.

The audience is the Pengunjung (Visitor): young, online-native, sensory and playful, arriving to see the coffee brand and its products and to enjoy a spectacle-grade moving 4D visual experience with anime animation. Success is reached when the page renders smoothly and its information is easy to understand.

This document is the System Requirements Document for the product; it specifies the current delivery, the single public landing surface, the visitor's experience, and the visual, motion, and technical constraints that make the "4D + anime" experience real.

2. System Overview

kopi-4dimensi-anime is delivered as a first-party web application with three provisioned services:

• frontend — a React application that renders the public Landing experience, including the real-time WebGL hero, HUD overlay, kinetic typography, and scroll-scrubbed flavour sequence.
• backend — a shared FastAPI process that serves the application's API routes and domain modules. It is the single backend for any server-side behavior the landing experience requires.
• database — MariaDB, available for application-owned persistent data. No domain entities, accounts, or authentication are established by this document; the database is provisioned infrastructure only.

The only active human actor is the Pengunjung, and the only page is the public Landing page, reachable without any identity, account, or sign-in. There is no authenticated area, no account management, and no differentiated permissions. The experience is a public, ephemeral, read-and-experience surface: the visitor opens the Landing page, watches and interacts with the moving 4D coffee scene and anime animation, reads the coffee brand and product information, and leaves. No durable visitor-specific state, commitment, or value transfer is created, so no application-owned identity is required.

Removed from scope

• None. No concept was explicitly removed by the requester.

2a. Product Interpretation and Delivery Boundary

The requester asked for a coffee website that is "4-dimensional and moving" with "anime animation." This is interpreted as a single, public, immersive landing experience whose centerpiece is a real-time 3D/WebGL coffee artefact in continuous cinematic motion, framed by an anime-cockpit HUD, kinetic type, and a scroll-scrubbed flavour sequence. The "4th dimension" is expressed through motion and scroll-driven depth (orbiting artefact, scroll-scrubbed camera and horizontal flavour panels), not through a separate product module.

Delivery is entirely first-party and public. The Landing page is anonymously reachable and requires no identity. All motion, 3D rendering, and animation are owned by the frontend; the shared backend and MariaDB exist as provisioned infrastructure and are reused if any server-side behavior is later needed, but the current accepted scope does not require accounts, persistence of visitor data, or authenticated destinations. There is no future-horizon feature set defined by the requester beyond the current moving 4D + anime landing experience.

2c. Page Content and Component Coverage

Landing

The public entry surface and the only page. It is a full-bleed dark, cinematic, anime-energised coffee experience.

Information and state

• Brand identity: vertical wordmark "KOPI 4DIMENSI" (top-left), micro-status line (top-right).
• Oversized stacked headline "KOPI 4DIMENSI" with a magenta slash separator and a lime micro-label above it.
• Live "brew telemetry" readout in monospace (e.g. DIM-04 / 92°C / 18g).
• Coffee brand and product information presented in alternating full-bleed dark panels and a horizontal scroll-scrubbed "4th dimension" flavour sequence.
• A single-line marquee ticker of anime-styled coffee labels.
• States: loading (WebGL scene and assets initialising), success (scene running, content readable), reduced-motion (frozen still hero frame, static stacked headline, horizontally scrollable ticker), error/recovery (WebGL unavailable → static hero fallback frame with all text and controls intact).

Primary and supporting actions

• Primary: view and experience the moving 4D coffee scene; scroll to advance the scroll-scrubbed camera and the horizontal flavour sequence.
• Supporting: activate the chamfered lime CTA "Rasakan Dimensinya"; read telemetry and flavour panels; scroll the ticker (in reduced-motion).

Domain entities

• Coffee artefact (3D hero subject: glossy dark-coffee liquid orb / bean with lime and magenta volumetric rings).
• Flavour panel (index numeral, flavour label, anime speed-line divider).
• Telemetry readout (dimension tag, temperature, dose).
• Coffee label (ticker item).

Component responsibilities

• WebGL hero stage: renders the real-time 3D coffee artefact, volumetric light rings, particle dust, topographic HUD floor grid; slow continuous orbit; scroll-scrubbed camera dolly.
• HUD overlay: corner brackets, vertical wordmark, micro-status line, tick-mark radial rings around the subject, monospace telemetry strip.
• Kinetic headline: word-by-word slide-in with slight skew that settles; static stacked fallback under reduced motion.
• Chamfered CTA: cut-corner lime button "Rasakan Dimensinya" (clip-path, not a pill).
• 4th-dimension sequence: horizontal flavour panels translating on scroll, each with a large index numeral and anime speed-line divider.
• Marquee ticker: single-line anime-styled coffee labels; horizontally scrollable and fully readable under reduced motion.
• Content panels: alternating full-bleed dark panels on a 12-column grid with generous negative space; no card grids.

States

• Loading: HUD frame and text render first; 3D scene fades in when ready.
• Empty: not applicable (content is authored, not fetched per visitor).
• Success: scene animates smoothly; all text and controls fully readable at 375px, 768px, and 1280px.
• Error/recovery: if WebGL fails, a still hero frame replaces the live scene while headline, telemetry, CTA, and all content remain whole and usable.

3. Functional Requirements

FR-1 — Coffee-themed website (explicit) As a Pengunjung, I should open a website themed around coffee, so that I understand this is a coffee brand experience.

• Trigger: visitor navigates to the site.
• Observable result: the Landing page presents coffee brand identity, coffee product/flavour information, and coffee imagery (the 3D coffee artefact).
• Access: public, no identity.
• Failure/recovery: if assets fail to load, text content and brand identity remain readable.
• Continuation: visitor scrolls to explore further content.

FR-2 — Moving 4-dimensional visual experience (explicit) As a Pengunjung, I should experience a moving 4-dimensional visual presentation, so that the coffee is presented as a spectacle rather than a static page.

• Trigger: Landing page loads.
• Observable result: a real-time 3D coffee artefact orbits continuously with volumetric light sweeps and a particle field; scroll scrubs a camera dolly through the hero and translates the horizontal "4th dimension" flavour sequence.
• Access: public.
• Failure/recovery: if WebGL is unavailable, a still hero frame is shown and all content remains readable.
• Continuation: visitor continues scrolling through the flavour sequence and content panels.

FR-3 — Anime-styled animation (explicit) As a Pengunjung, I should see anime-styled animation, so that the experience carries the requested anime energy.

• Trigger: Landing page loads and the visitor scrolls.
• Observable result: kinetic headline words slide in with a slight skew and settle; HUD counters tick; a single-line marquee ticker of anime-styled coffee labels runs; speed lines, halftone dot overlays, and a cel-shaded rim light on the 3D subject convey anime energy.
• Access: public.
• Failure/recovery: under prefers-reduced-motion, kinetic text becomes a static stacked headline and the ticker becomes a horizontally scrollable row where each label is fully readable.
• Continuation: visitor reads labels and continues through the page.

FR-4 — Readable, whole text and controls at every viewport (explicit — design constraint) As a Pengunjung, I should be able to read every headline, label, number, and control fully at 375px, 768px, and 1280px, so that the spectacle never hides information.

• Trigger: any viewport size.
• Observable result: headlines, wordmark, labels, numbers, and controls stay entirely inside the viewport and their container, wrapping or scaling (e.g. clamp(...)) to fit; no element covers them. Moving/scrollable content may cross edges by design but every item becomes fully readable as it passes.
• Failure/recovery: with reduced motion, items wrap into rows or scroll horizontally so each can be brought fully into view.
• Continuation: visitor reads and uses all content.

FR-5 — Reduced-motion usable static arrangement (explicit — design constraint) As a Pengunjung who prefers reduced motion, I should get a usable static arrangement, so that I can still read and use the page.

• Trigger: prefers-reduced-motion: reduce.
• Observable result: 3D scene freezes to a still hero frame; kinetic text becomes a static stacked headline; ticker becomes a horizontally scrollable row with fully readable labels.
• Access: public.
• Continuation: visitor reads all content and uses the CTA.

4. User Personas

Pengunjung (Visitor)

Product context. The Pengunjung is a young, online-native, sensory and playful visitor who arrives at kopi-4dimensi-anime expecting a spectacle. They are curious about the coffee brand and its products, and they are drawn in by the promise of a moving "4-dimensional" coffee experience with anime animation. They arrive anonymously, with no account and no prior relationship to the site.

Primary goal. To see the coffee brand and the products it offers, and to enjoy a smooth, immersive moving 4D visual experience with anime-styled animation — with information that is easy to understand.

Distinct accepted responsibilities.

• Opens the public Landing page (no sign-in).
• Watches and interacts with the moving 4D coffee scene (orbit, scroll-scrubbed camera, flavour sequence).
• Reads the coffee brand and product/flavour information and the telemetry readout.
• Activates the "Rasakan Dimensinya" CTA.
• May browse under reduced-motion preference and still read every label and control.

Relevant inputs or decisions. Scrolling (to advance the 4th-dimension sequence and camera), choosing to activate the CTA, and optionally enabling reduced motion at the OS level.

Interactions with other accepted participants. None. The Pengunjung is the only active human actor; there is no counterparty, recipient, or other participant whose state changes.

Observable success. The page renders smoothly, the 4D scene and anime animation play as intended, and all information is easy to read and understand at every viewport.

5. Core User Flows

Flow A — First visit and immersive experience

1. The Pengunjung opens the public Landing page (no identity required).
2. The HUD frame, vertical wordmark, micro-status line, and stacked headline "KOPI 4DIMENSI" render immediately; the WebGL hero fades in.
3. The 3D coffee artefact (glowing liquid orb with orbiting bean and lime/magenta light rings) orbits slowly; particle dust and volumetric light sweeps play; the kinetic headline slides in word-by-word with a slight skew and settles.
4. The Pengunjung scrolls; the camera dollies through the hero and the horizontal "4th dimension" flavour panels translate on scroll, each with a large index numeral and anime speed-line divider.
5. The Pengunjung reads the coffee brand and flavour information and the live telemetry strip (DIM-04 / 92°C / 18g).
6. The Pengunjung activates the chamfered lime CTA "Rasakan Dimensinya".
7. Result: the visitor has experienced the moving 4D coffee scene and anime animation and understood the brand and products. Continuation: they continue scrolling or leave.

Flow B — Reduced-motion visit

1. The Pengunjung with prefers-reduced-motion: reduce opens the Landing page.
2. The 3D scene freezes to a still hero frame; the headline appears as a static stacked headline; the ticker becomes a horizontally scrollable row.
3. The Pengunjung scrolls the ticker and reads each label fully; reads the flavour panels and telemetry.
4. The Pengunjung activates the CTA.
5. Result: all content is readable and usable without motion.

Flow C — WebGL failure recovery

1. The Pengunjung opens the Landing page but WebGL is unavailable.
2. A still hero frame replaces the live scene; headline, telemetry, CTA, and all content remain whole and readable.
3. The Pengunjung reads the content and uses the CTA.
4. Result: the experience degrades gracefully without losing information.

6. Visuals Colors and Theme

The CREATIVE DIRECTION is authoritative for this section.

• Muse: Gleb Kuznetsov — cinematic future coffee, a moving 4D brew with anime energy.
• Headline concept: "KOPI 4DIMENSI" — a full-viewport near-black WebGL stage with a glowing coffee artefact.

Colour tokens (dark mode)

• Background: #07080D (near-black void, ~60% of page)
• Surface: #11131C (panels)
• Text: #F2F4FF (body, exceeds AA on #07080D)
• Primary: #C8FF3D (acid-lime signal: coffee glow, active states, HUD strokes, key CTA)
• Accent: #FF4FD8 (magenta anime-pop: glows, particle trails, hover sweeps, headline slash)
• Muted: #7A7F9A (micro-labels only, 12px uppercase — never body copy)
• Luminous borders: 1px rgba(200,255,61,0.18) panels; 1px rgba(200,255,61,0.25) glass panels
• No blue/indigo anywhere; no #2563EB-family accent.

Typography

• Headings: Space Grotesk 600–700, wide tracking at display sizes; uppercase micro-labels at 11–12px with 0.24em tracking; headline words letter-spaced and split for kinetic type.
• Body: Chakra Petch 400/500 (technical, anime-subtitle feel).
• Numerals/HUD: JetBrains Mono 14px for data readouts.
• Scale: 1.25 modular for body, 1.6 for display. Hero headline 56px mobile / 88px tablet / 132px desktop; section heads 40/32/28; body 18/16/15; micro-labels 12px uppercase; data 14px mono.

Shape language

• Full-bleed dark scene with thin 1px luminous strokes.
• Floating glass panels: backdrop-blur 18px, rgba(17,19,28,0.55), 1px rgba(200,255,61,0.25) border.
• Radial HUD rings and tick marks around the hero subject.
• Hard-edged cut-corner HUD panels via clip-path: polygon(...) with a 12px chamfer — no soft rounded cards.
• Buttons are chamfered rectangles, not pills.

Layout

• Edge-to-edge dark canvas. Hero is 100svh full-bleed WebGL with the 3D coffee artefact off-centre right (~55vw), lit from below, faint topographic HUD grid on the floor.
• Left third: oversized stacked headline "KOPI 4DIMENSI" (two lines, flush left) with a magenta slash and a lime micro-label above.
• Bottom-right: chamfered lime CTA "Rasakan Dimensinya" and a live monospace telemetry strip.
• Below hero: alternating full-bleed dark panels on a 12-column grid with generous negative space; a horizontal scroll-scrubbed "4th dimension" flavour sequence. No card grids.

Imagery

• One crafted real-time 3D subject: glossy dark-coffee liquid orb / bean wrapped in glowing lime and magenta volumetric rings, floating in a black void with fine particle dust and topographic HUD lines.
• Supporting abstract 3D: liquid ribbons, luminous steam curls, glass shards of coffee.
• Anime energy via speed lines, halftone dot overlays, and a subtle cel-shaded rim light — not flat cartoon illustrations or stock photography.

7. Signature Design Concept

The public entry is a cinematic anime cockpit for coffee. A full-viewport near-black WebGL stage holds a glowing dark-coffee liquid orb with an orbiting bean and lime/magenta volumetric light rings, lit from below over a faint topographic HUD grid. The left third carries the oversized Space Grotesk headline "KOPI 4DIMENSI" stacked in two lines, flush left, with a magenta slash and a lime micro-label above it. Corner brackets, a vertical wordmark, a monospace telemetry strip (DIM-04 / 92°C / 18g), and tick-mark radial rings frame the subject like an anime HUD. A thin lime orbit line sweeps across the entire viewport behind the type. Bottom-right, a chamfered lime CTA "Rasakan Dimensinya" sits beside the live telemetry. The signature gesture is that the product itself is the motion: the coffee artefact orbits and reacts to scroll, and the page reads as a precise, futuristic instrument panel rather than a café menu.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the real-time 3D coffee artefact — a glossy dark-coffee liquid orb with an orbiting bean, wrapped in glowing lime and magenta volumetric rings, floating in a black void with fine particle dust and topographic HUD lines.
• Input → transformation → outcome thesis: on load, the artefact fades in and begins a slow continuous orbit with volumetric light sweeps and a particle field; as the visitor scrolls, the camera dollies through the hero and the horizontal "4th dimension" flavour panels translate, so the coffee is progressively revealed as a moving 4D object.
• Motion vocabulary: cinematic and precise — slow orbit, volumetric light sweeps, particle drift, scroll-scrubbed camera dolly, kinetic headline words sliding in with a slight skew and settling, HUD counters ticking, a single-line marquee ticker. No bouncy playful easing.
• Composed first frame: near-black stage; artefact right-of-centre at ~55vw lit from below; stacked "KOPI 4DIMENSI" headline flush left with magenta slash and lime micro-label; HUD brackets, vertical wordmark, telemetry strip; chamfered lime CTA bottom-right; thin lime orbit line across the viewport.
• Reduced-motion state: the 3D scene freezes to a still hero frame, kinetic text becomes a static stacked headline, and the ticker becomes a horizontally scrollable row where each label is fully readable.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED A single crafted real-time object: a glossy dark-coffee liquid orb with an orbiting bean, encircled by lime and magenta volumetric light rings, floating in a black void with particle dust and a topographic HUD floor grid. It shows the product's defining state — coffee as a moving 4D artefact — with a cel-shaded rim light for anime energy. It slowly orbits and responds to scroll; under reduced motion it holds as a still frame.

9. Non-Functional Requirements

• Performance / smoothness (explicit — persona success criterion): the Landing page must render smoothly; the WebGL scene, particle field, and scroll-scrubbed sequences must run without jank on typical modern devices. Rationale: the Pengunjung's success is defined as the page displaying smoothly.
• Readability at all viewports (explicit — design constraint): headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (e.g. clamp(...)) to fit; no element covers them. Moving/scrollable content may cross edges by design but every item becomes fully readable as it passes.
• Accessibility — reduced motion (explicit — design constraint): all motion respects prefers-reduced-motion; the 3D scene freezes to a still frame, kinetic text becomes static, and the ticker becomes a horizontally scrollable row with fully readable labels.
• Accessibility — contrast (explicit — design constraint): body text #F2F4FF on #07080D exceeds AA; muted #7A7F9A is used only for 12px uppercase micro-labels, never body copy.
• Graceful degradation (required_inference): if WebGL is unavailable, a still hero frame replaces the live scene while all text and controls remain whole and usable.
• Public access (explicit — access contract): the Landing page is reachable without identity, account, or sign-in; no authenticated area exists.

10. Tech Stack

• frontend — React application rendering the Landing experience, including the real-time WebGL hero (WebGL/R3F), HUD overlay, kinetic typography, and scroll-scrubbed flavour sequence. Fonts: Space Grotesk, Chakra Petch, JetBrains Mono.
• backend — shared FastAPI process serving application API routes and domain modules; reused for any server-side behavior the landing experience requires.
• database — MariaDB, provisioned for application-owned persistent data (no domain entities or authentication established by current scope).
• Deployment — Docker / docker-compose for the three services (frontend, backend, database). Kubernetes only if deployment requires it.

11. Assumptions and Constraints

• A1 (required_inference): The product is a single public Landing page; no additional pages, accounts, or authenticated areas are in current scope.
• A2 (required_inference): The "4th dimension" is expressed through motion and scroll-driven depth (orbiting artefact, scroll-scrubbed camera, horizontal flavour panels), not a separate module.
• A3 (explicit): The site is public and anonymously reachable; no identity continuity is required because no durable visitor-specific state, commitment, or value transfer is created.
• A4 (explicit — design constraint): The palette, fonts, surfaces, tone, and layout from the CREATIVE DIRECTION are binding; the generic indigo/blue-on-white SaaS template is forbidden.
• A5 (explicit — design constraint): All motion respects prefers-reduced-motion; readable text and controls stay whole at every viewport.
• A6 (required_inference): Coffee brand and product/flavour content is authored content presented on the Landing page; no per-visitor data is fetched or stored.

12. Glossary

• Pengunjung — the Visitor; the sole active human persona who opens the public Landing page.
• 4D / 4-dimensional — the moving, scroll-driven depth experience: orbiting 3D coffee artefact, scroll-scrubbed camera dolly, and horizontal flavour sequence.
• Anime animation — the anime-energised motion language: kinetic type, speed lines, halftone overlays, cel-shaded rim light, HUD counters, and marquee ticker.
• HUD — the anime-cockpit overlay: corner brackets, vertical wordmark, micro-status line, tick-mark rings, and monospace telemetry strip.
• Telemetry strip — the live monospace readout (e.g. DIM-04 / 92°C / 18g).
• 4th-dimension sequence — the horizontal scroll-scrubbed flavour panels with large index numerals and anime speed-line dividers.
• Chamfered panel / CTA — a hard-edged cut-corner surface (clip-path polygon, 12px chamfer) with a 1px lime luminous border; not a rounded card or pill.
• WebGL hero — the full-viewport real-time 3D stage rendering the coffee artefact.