System Requirements Document for upin-ipin

1. Introduction

upin-ipin is a 30-second 3D animated video delivered in vertical 9:16 format. The video follows Upin and Ipin as they walk through the Mayang area of Jambi in the afternoon, observing the street atmosphere, vehicles, trees, and surroundings, then walk toward SMA Negeri 14 Jambi, where the camera follows them from behind and reveals the front of the school. They stop in front of the school, observe the surroundings from outside, and wave at the camera.

The product intent is to produce a cheerful, funny 3D animation with natural facial expressions, smooth motion, warm afternoon lighting, cinematic camera work, and a lively Jambi atmosphere. The video must not depict dangerous activities, and the school name text "SMA Negeri 14 Jambi" must be clearly visible and must not change or vary.

The audience is the Video Creator / Animator who assembles the scene, and the Viewer / Audience who watches the completed vertical 9:16 animation.

2. System Overview

The system delivers a single 30-second vertical 9:16 3D animated video. The current delivery includes:

• A Landing surface that gives an anonymous first impression explaining the 30-second vertical 3D animation and directs the Viewer / Audience to the delivered outcome.
• An Animation surface that owns assembly of the Mayang walk, approach to SMA Negeri 14 Jambi, school-front reveal, stop, and wave sequence.
• A Dialogue surface that owns the specified dialogue beats and matching admiring and joyful character expressions.
• A Signage surface that owns the clear, unchanged rendering of the SMA Negeri 14 Jambi name text.
• A Style surface that owns the cheerful 3D treatment, smooth motion, warm afternoon lighting, and cinematic lively-Jambi presentation.

All five surfaces are application-owned custom pages with no access requirement (anonymous access). The Video Creator / Animator uses the Animation, Dialogue, Signage, and Style surfaces to assemble and configure the video. The Viewer / Audience consumes the completed animation through the Landing and Animation surfaces.

Narrow exclusions: No dangerous activities may be shown. The school name text must not change or vary. The video must be exactly 30 seconds and vertical 9:16.

2a. Product Interpretation and Delivery Boundary

The product is a 3D animated video, not a general-purpose video platform. The delivery boundary is the 30-second vertical 9:16 animation itself, assembled from the accepted scene sequence, dialogue beats, signage requirements, and style treatment. The Landing surface is an anonymous public entry that explains the animation and directs the Viewer / Audience to the delivered outcome. The Animation, Dialogue, Signage, and Style surfaces are the working surfaces where the Video Creator / Animator assembles the video. No account creation, authentication, or permission differentiation is required or accepted. No future-horizon requirements are present in the authoritative source.

2b. Source Content Inventory

Not applicable. No reference directive explicitly contains content_source.

2c. Page Content and Component Coverage

Landing

• Information/state: Anonymous public entry explaining the 30-second vertical 9:16 3D animation. Displays the product name "upin-ipin", a brief description of the animation (Upin and Ipin walking through Mayang, Jambi, toward SMA Negeri 14 Jambi), and the duration/format facts (30 seconds, 9:16 vertical).
• Primary actions: Direct the Viewer / Audience to the delivered outcome (the Animation surface).
• Supporting actions: View the school-name plaque (SMA Negeri 14 Jambi) rendered clearly and unchanged.
• Domain entities: Video, Scene, Character (Upin, Ipin), Location (Mayang, Jambi; SMA Negeri 14 Jambi).
• Component responsibilities: Hero section with product name and description; duration/format badge; call-to-action to view the animation; fixed signage plaque component showing "SMA NEGERI 14 JAMBI".
• States: Loading (initial page load); empty (not applicable — static content); success (page rendered with all content); error (content fails to load — show fallback message); recovery (retry loading content).

Animation

• Information/state: Assembly of the scene sequence: (1) Upin and Ipin walking around Mayang, Jambi, in the afternoon, observing street atmosphere, vehicles, trees, and surroundings; (2) walking toward SMA Negeri 14 Jambi with camera following from behind; (3) camera revealing the front of the school; (4) stopping in front of the school, observing from outside; (5) waving at the camera.
• Primary actions: Assemble and sequence the scene beats; preview the 30-second vertical 9:16 animation; ensure total duration is exactly 30 seconds.
• Supporting actions: Adjust scene timing; verify camera follow and reveal; verify the stop-and-wave sequence.
• Domain entities: Scene, Camera, Character (Upin, Ipin), Location (Mayang, Jambi; SMA Negeri 14 Jambi), Vehicle, Tree.
• Component responsibilities: Scene timeline; camera path controller (follow from behind, then reveal front of school); character walk controller; environment renderer (street, vehicles, trees, surroundings); duration indicator (30 seconds); format indicator (9:16 vertical).
• States: Loading (scene assets loading); empty (no scenes assembled — prompt to add scenes); success (all five scene beats assembled and previewable at 30 seconds); error (scene fails to load or duration exceeds/falls short of 30 seconds — show error and allow correction); recovery (reload scene assets or adjust timing).

Dialogue

• Information/state: The specified dialogue beats and matching character expressions:
  • Upin (admiring expression): "Ipin, ramai juga kawasan Mayang ni!"
  • Ipin: "Betul, betul, betul!"
  • Upin: "Eh, Ipin! Itu SMA Negeri 14 Jambi!"
  • Ipin (joyful expression): "Wah, besar sekolahnya!"
  • Upin: "Seronok juga jalan-jalan di Mayang!"
  • Ipin: "Betul, betul, betul!"
• Primary actions: Assign each dialogue line to the correct character at the correct scene beat; set the matching expression (admiring for Upin's first line, joyful for Ipin's "Wah, besar sekolahnya!").
• Supporting actions: Preview dialogue with expression; verify natural facial expressions.
• Domain entities: Dialogue line, Character (Upin, Ipin), Expression (admiring, joyful), Scene beat.
• Component responsibilities: Dialogue ledger pairing speaker (Upin/Ipin) with line; expression selector; preview player; timing alignment with scene beats.
• States: Loading (dialogue data loading); empty (no dialogue assigned — prompt to add lines); success (all six dialogue beats assigned with correct expressions); error (dialogue fails to load or expression mismatch — show error); recovery (reassign dialogue or expression).

Signage

• Information/state: The school name text "SMA Negeri 14 Jambi" rendered clearly and unchanged. The text must be clearly visible and must not change or vary.
• Primary actions: Render the school name text clearly and consistently across all appearances.
• Supporting actions: Verify the text is legible and unchanged in every frame where it appears.
• Domain entities: Signage text ("SMA Negeri 14 Jambi"), School (SMA Negeri 14 Jambi).
• Component responsibilities: Fixed signage plaque component; text renderer ensuring the exact string "SMA Negeri 14 Jambi" is used; visibility checker ensuring the text is clearly visible.
• States: Loading (signage asset loading); empty (signage not yet placed — prompt to place); success (signage rendered clearly and unchanged); error (signage text missing, obscured, or altered — show error); recovery (re-render signage with the correct unchanged text).

Style

• Information/state: The visual and motion treatment: cheerful 3D, funny, natural facial expressions, smooth motion, warm afternoon lighting, cinematic camera, lively Jambi atmosphere.
• Primary actions: Apply the cheerful 3D style; set warm afternoon lighting; configure cinematic camera; ensure smooth motion.
• Supporting actions: Preview style treatment; verify natural facial expressions; verify lively Jambi atmosphere.
• Domain entities: Style preset, Lighting (warm afternoon), Camera (cinematic), Motion (smooth), Atmosphere (lively Jambi).
• Component responsibilities: Style preset selector; lighting controller (warm afternoon); camera controller (cinematic); motion smoother; atmosphere renderer (lively Jambi).
• States: Loading (style assets loading); empty (no style applied — prompt to select); success (cheerful 3D style, warm afternoon lighting, cinematic camera, smooth motion, lively Jambi atmosphere applied); error (style fails to apply — show error); recovery (reapply style preset).

3. Functional Requirements

FR-01: Produce a 30-second 3D animated video As a Video Creator / Animator, I should produce a 3D animated video with a duration of exactly 30 seconds, so that the delivered animation meets the specified duration constraint.

• Provenance: explicit
• Trigger/input: Video Creator / Animator initiates video production.
• Observable result: A 3D animated video with a total duration of 30 seconds.
• Access state: Anonymous (no access requirement).
• Failure/recovery: If duration exceeds or falls short of 30 seconds, the Video Creator / Animator adjusts scene timing until the total is exactly 30 seconds.
• Continuation: The completed 30-second video proceeds to format verification (FR-02).
• Owner: Animation surface.

FR-02: Use vertical 9:16 format As a Video Creator / Animator, I should deliver the video in vertical 9:16 format, so that the animation matches the specified aspect ratio.

• Provenance: explicit
• Trigger/input: Video Creator / Animator sets the output format.
• Observable result: The video is rendered in vertical 9:16 format.
• Access state: Anonymous (no access requirement).
• Failure/recovery: If the format is not 9:16, the Video Creator / Animator corrects the output format.
• Continuation: The correctly formatted video proceeds to scene assembly (FR-03).
• Owner: Animation surface.

FR-03: Scene opens with Upin and Ipin walking around Mayang, Jambi, in the afternoon As a Video Creator / Animator, I should open the scene with Upin and Ipin walking around the Mayang area, Jambi, in the afternoon, observing the street atmosphere, vehicles, trees, and surrounding environment, so that the animation begins with the specified establishing scene.

• Provenance: explicit
• Trigger/input: Video Creator / Animator assembles the opening scene.
• Observable result: The video opens with Upin and Ipin walking in Mayang, Jambi, in the afternoon, with visible street atmosphere, vehicles, trees, and surroundings.
• Access state: Anonymous (no access requirement).
• Failure/recovery: If the opening scene is missing required elements (street, vehicles, trees, surroundings), the Video Creator / Animator adds them.
• Continuation: The opening scene proceeds to Upin's first dialogue (FR-04).
• Owner: Animation surface.

FR-04: Upin says with an admiring expression: "Ipin, ramai juga kawasan Mayang ni!" As a Video Creator / Animator, I should have Upin say "Ipin, ramai juga kawasan Mayang ni!" with an admiring expression, so that the specified dialogue beat and expression are delivered.

• Provenance: explicit
• Trigger/input: Video Creator / Animator assigns the line and expression to Upin.
• Observable result: Upin speaks the exact line "Ipin, ramai juga kawasan Mayang ni!" with an admiring expression.
• Access state: Anonymous (no access requirement).
• Failure/recovery: If the line or expression is incorrect, the Video Creator / Animator corrects the dialogue or expression.
• Continuation: Ipin's reply follows (FR-05).
• Owner: Dialogue surface.

FR-05: Ipin replies: "Betul, betul, betul!" As a Video Creator / Animator, I should have Ipin reply "Betul, betul, betul!", so that the specified dialogue beat is delivered.

• Provenance: explicit
• Trigger/input: Video Creator / Animator assigns the line to Ipin.
• Observable result: Ipin speaks the exact line "Betul, betul, betul!".
• Access state: Anonymous (no access requirement).
• Failure/recovery: If the line is incorrect, the Video Creator / Animator corrects the dialogue.
• Continuation: The walk toward SMA Negeri 14 Jambi follows (FR-06).
• Owner: Dialogue surface.

FR-06: They walk toward SMA Negeri 14 Jambi; camera follows from behind and then shows the front of the school As a Video Creator / Animator, I should have Upin and Ipin walk toward SMA Negeri 14 Jambi with the camera following them from behind and then showing the front of the school, so that the specified camera movement and destination reveal are delivered.

• Provenance: explicit
• Trigger/input: Video Creator / Animator configures the camera path and character walk.
• Observable result: The camera follows Upin and Ipin from behind as they walk toward SMA Negeri 14 Jambi, then reveals the front of the school.
• Access state: Anonymous (no access requirement).
• Failure/recovery: If the camera does not follow from behind or does not reveal the school front, the Video Creator / Animator corrects the camera path.
• Continuation: Upin's exclamation follows (FR-07).
• Owner: Animation surface.

FR-07: Upin says: "Eh, Ipin! Itu SMA Negeri 14 Jambi!" As a Video Creator / Animator, I should have Upin say "Eh, Ipin! Itu SMA Negeri 14 Jambi!", so that the specified dialogue beat is delivered.

• Provenance: explicit
• Trigger/input: Video Creator / Animator assigns the line to Upin.
• Observable result: Upin speaks the exact line "Eh, Ipin! Itu SMA Negeri 14 Jambi!".
• Access state: Anonymous (no access requirement).
• Failure/recovery: If the line is incorrect, the Video Creator / Animator corrects the dialogue.
• Continuation: Ipin's joyful reply follows (FR-08).
• Owner: Dialogue surface.

FR-08: Ipin replies joyfully: "Wah, besar sekolahnya!" As a Video Creator / Animator, I should have Ipin reply joyfully "Wah, besar sekolahnya!", so that the specified dialogue beat and joyful expression are delivered.

• Provenance: explicit
• Trigger/input: Video Creator / Animator assigns the line and joyful expression to Ipin.
• Observable result: Ipin speaks the exact line "Wah, besar sekolahnya!" with a joyful expression.
• Access state: Anonymous (no access requirement).
• Failure/recovery: If the line or expression is incorrect, the Video Creator / Animator corrects the dialogue or expression.
• Continuation: The stop-and-wave sequence follows (FR-09).
• Owner: Dialogue surface.

FR-09: They stop in front of the school, observe the surroundings from outside, then wave at the camera As a Video Creator / Animator, I should have Upin and Ipin stop in front of the school, observe the surroundings from outside, then wave at the camera, so that the specified closing action is delivered.

• Provenance: explicit
• Trigger/input: Video Creator / Animator assembles the stop, observe, and wave sequence.
• Observable result: Upin and Ipin stop in front of SMA Negeri 14 Jambi, observe the surroundings from outside, and wave at the camera.
• Access state: Anonymous (no access requirement).
• Failure/recovery: If the stop, observe, or wave action is missing, the Video Creator / Animator adds it.
• Continuation: Upin's closing line follows (FR-10).
• Owner: Animation surface.

FR-10: Upin says: "Seronok juga jalan-jalan di Mayang!" As a Video Creator / Animator, I should have Upin say "Seronok juga jalan-jalan di Mayang!", so that the specified dialogue beat is delivered.

• Provenance: explicit
• Trigger/input: Video Creator / Animator assigns the line to Upin.
• Observable result: Upin speaks the exact line "Seronok juga jalan-jalan di Mayang!".
• Access state: Anonymous (no access requirement).
• Failure/recovery: If the line is incorrect, the Video Creator / Animator corrects the dialogue.
• Continuation: Ipin's final reply follows (FR-11).
• Owner: Dialogue surface.

FR-11: Ipin replies: "Betul, betul, betul!" As a Video Creator / Animator, I should have Ipin reply "Betul, betul, betul!", so that the specified closing dialogue beat is delivered.

• Provenance: explicit
• Trigger/input: Video Creator / Animator assigns the line to Ipin.
• Observable result: Ipin speaks the exact line "Betul, betul, betul!".
• Access state: Anonymous (no access requirement).
• Failure/recovery: If the line is incorrect, the Video Creator / Animator corrects the dialogue.
• Continuation: The video concludes at 30 seconds.
• Owner: Dialogue surface.

FR-12: Animation style — cheerful 3D, funny, natural facial expressions, smooth motion, warm afternoon lighting, cinematic camera, lively Jambi atmosphere As a Video Creator / Animator, I should apply a cheerful 3D animation style that is funny, with natural facial expressions, smooth motion, warm afternoon lighting, cinematic camera, and a lively Jambi atmosphere, so that the specified visual and motion treatment is delivered.

• Provenance: explicit
• Trigger/input: Video Creator / Animator applies the style treatment.
• Observable result: The video exhibits cheerful 3D animation, funny tone, natural facial expressions, smooth motion, warm afternoon lighting, cinematic camera, and a lively Jambi atmosphere.
• Access state: Anonymous (no access requirement).
• Failure/recovery: If any style element is missing, the Video Creator / Animator adjusts the style treatment.
• Continuation: The styled video proceeds to signage verification (FR-13).
• Owner: Style surface.

FR-13: School name text must be clearly visible and must not change/vary As a Video Creator / Animator, I should ensure the school name text "SMA Negeri 14 Jambi" is clearly visible and does not change or vary, so that the explicit signage constraint is satisfied.

• Provenance: explicit
• Trigger/input: Video Creator / Animator places and verifies the school name text.
• Observable result: The text "SMA Negeri 14 Jambi" is clearly visible and remains unchanged throughout the video.
• Access state: Anonymous (no access requirement).
• Failure/recovery: If the text is obscured, illegible, or altered, the Video Creator / Animator corrects the signage rendering.
• Continuation: The video is complete and ready for viewing.
• Owner: Signage surface.

FR-14: Do not show dangerous activities As a Video Creator / Animator, I should not show dangerous activities in the video, so that the explicit safety constraint is satisfied.

• Provenance: explicit
• Trigger/input: Video Creator / Animator reviews the scene content.
• Observable result: No dangerous activities appear in the video.
• Access state: Anonymous (no access requirement).
• Failure/recovery: If a dangerous activity is present, the Video Creator / Animator removes or replaces it.
• Continuation: The video is complete and ready for viewing.
• Owner: Animation surface.

FR-15: Viewer / Audience watches the completed 30-second vertical 9:16 animation As a Viewer / Audience, I should watch the completed 30-second vertical 9:16 animation following Upin and Ipin's walk through Mayang and their stop in front of SMA Negeri 14 Jambi, so that I consume the delivered outcome with its dialogue, expressions, and school-name signage.

• Provenance: required_inference
• Trigger/input: Viewer / Audience opens the Landing surface and proceeds to the Animation surface.
• Observable result: The Viewer / Audience views the 30-second vertical 9:16 animation with all specified dialogue, expressions, and signage.
• Access state: Anonymous (no access requirement).
• Failure/recovery: If the animation fails to load or play, the Viewer / Audience retries loading the animation.
• Continuation: The Viewer / Audience completes viewing the animation.
• Owner: Landing surface (entry) and Animation surface (playback).

4. User Personas

Video Creator / Animator

Product context: The Video Creator / Animator is the requester who needs a 30-second vertical 9:16 3D animated video produced from the described scene script. This role assembles the scene sequence (Mayang street walk, approach to SMA Negeri 14 Jambi, front-of-school stop and wave), sets the dialogue lines and expressions, and applies the cheerful 3D style, warm afternoon lighting, and cinematic camera, with the school name sign rendered clearly and consistently.

Primary goal: Produce a complete 30-second vertical 9:16 3D animated video that faithfully delivers the specified scene sequence, dialogue beats, expressions, style treatment, and signage constraint.

Distinct accepted responsibilities:

• Assemble the five scene beats: (1) Mayang walk with street atmosphere, vehicles, trees, and surroundings; (2) approach to SMA Negeri 14 Jambi with camera following from behind; (3) school-front reveal; (4) stop and observe from outside; (5) wave at the camera.
• Assign the six dialogue beats to the correct characters with the correct expressions (Upin admiring, Ipin joyful).
• Apply the cheerful 3D style, funny tone, natural facial expressions, smooth motion, warm afternoon lighting, cinematic camera, and lively Jambi atmosphere.
• Ensure the school name text "SMA Negeri 14 Jambi" is clearly visible and unchanged.
• Ensure no dangerous activities are shown.
• Ensure the total duration is exactly 30 seconds and the format is vertical 9:16.

Relevant inputs or decisions: Scene script (the authoritative requirement thread); dialogue lines and expressions; style treatment choices; camera path decisions; signage placement decisions; duration and format verification.

Interactions with other accepted participants: The Video Creator / Animator produces the video that the Viewer / Audience consumes. The Video Creator / Animator's work directly determines what the Viewer / Audience sees and hears.

Observable success: A 30-second vertical 9:16 3D animated video with all five scene beats, six dialogue beats with correct expressions, cheerful 3D style with warm afternoon lighting and cinematic camera, clearly visible and unchanged "SMA Negeri 14 Jambi" signage, and no dangerous activities.

Viewer / Audience

Product context: The Viewer / Audience is the consumer of the finished video, which is meant to be watched in vertical 9:16 format, following Upin and Ipin's walk through Mayang and their stop in front of SMA Negeri 14 Jambi. This role consumes the completed animation and its dialogue, expressions, and school-name signage as the delivered outcome.

Primary goal: Watch the completed 30-second vertical 9:16 animation and experience Upin and Ipin's walk through Mayang, Jambi, toward SMA Negeri 14 Jambi.

Distinct accepted responsibilities:

• Open the Landing surface to learn about the animation.
• Proceed to the Animation surface to watch the completed video.
• Observe the scene sequence, dialogue, expressions, and school-name signage.

Relevant inputs or decisions: Decision to watch the animation; attention to the scene sequence, dialogue, and signage.

Interactions with other accepted participants: The Viewer / Audience consumes the video produced by the Video Creator / Animator. The Viewer / Audience's experience is the delivered outcome of the Video Creator / Animator's work.

Observable success: The Viewer / Audience watches the complete 30-second vertical 9:16 animation with all specified dialogue, expressions, and clearly visible "SMA Negeri 14 Jambi" signage.

5. Core User Flows

Flow 1: Video Creator / Animator assembles the 30-second vertical 9:16 animation

1. The Video Creator / Animator opens the Animation surface.
2. The Video Creator / Animator assembles the opening scene: Upin and Ipin walking around the Mayang area, Jambi, in the afternoon, with visible street atmosphere, vehicles, trees, and surrounding environment (FR-03).
3. The Video Creator / Animator opens the Dialogue surface and assigns Upin's first line "Ipin, ramai juga kawasan Mayang ni!" with an admiring expression (FR-04).
4. The Video Creator / Animator assigns Ipin's reply "Betul, betul, betul!" (FR-05).
5. The Video Creator / Animator returns to the Animation surface and configures the walk toward SMA Negeri 14 Jambi, with the camera following from behind and then revealing the front of the school (FR-06).
6. The Video Creator / Animator assigns Upin's line "Eh, Ipin! Itu SMA Negeri 14 Jambi!" (FR-07).
7. The Video Creator / Animator assigns Ipin's joyful reply "Wah, besar sekolahnya!" with a joyful expression (FR-08).
8. The Video Creator / Animator assembles the stop in front of the school, the observation of the surroundings from outside, and the wave at the camera (FR-09).
9. The Video Creator / Animator assigns Upin's closing line "Seronok juga jalan-jalan di Mayang!" (FR-10).
10. The Video Creator / Animator assigns Ipin's final reply "Betul, betul, betul!" (FR-11).
11. The Video Creator / Animator opens the Style surface and applies the cheerful 3D style, funny tone, natural facial expressions, smooth motion, warm afternoon lighting, cinematic camera, and lively Jambi atmosphere (FR-12).
12. The Video Creator / Animator opens the Signage surface and ensures the school name text "SMA Negeri 14 Jambi" is clearly visible and unchanged (FR-13).
13. The Video Creator / Animator reviews the scene content to ensure no dangerous activities are shown (FR-14).
14. The Video Creator / Animator verifies the total duration is exactly 30 seconds (FR-01) and the format is vertical 9:16 (FR-02).
15. Observable result: A complete 30-second vertical 9:16 3D animated video with all specified scene beats, dialogue, expressions, style, and signage.
16. Failure/recovery: If any scene beat, dialogue line, expression, style element, or signage requirement is incorrect, the Video Creator / Animator corrects it on the relevant surface and re-verifies.
17. Continuation: The completed video is ready for the Viewer / Audience.

Flow 2: Viewer / Audience watches the completed animation

1. The Viewer / Audience opens the Landing surface.
2. The Viewer / Audience reads the description of the 30-second vertical 9:16 3D animation and sees the "SMA Negeri 14 Jambi" signage plaque.
3. The Viewer / Audience proceeds to the Animation surface.
4. The Viewer / Audience watches the animation: Upin and Ipin walking through Mayang, Jambi, in the afternoon; the walk toward SMA Negeri 14 Jambi with the camera following from behind; the school-front reveal; the stop and wave; and all six dialogue beats with their expressions.
5. Observable result: The Viewer / Audience has watched the complete 30-second vertical 9:16 animation with all specified dialogue, expressions, and clearly visible "SMA Negeri 14 Jambi" signage.
6. Failure/recovery: If the animation fails to load or play, the Viewer / Audience retries loading the animation.
7. Continuation: The Viewer / Audience completes viewing the animation.

6. Visuals Colors and Theme

Muse and headline: Bruno Simon — a playable low-poly 3D world. The headline is "Jalan-jalan di Mayang".

Palette (light mode):

• Background: #FFF4E2 (warm cream ground, like a soft afternoon sky)
• Surface: #FFFFFF (low-poly blocks — cards, dialogue panels, signage plaques)
• Text: #22201C (ink for all reading text; contrast on cream ≈ 14:1, on white ≈ 15:1)
• Primary: #F26B4A (coral — Upin's shirt, school roof tiles, CTA, golden-hour rim light; ~20% of surface)
• Accent: #2FB8A6 (mint — Ipin's sarong, foliage highlights, active states, progress ticks)
• Muted: #8C8377 (timestamps, captions, meta labels)
• Ambient (3D scene only): #F2A93B (sunflower — sunset light and warm ground bounce; never UI chrome)

No blue anywhere. The sky in the diorama goes peach-to-lilac.

Typography:

• Headings: Baloo 2 at 800 weight — chunky, rounded terminals, slightly condensed counters. Sentence case with occasional all-caps for scene labels (e.g., "ADEGAN 03 · SMA NEGERI 14 JAMBI"). Tight tracking (-0.01em) and tight leading (0.95). Mobile display sizes: clamp(40px, 12vw, 128px).
• Body: Nunito. Scale 1.333 modular — 128 / 96 / 64 / 40 / 28 / 20 / 17 / 15. Display: clamp(40px,12vw,128px). Section head: clamp(28px,6vw,64px). Body: 17px with 1.6 leading (Nunito 400/600). Micro labels: 13px Baloo 2 700, 0.12em tracking, uppercase.

Shape language: Low-poly and rounded at the same time: 12–20px radii on every UI panel, 4px on chips. Inside the 3D scene, hard faceted geometry (flat-shaded buildings, blocky trees, wedge vehicles). Buttons are capsules with a 3px darker bottom edge. Signage is a rectangular plaque with a visible bracket and two bolts, never a floating label.

Layout: A single 9:16 stage column that never exceeds 520px wide, centred on the cream ground, with generous 24px margins at 375px and 40px at 1280px. The 3D diorama is the top block, bleeding to the column edges with a 20px radius. Beneath it, a horizontal filmstrip of six scene thumbnails (01 Mayang walk, 02 street details, 03 approach, 04 school reveal, 05 stop & wave, 06 outro) that scrolls horizontally on mobile and wraps to two rows of three under prefers-reduced-motion. Below that, a dialogue ledger: two-column rows pairing the speaker badge (coral "UPIN" / mint "IPIN") with the line, ruled by 1px hairlines. The school name is set once as a fixed plaque component that appears identically in the hero, the filmstrip cover, and the ledger header — same string, same type, same colour, never re-lettered.

Spacing rhythm: Generous 24px margins at 375px, 40px at 1280px. Consistent 12–20px radii on panels. 4px on chips.

Imagery style: One crafted real-time low-poly 3D diorama of the Mayang street: faceted shophouses, a warung awning, palms and rain trees, a becak and two small cars on a looping road, warm directional sunset light with soft contact shadows, and the SMA Negeri 14 Jambi gate and facade as the destination at the far end of the walk. Upin and Ipin are simple rounded low-poly figures with two-tone flat eyes and mouth shapes that swap for expressions (admiring, joyful). No photoreal humans, no stock photography anywhere. Supporting imagery is the diorama itself: filmstrip frames are camera captures of the same scene, not separate illustrations.

7. Signature Design Concept

The public entry (Landing) is a full-column 9:16 live 3D diorama, not a headline-and-button hero. The dominant element is the low-poly Mayang street at golden hour, occupying the top ~62% of the viewport, bleeding to the column's rounded edges. The camera sits low behind Upin and Ipin, who walk away from us down the centre of the frame, their coral and mint shirts the only saturated accents against peach sky and sunflower-lit asphalt.

The overlay is deliberately sparse and bottom-anchored: a small Baloo 2 micro-label "MAYANG · JAMBI · 30 DETIK · 9:16" in ink at 13px, and beneath it a single stacked Baloo 2 headline "Jalan-jalan di Mayang" at clamp(40px,12vw,128px), left-aligned, sitting on the cream ground below the diorama rather than on top of it — so nothing readable is ever covered by the scene. A capsule CTA "Tonton 30 detik" in coral with its 3px darker bottom edge sits directly under the headline, full-width at 375px. The school-name plaque is visible in-scene at the far end of the street from frame one, small but legible, and it never changes for the rest of the page.

Signature moves:

• A live low-poly 3D diorama of Mayang as the hero, with the camera trailing Upin and Ipin from behind and scroll-scrubbing forward until the SMA Negeri 14 Jambi facade fills the frame — the school reveal is a camera move, not a section.
• A fixed "signage plaque" component: the string "SMA NEGERI 14 JAMBI" rendered identically in the hero scene, the filmstrip cover, and the dialogue ledger header, with a visible bracket and two bolts, so the constraint of an unchanging school name becomes a designed motif.
• A dialogue ledger under the diorama: ruled hairline rows pairing a coral "UPIN" badge or mint "IPIN" badge with the exact line, where hovering a row re-poses the on-screen character's low-poly mouth and brow into that beat's expression.
• Six faceted scene thumbnails in a horizontally scrollable filmstrip that bleeds off the right edge; hovering one swings the diorama camera toward that beat, and under prefers-reduced-motion they wrap into a two-row grid with every item whole.
• Capsule buttons with a 3px darker bottom edge and a 4% overshoot press, so every control feels like a toy key rather than a flat rectangle.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief:

• Focal subject: The low-poly Mayang street at golden hour, with Upin and Ipin walking away from the camera down the centre of the frame, their coral and mint shirts the only saturated accents against peach sky and sunflower-lit asphalt.
• Input→transformation→outcome thesis: As the Viewer / Audience scrolls, the diorama camera trails Upin and Ipin from behind, then scrubs forward until the SMA Negeri 14 Jambi facade fills the frame — the school reveal is a camera move, not a section. Hovering a filmstrip thumbnail nudges the diorama camera toward that beat.
• Motion vocabulary: Physics-driven but calm: the camera trails the two walkers with a soft spring (no snap, no shake), vehicles and pedestrians loop on independent gentle paths, leaves and dust drift on a slow sine. Transitions are 220ms with a slight overshoot (cubic-bezier(.2,.9,.25,1.05)) — toy-like, never bouncy past 4%.
• Composed first frame: The camera sits low behind Upin and Ipin, who walk away from us down the centre of the frame. The school-name plaque is visible in-scene at the far end of the street, small but legible. The overlay is bottom-anchored: micro-label "MAYANG · JAMBI · 30 DETIK · 9:16" and headline "Jalan-jalan di Mayang" on the cream ground below the diorama.
• Reduced-motion state: Under prefers-reduced-motion, the diorama holds a single composed frame with the two characters mid-wave, marquees stop, and the filmstrip becomes a wrapped grid.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED: A crafted real-time low-poly 3D diorama of the Mayang street: faceted shophouses, a warung awning, palms and rain trees, a becak and two small cars on a looping road, warm directional sunset light with soft contact shadows, and the SMA Negeri 14 Jambi gate and facade as the destination at the far end of the walk. Upin and Ipin are simple rounded low-poly figures with two-tone flat eyes and mouth shapes that swap for expressions (admiring, joyful). The scene shows the product's defining state: two characters walking a real neighbourhood, a camera trailing them, a school facade revealed as a destination, a wave to camera.

9. Non-Functional Requirements

NFR-01: Video duration must be exactly 30 seconds

• Provenance: explicit
• Constraint: The total duration of the video must be 30 seconds.
• Rationale: Explicit hard constraint in the authoritative user evidence.

NFR-02: Format must be vertical 9:16

• Provenance: explicit
• Constraint: The video format must be vertical 9:16.
• Rationale: Explicit hard constraint in the authoritative user evidence.

NFR-03: School name text must be clearly visible and must not change/vary

• Provenance: explicit
• Constraint: The text "SMA Negeri 14 Jambi" must be clearly visible and must not change or vary.
• Rationale: Explicit hard constraint in the authoritative user evidence.

NFR-04: Do not show dangerous activities

• Provenance: explicit
• Constraint: No dangerous activities may be shown in the video.
• Rationale: Explicit hard constraint in the authoritative user evidence.

NFR-05: Readable text and controls stay whole at every viewport

• Provenance: required_inference (from creative direction)
• Constraint: Headlines, wordmarks, labels, numbers, cards' text and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit. No other element covers any part of them.
• Rationale: Ensures accessibility and readability across viewports.

NFR-06: Reduced-motion support

• Provenance: required_inference (from creative direction)
• Constraint: Under prefers-reduced-motion, the diorama holds a single composed frame with the two characters mid-wave, marquees stop, and the filmstrip becomes a wrapped grid.
• Rationale: Accessibility for users who prefer reduced motion.

10. Tech Stack

• Frontend: React (for the custom UI surfaces: Landing, Animation, Dialogue, Signage, Style).
• 3D rendering: WebGL / React Three Fiber (R3F) for the real-time low-poly 3D diorama.
• Styling: CSS with the specified palette, typography (Baloo 2, Nunito), and shape language.
• Storage: Not specified by user; no persistent storage requirement is present in the authoritative source.
• Deployment: Not specified by user; no deployment requirement is present in the authoritative source.

11. Assumptions and Constraints

Assumptions:

• The video is delivered as a single 30-second vertical 9:16 3D animated file.
• The five surfaces (Landing, Animation, Dialogue, Signage, Style) are application-owned custom pages with anonymous access.
• The Video Creator / Animator and Viewer / Audience are the only active human personas.
• No account creation, authentication, or permission differentiation is required.
• The school name text "SMA Negeri 14 Jambi" is rendered identically across all appearances.

Constraints:

• Video duration must be exactly 30 seconds (NFR-01).
• Format must be vertical 9:16 (NFR-02).
• School name text must be clearly visible and must not change/vary (NFR-03).
• Do not show dangerous activities (NFR-04).
• Readable text and controls stay whole at every viewport (NFR-05).
• Reduced-motion support (NFR-06).
• No blue or indigo UI accent (creative direction).
• No photorealistic or stock photography of people (creative direction).
• No re-lettering, animating, cropping, or partially covering the "SMA NEGERI 14 JAMBI" plaque at any viewport (creative direction).
• No characters in the roadway, no running, no vehicles near the walkers (creative direction).
• No overlaying headline or CTA text on top of the 3D scene where motion could cover it (creative direction).
• No bouncy physics beyond a 4% overshoot, camera shake, or particle explosions (creative direction).

12. Glossary

• Upin: One of the two main characters in the animation. Wears a coral shirt. Speaks the lines "Ipin, ramai juga kawasan Mayang ni!", "Eh, Ipin! Itu SMA Negeri 14 Jambi!", and "Seronok juga jalan-jalan di Mayang!".
• Ipin: One of the two main characters in the animation. Wears a mint sarong. Speaks the lines "Betul, betul, betul!" (twice) and "Wah, besar sekolahnya!".
• Mayang: The area in Jambi where the animation's opening scene takes place.
• Jambi: The province in Indonesia where the animation is set.
• SMA Negeri 14 Jambi: The school that Upin and Ipin walk toward and stop in front of. The school name text must be clearly visible and must not change or vary.
• 9:16: The vertical aspect ratio format of the video.
• 30 seconds: The exact duration of the video.
• Low-poly: A 3D modeling style using a small number of polygons, giving a faceted, toy-like appearance.
• Diorama: A 3D scene that represents a real-world environment, in this case the Mayang street.
• Filmstrip: A horizontally scrollable row of six scene thumbnails (01 Mayang walk, 02 street details, 03 approach, 04 school reveal, 05 stop & wave, 06 outro).
• Dialogue ledger: A two-column layout pairing the speaker badge (coral "UPIN" / mint "IPIN") with the dialogue line, ruled by 1px hairlines.
• Signage plaque: A rectangular plaque component with a visible bracket and two bolts, rendering the string "SMA NEGERI 14 JAMBI" identically in the hero scene, the filmstrip cover, and the dialogue ledger header.
• Golden hour: The warm afternoon lighting condition depicted in the animation.
• prefers-reduced-motion: A CSS media query that detects whether the user has requested reduced motion; when active, the diorama holds a single composed frame, marquees stop, and the filmstrip becomes a wrapped grid.