System Requirements Document for pengendara-pemadam-kebakaran

1. Introduction

This project delivers a realistic, cinematic public-safety video about a driver who refuses to pull over while a fire truck is carrying out an emergency task. The video is produced in Indonesian, narrated by a male narrator, and built around a single civic message: when you hear a fire-truck siren, give way immediately.

The product is both the finished video and the production workspace used to assemble it. The Video Creator uses the workspace to lay out the ordered scene sequence — busy highway traffic, a distant siren, the approaching fire truck with red rotating lights, other vehicles pulling aside, the one driver who stays in the middle of the road, the fire truck driver sounding the horn and siren, the blocking driver finally yielding, the run to the fire location, firefighters deploying hoses and spraying water onto large flames and thick smoke, and the fire finally extinguished — together with the male Indonesian narration and the exact on-screen warning text.

The audience for the finished video is everyday drivers on busy Indonesian highways. The audience for the production workspace is the Video Creator who must produce a realistic, cinematic result that carries the warning without dilution.

2. System Overview

The system is a two-surface, anonymous-access web product:

• Landing — the public entry surface that states the product's purpose and directs the Video Creator into production.
• Video Studio — the cohesive production workspace where the ordered fire-truck scenario is assembled, the Indonesian narration and exact on-screen text are placed, the required audio is produced, and the completed video is delivered.

The single active human actor is the Video Creator. There are no other accepted human personas. The finished video's in-story characters (the blocking driver, the fire truck driver, the firefighters, the narrator voice) are content within the produced video, not product users.

Current delivery is a first-party custom UI with no access requirement on either surface. The product's current scope is the production and delivery of the described video; it does not extend to adjacent media-management, publishing, analytics, or account capabilities.

2a. Product Interpretation and Delivery Boundary

The authoritative requirement is a video brief, not a software feature list. The product interpretation is therefore: a first-party production workspace that lets the Video Creator assemble exactly the requested scene sequence, place exactly the requested narration and on-screen text, produce exactly the requested audio, and deliver a realistic, cinematic result.

Both surfaces are anonymously reachable. No identity, account, or sign-in is required to enter the Landing or the Video Studio, and no durable actor-specific state must be privately owned or resumed across sessions for the accepted work to be completable. The workspace is a production surface, not a personal library.

The video itself is the deliverable. Everything the video must contain — the busy highway opening, the traffic ambience, the distant siren, the fire truck with red rotating lights, the vehicles pulling aside, the blocking driver, the horn and siren, the yielding, the run to the fire, the firefighters with hoses, the large flames, the thick smoke, the pressurized water, the teamwork, the extinguished fire, the two Indonesian narrator lines, and the exact on-screen text — is current scope.

Nothing in the authoritative thread establishes a future horizon. No future-phase requirements are recorded.

2b. Source Content Inventory

Not applicable. No reference directive with content_source authority was supplied.

2c. Page Content and Component Coverage

Landing

• Information and state: The public entry surface. It states what the product is — a realistic, cinematic Indonesian-language public-safety video about giving way to a fire truck on an emergency run — and what the Video Creator can do here: begin producing that video. No identity state, no session state, no personalized content.
• Primary action: MULAI PRODUKSI — enter the Video Studio and begin assembling the video.
• Supporting actions: Read the full warning string as presented on the entry surface; view the siren disc as a static or pulsing emergency glyph.
• Domain entities: The video project (the single production artifact), the warning message, the five-scene sequence as a preview of what will be produced.
• Component responsibilities:
  • Type-wall hero — the display headline DENGAR SIRENE? set in Anton at extreme display scale, occupying nine columns and bleeding off the right viewport edge; the question mark is cut by the viewport as decoration, while the readable words remain whole and inside the viewport at 375px, 768px, and 1280px.
  • Hazard-yellow imperative block — a solid yellow plate holding SEGERA MENEPI. BERI JALAN. in black Anton caps, pinned flush-left.
  • Red CTA plate — a red block carrying the hard-edged rotating-light disc and the single call to action MULAI PRODUKSI in Archivo 700 caps on red with off-white text.
  • Warning marquee — a thin marquee along the bottom edge running the full warning string DENGAR SIRENE? SEGERA MENEPIL DAN BERI JALAN!; it moves continuously and every item becomes fully readable as it passes; under prefers-reduced-motion it stops and wraps to static whole lines.
  • Siren disc — a hard-edged circle with concentric rings, pulsing in two hard on/off frames; under prefers-reduced-motion it holds a steady red.
• States:
  • Loading: the type wall and colour blocks render as static composition; no data fetch is required, so no spinner state is needed.
  • Empty: not applicable — the Landing has no collection to be empty.
  • Success: the Video Creator reads the purpose and the warning, and activates MULAI PRODUKSI to enter the Video Studio.
  • Error: if the Video Studio cannot be entered, the Landing states the failure plainly and offers retry of MULAI PRODUKSI; the warning content remains readable.
  • Recovery: retry from the same CTA; no state is lost because no state was established.

Video Studio

• Information and state: The cohesive production workspace. It holds the ordered five-scene sequence, the current scene under edit, the narration script with its two exact Indonesian lines, the on-screen warning text, the audio tracks (traffic ambience, siren, horn, pressurized water), and the render/delivery status of the finished video.
• Primary action: Produce and deliver the completed realistic, cinematic video.
• Supporting actions: Select a scene from the scene strip; edit the current scene's content; place and review the male Indonesian narration lines; place and review the exact on-screen warning text; review the audio meters for traffic ambience, siren, horn, and pressurized water; play back the sequence; render the video; download or otherwise receive the delivered video.
• Domain entities:
  • Scene — one of five ordered shots: 01 JALAN RAYA, 02 SIRENE, 03 MENEPI, 04 LOKASI KEBAKARAN, 05 PADAM.
  • Narration line — the two exact Indonesian narrator lines.
  • On-screen text — the exact warning string.
  • Audio track — traffic ambience, siren, horn, pressurized water.
  • Render job — the production run that yields the delivered video.
• Component responsibilities:
  • Hazard-stripe utility bar — a repeating 45° black/#FFC400 stripe bar across the top that doubles as the render-status indicator: it turns solid red while rendering and returns to stripes when idle.
  • Scene strip — a left column of five numbered shot plates (01–05), each a hard-edged black rectangle with an oversized Anton numeral; hovering or selecting inverts the plate to red with the numeral in off-white and slides the scene title in from the left. The five plates are 01 JALAN RAYA, 02 SIRENE, 03 MENEPI, 04 LOKASI KEBAKARAN, 05 PADAM.
  • Main stage — the ruled panel area where the current scene, the narration script, and the audio meters sit. During playback the on-screen warning string renders as a yellow plate that slides horizontally across the stage as a marquee, stopping on a hard cut at the final word JALAN! with a red flash frame.
  • Narration panel — holds the two exact Indonesian narrator lines and their placement in the sequence.
  • Audio meters — level indicators for traffic ambience, siren, horn, and pressurized water.
  • Siren disc — the same hard-edged concentric-ring disc, serving as play button, render progress ring, and section divider.
  • Render and delivery control — starts the render and exposes the delivered video.
• States:
  • Loading: the workspace loads the scene strip, narration panel, and audio meters; the hazard-stripe bar shows stripes while idle.
  • Empty: before any scene content is placed, each scene plate shows its number and title with an empty stage panel and a prompt to place that scene's content.
  • Success: all five scenes are populated in order, both narration lines are placed, the exact on-screen text is placed, all four audio elements are present, the render completes, and the delivered video plays back with the fire extinguished at the end.
  • Error: if a scene is incomplete, if a narration line or the on-screen text is missing or does not match the exact required string, or if a required audio element is absent, the workspace identifies the specific gap and blocks delivery until it is resolved; if the render fails, the hazard-stripe bar returns to stripes and the failure is stated with a retry.
  • Recovery: the Video Creator corrects the identified gap or retries the render; the scene strip, narration panel, and audio meters retain their content so no work is lost.

3. Functional Requirements

FR-1 — Produce the realistic, cinematic video As a Video Creator, I should produce a realistic and cinematic video about a driver who refuses to pull over while a fire truck is carrying out an emergency task, so that the public-safety message is delivered as a finished film.

• Provenance: explicit
• Lifecycle: initiated by the Video Creator in the Video Studio; the observable result is a completed video that plays back as a realistic, cinematic sequence; material failure is an incomplete or non-cinematic result, recovered by correcting the identified gap and re-rendering; continuation is delivery of the finished video.
• Acceptance: the delivered video is realistic and cinematic in style and depicts the described scenario.

FR-2 — Open on a busy highway with traffic atmosphere As a Video Creator, I should open the video on a busy highway with audible vehicle sounds and traffic atmosphere, so that the scene begins in a believable, crowded road environment.

• Provenance: explicit
• Lifecycle: the Video Creator places the opening scene content in scene 01 JALAN RAYA; the observable result is a first scene showing a busy highway with vehicle sounds and traffic ambience; failure is a silent or empty opening, recovered by adding the traffic audio and highway content; continuation is the siren scene.
• Acceptance: the video begins on a busy highway and vehicle sounds and traffic atmosphere are audible.

FR-3 — Distant siren, then the fire truck with red rotating lights As a Video Creator, I should place a clearly audible, realistic fire-truck siren heard from a distance, followed by the fire truck arriving with its red rotating lights on, so that the emergency approach builds from sound to sight.

• Provenance: explicit
• Lifecycle: the Video Creator places this content in scene 02 SIRENE; the observable result is a distant siren that resolves into the fire truck arriving with red rotating lights; failure is an unclear or unrealistic siren or a truck without rotating lights, recovered by correcting the audio or the visual; continuation is the yielding scene.
• Acceptance: the siren is heard clearly and realistically from a distance, and the fire truck then arrives with red rotating lights on.

FR-4 — Other vehicles pull aside; one driver refuses As a Video Creator, I should show other vehicles immediately pulling aside to give way while one driver remains in the middle of the road and refuses to pull over, so that the contrast between civic compliance and obstruction is visible.

• Provenance: explicit
• Lifecycle: the Video Creator places this content in scene 03 MENEPI; the observable result is other vehicles moving aside and one driver staying in the middle of the road; failure is an unclear contrast, recovered by re-staging the scene; continuation is the horn-and-siren moment.
• Acceptance: other vehicles immediately pull aside and one driver remains in the middle of the road and does not pull over.

FR-5 — First male Indonesian narration line As a Video Creator, I should place the male narrator's first Indonesian line — "Ketika mendengar suara sirene pemadam kebakaran, segera berikan jalan. Jangan menghalangi kendaraan yang sedang menjalankan tugas darurat." — so that the instruction is spoken aloud in Indonesian by a male voice.

• Provenance: explicit
• Lifecycle: the Video Creator places the line in the narration panel and positions it in the sequence; the observable result is the line spoken by a male narrator in Indonesian; failure is a missing, mistranscribed, or non-male-voiced line, recovered by correcting the narration; continuation is the horn-and-siren moment.
• Acceptance: the line is spoken by a male narrator in Indonesian and matches the required wording exactly.

FR-6 — Fire truck driver sounds the horn and siren; the blocking driver yields As a Video Creator, I should show the fire truck driver sounding the horn and siren while the blocking driver finally realizes and pulls aside, so that the obstruction resolves through the emergency vehicle's insistence.

• Provenance: explicit
• Lifecycle: the Video Creator places this content in scene 03 MENEPI; the observable result is the horn and siren sounding and the blocking driver then realizing and pulling aside; failure is an unresolved obstruction, recovered by re-staging the moment; continuation is the run to the fire location.
• Acceptance: the fire truck driver sounds the horn and siren, and the blocking driver finally realizes and pulls aside.

FR-7 — Fire truck speeds toward the fire location As a Video Creator, I should show the fire truck then speeding toward the fire location, so that the sequence transitions from the road to the emergency scene.

• Provenance: explicit
• Lifecycle: the Video Creator places this content as the transition into scene 04 LOKASI KEBAKARAN; the observable result is the fire truck moving at speed toward the location; failure is an abrupt or unclear transition, recovered by re-staging; continuation is arrival at the location.
• Acceptance: the fire truck is shown speeding toward the fire location after the driver yields.

FR-8 — Arrival, personnel deploy hoses, and water is sprayed As a Video Creator, I should show that on arrival at the location the personnel quickly get out carrying hoses and begin spraying water onto the flames, so that the firefighting response is depicted.

• Provenance: explicit
• Lifecycle: the Video Creator places this content in scene 04 LOKASI KEBAKARAN; the observable result is personnel exiting quickly with hoses and water being sprayed onto the flames; failure is a missing or unclear deployment, recovered by re-staging; continuation is the extinguishing scene.
• Acceptance: on arrival, personnel quickly get out carrying hoses and begin spraying water onto the flames.

FR-9 — Large flames, thick smoke, siren, pressurized water, and teamwork As a Video Creator, I should show large flames, thick smoke, siren sounds, pressurized water sounds, and firefighters working together, so that the fire scene carries full sensory and cooperative weight.

• Provenance: explicit
• Lifecycle: the Video Creator places this content in scene 04 LOKASI KEBAKARAN; the observable result is large flames, thick smoke, audible siren, audible pressurized water, and visible coordinated firefighter activity; failure is a missing sensory element or absent teamwork, recovered by adding the missing element; continuation is the extinguishing scene.
• Acceptance: large flames, thick smoke, siren sounds, pressurized water sounds, and firefighters working together are all present.

FR-10 — The flames are successfully extinguished As a Video Creator, I should end the video with the flames successfully extinguished, so that the emergency resolves.

• Provenance: explicit
• Lifecycle: the Video Creator places this content in scene 05 PADAM; the observable result is the fire out at the end of the video; failure is an unresolved fire at the end, recovered by re-staging the final scene; continuation is the closing narration and on-screen text.
• Acceptance: at the end of the video the flames are successfully extinguished.

FR-11 — Second male Indonesian narration line As a Video Creator, I should place the male narrator's closing Indonesian line — "Memberikan jalan kepada pemadam kebakaran bukan sekadar aturan, tetapi dapat membantu menyelamatkan nyawa." — so that the video closes on the moral of the message.

• Provenance: explicit
• Lifecycle: the Video Creator places the line in the narration panel at the end of the sequence; the observable result is the line spoken by a male narrator in Indonesian at the end of the video; failure is a missing, mistranscribed, or non-male-voiced line, recovered by correcting the narration; continuation is the on-screen text.
• Acceptance: at the end of the video the line is spoken by a male narrator in Indonesian and matches the required wording exactly.

FR-12 — Exact on-screen warning text As a Video Creator, I should display the on-screen text "DENGAR SIRENE? SEGERA MENEPIL DAN BERI JALAN!" so that the warning is read as well as heard.

• Provenance: explicit
• Lifecycle: the Video Creator places the on-screen text in the sequence; the observable result is the exact string displayed on screen; failure is a missing or altered string, recovered by correcting the text; continuation is delivery of the finished video.
• Acceptance: the on-screen text reads exactly "DENGAR SIRENE? SEGERA MENEPIL DAN BERI JALAN!".

FR-13 — Enter the production workspace from the public entry As a Video Creator, I should understand the product's purpose from the public entry surface and begin producing the video from there, so that I can start work without friction.

• Provenance: required_inference
• Lifecycle: initiated by the Video Creator on the Landing by activating MULAI PRODUKSI; the observable result is arrival in the Video Studio with the scene strip, narration panel, and audio meters available; failure is an inability to enter, recovered by retrying the CTA; continuation is scene assembly.
• Acceptance: the Landing states the product's purpose and the MULAI PRODUKSI action opens the Video Studio.

FR-14 — Assemble the ordered five-scene sequence As a Video Creator, I should assemble the video as the ordered sequence 01 JALAN RAYA, 02 SIRENE, 03 MENEPI, 04 LOKASI KEBAKARAN, 05 PADAM, so that the story runs in the required order.

• Provenance: required_inference
• Lifecycle: initiated by the Video Creator selecting a scene plate in the scene strip; the observable result is the selected scene's content on the main stage in its numbered position; failure is an out-of-order or incomplete sequence, recovered by reselecting and completing the scene; continuation is playback and render.
• Acceptance: the five scenes exist in the stated order and each holds its required content.

FR-15 — Review the required audio elements As a Video Creator, I should review the traffic ambience, siren, horn, and pressurized water audio in the workspace, so that every required sound is present and audible.

• Provenance: required_inference
• Lifecycle: initiated by the Video Creator reading the audio meters; the observable result is confirmation that all four required audio elements are present; failure is a missing or inaudible element, recovered by adding or correcting it; continuation is render.
• Acceptance: traffic ambience, siren, horn, and pressurized water are each present and audible in the finished video.

FR-16 — Render and receive the delivered video As a Video Creator, I should render the assembled sequence and receive the completed video, so that the deliverable exists.

• Provenance: required_inference
• Lifecycle: initiated by the Video Creator starting the render; the observable result is the hazard-stripe bar turning solid red while rendering, returning to stripes when idle, and the finished video becoming available; failure is a failed render, recovered by retrying; continuation is playback of the delivered video.
• Acceptance: the render completes and the delivered video plays back with all required content.

4. User Personas

Video Creator

Product context. The Video Creator is the person who must turn the supplied brief into a finished realistic, cinematic video. The brief is specific and non-negotiable in its content: a busy highway opening with traffic sound, a distant realistic siren, a fire truck arriving with red rotating lights, other vehicles pulling aside, one driver who refuses to pull over, a male Indonesian narrator delivering two exact lines, the fire truck driver sounding the horn and siren, the blocking driver finally yielding, the run to the fire location, firefighters deploying hoses and spraying water onto large flames and thick smoke, the fire extinguished at the end, and the exact on-screen text "DENGAR SIRENE? SEGERA MENEPIL DAN BERI JALAN!".

Primary goal. Deliver a completed video that is realistic and cinematic, contains every required scene, sound, narration line, and on-screen text in the required order, and ends with the flames extinguished.

Distinct accepted responsibilities. The Video Creator assembles the ordered five-scene sequence; places the two exact Indonesian narration lines for a male narrator; places the exact on-screen warning text; ensures the required audio elements — traffic ambience, siren, horn, and pressurized water — are present; and renders and receives the finished video. This role's work is editorial and compositional: it is about ordering, placing, and verifying required content, not about writing new content or managing a media library.

Relevant inputs and decisions. The inputs are the scene brief, the two exact narration lines, the exact on-screen text, and the required audio list. The decisions are which scene is being worked on, whether each scene holds its required content, whether each narration line and the on-screen text match the required wording exactly, whether all four audio elements are present, and whether the sequence is ready to render.

Interactions with other accepted participants. There are no other accepted human participants. The in-story characters — the blocking driver, the fire truck driver, the firefighters, and the narrator voice — are content within the produced video, not product users. The Video Creator works alone in the workspace.

Observable success. A delivered video that plays back as a realistic, cinematic sequence, opens on a busy highway with traffic sound, carries the distant siren into the fire truck's arrival with red rotating lights, shows the other vehicles yielding and the one driver refusing, delivers both male Indonesian narration lines exactly, shows the horn and siren and the driver finally yielding, shows the run to the fire, shows the firefighters deploying hoses and spraying water onto large flames and thick smoke with siren and pressurized water audible, ends with the flames extinguished, and displays the exact on-screen text.

5. Core User Flows

Flow 1 — Enter the product and begin production

1. The Video Creator arrives at the Landing surface. No identity or sign-in is required.
2. The Video Creator reads the type-wall headline DENGAR SIRENE? and the hazard-yellow imperative block SEGERA MENEPI. BERI JALAN., and sees the warning marquee running the full string DENGAR SIRENE? SEGERA MENEPIL DAN BERI JALAN! along the bottom edge. Under prefers-reduced-motion the marquee is stopped and wrapped to static whole lines.
3. The Video Creator activates MULAI PRODUKSI on the red CTA plate.
4. Observable result: the Video Studio opens with the hazard-stripe utility bar idle, the five-plate scene strip, the narration panel, and the audio meters.
5. Failure and recovery: if the Video Studio cannot be entered, the Landing states the failure plainly and the Video Creator retries MULAI PRODUKSI; the warning content remains readable throughout.
6. Continuation: the Video Creator begins scene assembly.

Flow 2 — Assemble the ordered scene sequence

1. Starting in the Video Studio, the Video Creator selects 01 JALAN RAYA from the scene strip. The plate inverts to red with the numeral in off-white and the scene title slides in from the left.
2. The Video Creator places the opening content: a busy highway with audible vehicle sounds and traffic atmosphere. Observable result: the main stage shows the busy highway opening and the traffic ambience is present in the audio meters.
3. The Video Creator selects 02 SIRENE and places a clearly audible, realistic fire-truck siren heard from a distance, followed by the fire truck arriving with its red rotating lights on. Observable result: the siren resolves from distance into the arriving truck with red rotating lights.
4. The Video Creator selects 03 MENEPI and places the yielding content: other vehicles immediately pull aside to give way, while one driver remains in the middle of the road and refuses to pull over. Observable result: the contrast between the compliant vehicles and the blocking driver is visible.
5. Within 03 MENEPI, the Video Creator places the horn-and-siren moment: the fire truck driver sounds the horn and siren, and the blocking driver finally realizes and pulls aside. Observable result: the obstruction resolves.
6. The Video Creator places the transition in which the fire truck speeds toward the fire location. Observable result: the sequence moves from the road to the emergency scene.
7. The Video Creator selects 04 LOKASI KEBAKARAN and places the arrival content: personnel quickly get out carrying hoses and begin spraying water onto the flames. Observable result: the deployment and the water spray are visible.
8. Within 04 LOKASI KEBAKARAN, the Video Creator places large flames, thick smoke, siren sounds, pressurized water sounds, and firefighters working together. Observable result: all five sensory and cooperative elements are present and confirmed in the audio meters.
9. The Video Creator selects 05 PADAM and places the ending: the flames are successfully extinguished. Observable result: the fire is out at the end of the video.
10. Failure and recovery: if any scene is incomplete, the workspace identifies the specific gap and the Video Creator completes that scene; the scene strip retains all other content so no work is lost.
11. Continuation: narration and on-screen text placement.

Flow 3 — Place the male Indonesian narration and the exact on-screen text

1. Starting in the Video Studio, the Video Creator opens the narration panel.
2. The Video Creator places the first line — "Ketika mendengar suara sirene pemadam kebakaran, segera berikan jalan. Jangan menghalangi kendaraan yang sedang menjalankan tugas darurat." — spoken by a male narrator in Indonesian, positioned in the sequence where the instruction applies.
3. The Video Creator places the closing line — "Memberikan jalan kepada pemadam kebakaran bukan sekadar aturan, tetapi dapat membantu menyelamatkan nyawa." — spoken by a male narrator in Indonesian, positioned at the end of the video.
4. The Video Creator places the on-screen text DENGAR SIRENE? SEGERA MENEPIL DAN BERI JALAN! in the sequence. Observable result: the exact string is displayed on screen.
5. Failure and recovery: if a narration line is missing, mistranscribed, or not voiced by a male narrator, or if the on-screen text does not match the exact required string, the workspace identifies the specific mismatch and the Video Creator corrects it.
6. Continuation: playback review and render.

Flow 4 — Review playback and render the delivered video

1. Starting in the Video Studio, the Video Creator plays back the assembled sequence using the siren disc as the play control.
2. During playback the on-screen warning string renders as a yellow plate sliding horizontally across the stage as a marquee, stopping on a hard cut at the final word JALAN! with a red flash frame. Under prefers-reduced-motion the marquee is stopped and the string is shown whole.
3. The Video Creator confirms the required audio elements — traffic ambience, siren, horn, and pressurized water — are present and audible in the audio meters.
4. The Video Creator starts the render. Observable result: the hazard-stripe utility bar turns solid red while rendering and returns to stripes when idle, with the siren disc serving as the render progress ring.
5. Observable result: the delivered video becomes available and plays back as a realistic, cinematic sequence that opens on the busy highway, carries the siren into the fire truck's arrival with red rotating lights, shows the other vehicles yielding and the one driver refusing, delivers both male Indonesian narration lines exactly, shows the horn and siren and the driver finally yielding, shows the run to the fire, shows the firefighters deploying hoses and spraying water onto large flames and thick smoke with siren and pressurized water audible, ends with the flames extinguished, and displays the exact on-screen text.
6. Failure and recovery: if the render fails, the hazard-stripe bar returns to stripes and the failure is stated with a retry; the Video Creator retries the render, and the scene strip, narration panel, and audio meters retain their content so no work is lost.
7. Continuation: the Video Creator delivers or downloads the finished video.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. The muse is Paula Scher, and the headline idea is "Sirens as architecture: typographic maximalism for an emergency-response story." Typography is the image: words fill the frame, colour blocks collide, and energy beats polish, because a right-of-way alert is literally a message that must cut through noise at speed.

Colour tokens (dark mode):

Proportion: roughly 60% black, 25% red, 10% off-white, 5% yellow/teal.

Typography:

• Headings — Anton. Extreme display scale, all-caps, tracking tightened to -0.02em, leading crushed to 0.86 so stacked lines lock together like painted wood type. Headlines are set as full-bleed compositions; a word may be rotated 90°, split across two colour blocks, or repeated as an echo.
• Body and UI — Archivo at 400/600, with 700 caps at 12px / 0.18em tracking for micro-labels (timecode, scene number, REKAM, SUARA).
• Scale: 1.5 modular display / 1.25 UI. Display: 56px mobile → 128px desktop (clamp(3.5rem, 10vw, 8rem)) for hero words; 40px → 88px for section heads. UI: 28 / 20 / 16 / 14 / 12.
• Exact warning string: DENGAR SIRENE? SEGERA MENEPIL DAN BERI JALAN! is set in Anton at clamp(2rem, 6.5vw, 5.5rem), stacked on three lines inside a yellow block.

Shape language: Hard edges only — zero border-radius on type blocks, buttons, and cards. Diagonal bands, rotated type plates, and thick 6px black rules separate sections. Colour blocks are rectangles that bleed off the edge of the viewport rather than floating as cards. The one repeated soft shape is the circular siren/rotator glyph, drawn as a hard-edged disc with concentric rings, used as a button, a progress indicator, and a divider.

Layout: Poster grid, not app grid — a 12-column field where a single headline can occupy 9 columns and a colour block the remaining 3, with sections butted edge-to-edge and no gutters of empty white. The Landing opens with a full-viewport type wall. The Video Studio is a three-band workspace: a top hazard-stripe utility bar, a left scene-strip column of numbered shots, and a main stage where the current scene, the narration script, and the audio meters sit in ruled panels. Everything aligns to a visible baseline rule system; nothing floats in a centred column.

Imagery: Typography is the image. Where photography appears it is high-contrast, desaturated documentary — night highway with red light trails, a fire truck's front grille cropped hard to the frame, a firefighter silhouetted against flame, thick smoke shot against black. Images are always cropped to the grid and often overprinted with a flat red or yellow plate at 85% so type sits on top. No stock-smiling-people, no gradient blobs, no glass panels.

Avoid: border-radius on any card, button, or type block; gradient blobs, frosted glass panels, or soft drop shadows; a centred hero with headline, subtext, and a blue button; blue or indigo as primary or accent on a white ground; Inter, Roboto, Poppins, or system-ui for headings or body; soft easing or bouncy spring motion on type; grids of identical hover-lift cards; photography that is bright, warm, or lifestyle-toned. The generic indigo/blue-on-white SaaS template is forbidden for this project.

Readable-text integrity: 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, and 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. Moving and scrollable content may cross the viewport or container edge by design and is judged by whether it actually moves and whether every item becomes fully readable as it passes. With prefers-reduced-motion it stops and shows whole items, wrapping into rows or sitting in a horizontally scrollable row (overflow-x: auto).

7. Signature Design Concept

The public entry is a torn-poster type wall — a composition that could not be mistaken for SaaS.

A full-viewport asphalt-black field (#0C0C0D) carries the words DENGAR SIRENE? set in Anton at clamp(3.5rem, 12vw, 11rem), occupying nine columns and bleeding off the right edge so the question mark is cut by the viewport as decoration while the readable words remain whole and inside the viewport at every breakpoint. Beneath it, pinned flush-left, a solid hazard-yellow block (#FFC400) the width of five columns holds SEGERA MENEPI. BERI JALAN. in black Anton at 40–72px. The remaining space is a red plate (#E01B24) carrying a hard-edged rotating-light disc and the single CTA MULAI PRODUKSI in Archivo 700 caps on red with off-white text. No centred stack, no subhead, no blue button — the composition is a poster torn in three colour blocks, and a thin marquee of the full warning string runs along the bottom edge.

The concept recomposes only accepted content and controls: the warning message, the imperative line, the siren glyph, and the single entry action. It introduces no new behaviour, page, or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the type wall itself — DENGAR SIRENE? in Anton at extreme display scale, with the hazard-yellow imperative block and the red CTA plate as the two colliding colour fields.
• Input → transformation → outcome thesis: as the Video Creator arrives and scrolls, the poster's colour blocks wipe into place — a red plate slides across a section on scroll, the warning marquee runs the full string horizontally along the bottom edge, and the siren disc pulses in two hard on/off frames. The outcome is a first screen that reads as an alarm rather than a landing page, and the single CTA MULAI PRODUKSI remains the one thing to act on.
• Motion vocabulary: poster-mechanical — type marquees that scroll the warning line horizontally across the viewport; staggered word reveals where each word slams in from the left on a hard cut (no easing, 90ms steps); colour-block wipes that slide a red plate across a section on scroll; a siren pulse on the rotator glyph in two hard on/off frames, not a soft glow; hover on a scene card flips the plate from black to red with the number inverting to off-white.
• Composed first frame: asphalt-black field; DENGAR SIRENE? filling nine columns and bleeding off the right edge; the hazard-yellow block flush-left beneath it holding SEGERA MENEPI. BERI JALAN. in black caps; the red plate at right carrying the hard-edged rotating-light disc and MULAI PRODUKSI; the warning marquee running along the bottom edge.
• Reduced-motion state: all marquees stop and wrap to static whole lines; the siren glyph holds a steady red; word reveals and colour-block wipes resolve immediately to their final positions; every readable item is shown whole.

9. Non-Functional Requirements

NFR-1 — Realism and cinematic quality. The delivered video must be realistic and cinematic in style. Provenance: explicit. Rationale: the authoritative brief states this as a hard constraint, and the creative direction's documentary imagery treatment (high-contrast, desaturated, cropped to the grid) supports it.

NFR-2 — Narration voice and language. Narration must be spoken by a male narrator in Indonesian. Provenance: explicit. Rationale: stated as a hard constraint in the authoritative brief.

NFR-3 — Exact on-screen text. The on-screen text must read exactly DENGAR SIRENE? SEGERA MENEPIL DAN BERI JALAN!. Provenance: explicit. Rationale: stated as a hard constraint in the authoritative brief; the string is reproduced verbatim, including its original spelling.

NFR-4 — Required ending. The video must end with the flames successfully extinguished. Provenance: explicit. Rationale: stated as a hard constraint in the authoritative brief.

NFR-5 — Required audio presence. Traffic ambience, siren, horn, and pressurized water sounds must be present and audible. Provenance: explicit. Rationale: the brief requires audible vehicle sounds and traffic atmosphere, a clearly audible and realistic siren, the horn and siren sounded by the fire truck driver, and pressurized water sounds.

NFR-6 — Readable text and controls at every viewport. Headlines, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering them. Provenance: explicit (creative direction). Rationale: the direction's readable-text integrity rule takes precedence over any cropping gesture, which is carried by imagery and decoration instead.

NFR-7 — Reduced-motion support. With prefers-reduced-motion, all marquees stop and wrap to static whole lines, the siren glyph holds a steady red, and moving content becomes fully readable as whole items. Provenance: explicit (creative direction). Rationale: the direction specifies this behavior for every marquee and the siren glyph.

NFR-8 — Anonymous access. Neither the Landing nor the Video Studio requires identity, sign-in, or account creation. Provenance: required_inference. Rationale: the accepted work is completable without durable actor-specific state that must be privately owned or resumed, so no identity continuity is indispensable.

10. Tech Stack

• Frontend: React, built as a two-surface anonymous web product (Landing, Video Studio). Provenance: [Default — not specified by user].
• Styling: CSS with the direction's tokens — Anton and Archivo typefaces, hard-edged colour blocks, zero border-radius, 12-column poster grid. Provenance: explicit (creative direction).
• Backend: Python / FastAPI, serving the workspace state and the render job. Provenance: [Default — not specified by user].
• Storage: Appropriate storage for the video project's scene content, narration lines, on-screen text, audio tracks, and rendered output. Provenance: [Default — not specified by user].
• Containerization: Docker / docker-compose for local and single-host deployment. Provenance: [Default — not specified by user].
• Orchestration: Kubernetes is not required; the deployment does not demand it. Provenance: [Default — not specified by user].

No source-specified technology choices were supplied in the authoritative thread; the above are labeled defaults and do not constitute product behavior.

11. Assumptions and Constraints

Assumptions

• A1 — The Video Creator is the only active human user of the product; the in-story characters are content within the produced video, not product users. Provenance: required_inference from the closed persona catalog.
• A2 — The product's deliverable is the finished video; the workspace exists to produce it. Provenance: required_inference from the authoritative brief.
• A3 — The five-scene ordering 01 JALAN RAYA, 02 SIRENE, 03 MENEPI, 04 LOKASI KEBAKARAN, 05 PADAM reflects the brief's narrative order. Provenance: required_inference from the authoritative brief's chronological scene description.
• A4 — The on-screen text string is reproduced exactly as written in the brief, including its original spelling of MENEPIL. Provenance: explicit.

Constraints

• C1 — The video must be realistic and cinematic. Provenance: explicit.
• C2 — Narration must be spoken by a male narrator in Indonesian. Provenance: explicit.
• C3 — The on-screen text must read exactly DENGAR SIRENE? SEGERA MENEPIL DAN BERI JALAN!. Provenance: explicit.
• C4 — The video must end with the flames successfully extinguished. Provenance: explicit.
• C5 — The creative direction's palette, typefaces, hard-edged shape language, poster grid, and motion vocabulary are binding for the product surfaces. Provenance: explicit (creative direction).
• C6 — The generic indigo/blue-on-white SaaS template is forbidden for this project. Provenance: explicit (creative direction).
• C7 — Readable text and controls stay whole at every viewport; the cropping gesture is carried by imagery and decoration instead. Provenance: explicit (creative direction).
• C8 — No future-phase requirements are established by the authoritative thread. Provenance: explicit (absence of any future horizon in the source).

12. Glossary

• Video Creator — The single active human user of the product; assembles the scene sequence, places the narration and on-screen text, and renders the finished video.
• Landing — The public entry surface; states the product's purpose and provides the MULAI PRODUKSI action.
• Video Studio — The production workspace where the ordered scene sequence, narration, on-screen text, and audio are assembled and the video is rendered.
• Scene strip — The left column of five numbered shot plates (01 JALAN RAYA, 02 SIRENE, 03 MENEPI, 04 LOKASI KEBAKARAN, 05 PADAM) in the Video Studio.
• Main stage — The ruled panel area in the Video Studio holding the current scene, the narration script, and the audio meters.
• Hazard-stripe utility bar — The repeating 45° black/#FFC400 stripe bar across the top of the Video Studio that doubles as the render-status indicator.
• Siren disc — The hard-edged circle with concentric rings used as play button, render progress ring, and section divider.
• Narration line — One of the two exact Indonesian lines spoken by the male narrator.
• On-screen text — The exact warning string DENGAR SIRENE? SEGERA MENEPIL DAN BERI JALAN! displayed in the video.
• Render job — The production run that yields the delivered video.
• Blocking driver — The in-story character who remains in the middle of the road and refuses to pull over; content within the video, not a product user.
• Fire truck driver — The in-story character who sounds the horn and siren; content within the video, not a product user.
• Firefighters — The in-story personnel who deploy hoses and spray water; content within the video, not product users.