System Requirements Document for philips-toaster-kettle

1. Introduction

This document specifies a custom application for preparing a 10-second vertical commercial video and its supplied Indonesian caption for the Philips Toaster 1000 Series HD2510/90 and Philips Kettle 1000 Series HD9314/92.

The intended active user is the Short-form video creator, who prepares the commercial according to the supplied scene sequence, product details, audio and visual constraints, and caption. The commercial is a quiet breakfast-ritual promotion, not a general product listing or shopping experience.

2. System Overview

The application provides three ordered destinations: Landing, Video, and Caption. The creator can view the public entry, prepare the specified video, and prepare the supplied caption as a distinct deliverable. No other active human persona or participant is specified.

The video is exactly 10 seconds, vertical 9:16, with no voiceover or music. It uses only the named ASMR sounds and subtle animated text. It follows the specified hook, toaster demonstration, kettle demonstration, and closing CTA in order. Product identity and appearance remain consistent throughout.

The supplied caption and hashtags are included as written. The application must not add prices, shipping information, or claims beyond the supplied specifications. The uploaded product images are references for product identity and appearance; listing prices, shipping details, and other listing claims are not to be used.

2a. Product Interpretation and Delivery Boundary

The application is a first-party custom interface for preparing the commercial and caption. The three destinations and their access are fixed by the supplied page contract: Landing, Video, and Caption are all anonymously accessible, with no application identity requirement. The Landing page is the public first impression; Video and Caption are the distinct deliverable contexts.

The yellow-cart wording is part of the commercial’s CTA, not a request to implement a cart, purchase flow, or external commerce integration. The source does not request publishing, exporting, account management, product purchasing, or additional marketing materials; these are outside current scope.

2b. Page Content and Component Coverage

Landing

• Information and state: Public first impression for the Philips toaster-and-kettle promotion. Present the breakfast question, the two products, and the purpose of the commercial. The 9:16 video frame is presented as a literal paper-white card with a 1px border, centered on the paper-white ground with generous empty margin.
• Primary and supporting actions: Provide access to the Video and Caption destinations. Do not add a purchase button or other commerce action.
• Domain entities: Philips Toaster 1000 Series HD2510/90; Philips Kettle 1000 Series HD9314/92; commercial video; supplied caption.
• Component responsibilities: Show the two appliances at true scale where imagery permits, with the headline “Sarapan sempurna setiap pagi?” in the upper third and the products low in the frame. Keep the composition calm and sparse; no button, badge, or gradient in the hero.
• States: Loading may show the paper-white composition without implying unavailable content. Empty state is not applicable because the supplied promotion content is fixed. Success is the rendered public entry and access to the two deliverable destinations. On image or content loading failure, retain readable text and provide a clear retry or fallback to the supplied product reference assets; do not substitute unrelated imagery.

Video

• Information and state: The complete 10-second, vertical 9:16 commercial, with the exact scene order, timing, product details, text, and audio constraints below.
• Primary and supporting actions: Prepare and review the commercial content and its sequence. Do not add publishing, export, or commerce operations.
• Domain entities: Commercial timeline; toaster scene; kettle scene; closing CTA; product identity references; ASMR cues; animated text.
• Component responsibilities:
  • 00:00–00:02 — Hook: A hand gently reveals both products arranged neatly on a kitchen table. Include the soft sound of placing the products on a wooden tabletop. Slowly reveal the text: “Sarapan sempurna setiap pagi?”
  • 00:02–00:05 — Pemanggang roti HD2510/90: Show bread being inserted, the browning dial being turned, and golden-brown toast rising automatically. Use the sounds of inserting bread, the dial click, and gentle toasting. Reveal these lines one at a time: “Philips Toaster 1000 Series”; “2 lubang roti lebar”; “6 tingkat kematangan”; “Fungsi cairkan & panaskan ulang”.
  • 00:05–00:08 — Teko listrik HD9314/92: Show water being poured, the lid closing, the kettle being switched on, water boiling, and the appliance switching off automatically. Use the sounds of pouring water, the lid closing, gentle boiling, and automatic shutoff. Reveal these lines one at a time: “Philips Kettle 1000 Series”; “Kapasitas 1,7 Liter”; “Mendidih cepat & aman”; “Mati otomatis — anti kering”.
  • 00:08–00:10 — Penutup & CTA: Show both products arranged neatly and a hand pointing toward the bottom of the screen. Use the soft sound of a touch on a screen. Reveal: “Lengkapi dapurmu sekarang” and “\xe2\xac\x87️ Klik keranjang kuning \xe2\xac\x87️”.
  • Audio and text: No voiceover and no music; only the specified pure ASMR sounds. Text animation is subtle and not excessive. Do not add audio cues beyond those named in the brief.
  • Product and image consistency: Maintain identical products and character throughout; do not change the products. Use a professional camera look, natural hand movement, and avoid an AI look. The product references are the uploaded Philips product images; do not introduce listing prices, shipping, or other listing claims.
• States: Loading may show the timeline and supplied content while media resolves. Empty state is not applicable because the commercial brief is supplied. Success is a complete, reviewable sequence meeting the duration, format, scene, text, product, and audio constraints. If a referenced image or media asset cannot load, retain the specified text and sequence, allow recovery by retrying or using the supplied product reference, and do not silently replace it with unrelated imagery.

Caption

• Information and state: The supplied Indonesian caption and hashtags, kept as a distinct deliverable from the video.
• Primary and supporting actions: Prepare and review the supplied caption. Do not add unsupported claims or commerce details.
• Domain entities: Caption text; hashtags; toaster and kettle product references.
• Component responsibilities: Preserve the supplied wording, punctuation, emoji, and hashtags:

  Sarapan jadi lebih mudah & nikmat setiap hari \xe2\x98\x80️

  Pasangan sempurna untuk dapurmu — Philips Toaster & Teko Listrik 1000 Series. Roti terpanggang renyah sesuai selera, air mendidih cepat dan aman untuk seluruh keluarga. Desain senada elegan, fungsinya terpercaya.

  Lengkapi kebutuhan dapurmu sekarang — klik keranjang kuning ya!

  #PhilipsDapur #PeralatanDapur #SarapanSehat #Philips1000Series #TekoListrikPhilips

• States: Loading may show the supplied text as it becomes available. Empty state is not applicable. Success is the complete caption displayed without omissions or additions. If content fails to load, provide a retry and retain the supplied text as the recovery source.

3. Functional Requirements

1. As a Short-form video creator, I should be able to view the public promotion entry.
   Provenance: required_inference for the Landing destination; its content is grounded in the explicit commercial brief.
   Lifecycle and access: The creator opens Landing anonymously and sees the breakfast question, both products, and the promotion’s purpose. The result is a rendered public entry with access to Video and Caption. If referenced imagery fails, the page retains readable content and offers recovery using the supplied product references or retry. The creator can continue to either deliverable independently.

2. As a Short-form video creator, I should be able to prepare the specified 10-second commercial video.
   Provenance: explicit for the commercial, sequence, product details, audio, text, and constraints; required_inference for the Video destination and its usable presentation.
   Lifecycle and access: The creator opens Video anonymously and prepares or reviews a vertical 9:16 commercial with the exact 10-second sequence: 00:00–00:02 hook with both products and “Sarapan sempurna setiap pagi?”; 00:02–00:05 toaster demonstration and its four specified feature lines; 00:05–00:08 kettle demonstration and its four specified feature lines; 00:08–00:10 closing with both products, the hand pointing down, “Lengkapi dapurmu sekarang”, and “\xe2\xac\x87️ Klik keranjang kuning \xe2\xac\x87️”. The observable result is a complete sequence with the specified actions, text, and named ASMR sounds. It contains no voiceover or music, uses subtle text animation, preserves identical product and character appearance, has a professional camera look and natural hand movement, and avoids an AI look. If media fails, the creator can retry or use the supplied product references without substituting unrelated imagery; the specified text and sequence remain available. The creator can continue to Caption independently.

3. As a Short-form video creator, I should be able to prepare the supplied Indonesian caption and hashtags.
   Provenance: explicit for the caption text; required_inference for the distinct Caption destination and its usable presentation.
   Lifecycle and access: The creator opens Caption anonymously and reviews the exact supplied caption and hashtags. The observable result is the complete text, without added prices, shipping information, or unsupported claims. If the text fails to load, the creator can retry and recover from the supplied source text. The creator can return to Landing or continue reviewing Video; caption preparation does not require completing the video first.

4. User Personas

Short-form video creator

Provenance: required_inference in the Planning Scope persona catalog, derived from the explicit request to create the commercial and caption.

The creator’s product context is preparing a short-form promotion for the Philips Toaster 1000 Series HD2510/90 and Philips Kettle 1000 Series HD9314/92. Their primary goal is a polished 10-second vertical commercial that follows the supplied visual, audio, timing, and text direction, alongside the supplied Indonesian caption.

Their accepted responsibilities are to prepare or review the video sequence and prepare or review the caption. Relevant inputs are the supplied product references, scene timings, product feature text, ASMR cues, negative-prompt constraints, and caption. The source specifies no other active participant or required handoff. Success is observable as a complete commercial and caption that preserve the supplied content and constraints.

5. Core User Flows

1. View the promotion entry

1. The Short-form video creator opens Landing without signing in.
2. The creator sees the breakfast question and the two Philips products in the sparse public composition.
3. The creator chooses Video to prepare or review the commercial, or Caption to prepare or review the caption.
4. If imagery does not load, the creator retries or uses the supplied product references; readable content remains available.

2. Prepare or review the commercial

1. The creator opens Video anonymously.
2. The creator follows the 00:00–00:02 hook: both products are revealed on the kitchen table, the placement sound is heard, and “Sarapan sempurna setiap pagi?” appears.
3. The creator follows the 00:02–00:05 toaster sequence: insert bread, turn the browning dial, show golden-brown toast rising automatically, use the three specified toaster ASMR sounds, and reveal the four toaster feature lines one at a time.
4. The creator follows the 00:05–00:08 kettle sequence: pour water, close the lid, switch on, show boiling and automatic shutoff, use the four specified kettle ASMR sounds, and reveal the four kettle feature lines one at a time.
5. The creator follows the 00:08–00:10 closing: both products are arranged neatly, a hand points down, the soft screen-touch sound is heard, and the two specified CTA lines appear.
6. The creator reviews the result against the 10-second duration, vertical 9:16 format, product consistency, natural hand movement, professional camera look, and no-AI-look constraint. No voiceover, music, extra audio, prices, shipping information, or unsupported claims are added.
7. If referenced media fails, the creator retries or uses the supplied product references while retaining the specified sequence and text. The creator may then review Caption or return to Landing.

3. Prepare or review the caption

1. The creator opens Caption anonymously, independently of the video workflow.
2. The creator reviews the supplied Indonesian caption and all five hashtags exactly as provided.
3. The creator confirms that no prices, shipping information, or unsupported claims have been added.
4. If the caption fails to load, the creator retries and recovers from the supplied source text. The creator may return to Landing or review Video.

6. Visuals Colors and Theme

Muse: Kenya Hara. Headline: “Emptiness as content — paper-white calm for a breakfast ritual.”

Use the creative direction’s quiet, warm, uncluttered breakfast-ritual aesthetic. The uploaded product images are product-identity references, not a replacement for the specified visual direction. Do not reproduce marketplace interface elements, listing prices, shipping details, badges, or other listing claims from the reference images.

• Palette: Background #F4F1EA; surface and product-white #FFFFFF; text #2B2A27; primary #8C8577; accent #B4552D; muted rules and disabled states #C9C3B6. Paper-white is the dominant ground; terracotta is reserved for the toast-crust glow, dial marker, and CTA underline.
• Typography: Headings: Zen Kaku Gothic New, Light 300, wide 0.16em tracking, sentence case, generous leading. Body: Shippori Mincho. Type scale: 40/32/24/17/15px. Hero question: clamp(40px, 6vw, 64px); feature lines 24px; body 17px; ASMR cue labels 15px with 0.2em tracking.
• Shape and rules: Square proportions and square corners; no radius, pills, capsules, or blobs. Use 1px #C9C3B6 hairlines to divide calm bands and underline feature lines.
• Spacing and layout: Centered single-column composition inside a 9:16 frame. Use 24px margins at 375px and 48px at 1280px. Keep the headline in the upper third, one product/action in the middle band, and feature lines in the lower band. On desktop, center the vertical frame at 420px wide against the paper-white ground; place the caption and hashtags in a second column separated by a hairline.
• Imagery: Still-life photography of the two appliances on a plain warm-grey countertop against a paper-white wall, soft north light, and one long shadow to the right. Use macro details of the dial’s numbered ring, toaster-slot width, and kettle-spout condensation. Hands enter only at the wrist, with natural, unhurried movement; no face, stock people, character illustration, or AI-rendered plastic sheen.
• Responsive readability: At 375px, 768px, and 1280px, keep all readable text, labels, numbers, cards, and controls fully inside their viewport and containers. Wrap or scale text as needed; no element may cover readable text or controls. Imagery and decoration may crop only as directed and must not obscure readable content.

7. Signature Design Concept

The public Landing page is a paper-white 9:16 stage, roughly 70% empty, with the toaster and kettle placed low and to the left on a warm-grey countertop occupying the bottom third. The products remain at true scale and are the brightest objects in the frame. The question “Sarapan sempurna setiap pagi?” sits in the upper third, with a full third of empty wall beneath it before the products begin. A 1px #C9C3B6 hairline separates the quiet upper space from the ritual below. A faint terracotta glow begins under the toaster slot. There is no hero button, badge, or gradient.

Present the video frame as a literal paper-white card with a single 1px border and no shadow, centered on the #F4F1EA ground with generous empty margin. The composition uses only the accepted products, text, and states.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction)
Motion Tempo: still
Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject: The two Philips appliances, with the toaster and kettle low in the frame and the breakfast question above.
• Input → transformation → outcome thesis: The creator arrives at the public promotion entry; the quiet composition presents the two products and the breakfast question, leading to the accepted video and caption deliverables.
• Motion vocabulary: Almost none. Where the commercial’s specified text animation is shown, use slow 600–900ms fades and 4px upward drifts, one element at a time, in the specified order. Feature lines appear sequentially with a 200ms stagger and hold. No bounce, scale, parallax, particles, or kinetic type. Kettle steam uses three slow 3-second opacity breaths at 8% opacity.
• Composed first frame: Paper-white stage with the headline in the upper third, generous empty wall, a hairline above the products, and both appliances low on the warm-grey countertop.
• Reduced motion: With prefers-reduced-motion, every line appears at full opacity immediately and steam holds as a still frame.

9. Non-Functional Requirements

1. Commercial duration and format — explicit: The commercial must be 10 seconds and vertical 9:16.
2. Audio restrictions — explicit: No voiceover and no music; only the pure ASMR sounds named in the brief.
3. Text motion — explicit: Text animation must be subtle and not excessive.
4. Product and character consistency — explicit: Maintain identical character and identical product; do not change the product.
5. Visual quality — explicit: Use a professional camera look, natural hand movement, and avoid an AI look.
6. Claim restrictions — explicit: Do not add prices, shipping information, or claims not included in the supplied specifications.
7. Responsive readability — explicit in the creative direction: Readable text and controls remain whole at 375px, 768px, and 1280px; no other element covers them. Reduced-motion presentation stops motion and keeps all items readable.
8. Product reference fidelity — explicit: Use the uploaded product images as identity and appearance references; do not import listing prices, shipping, or other listing claims.

10. Tech Stack

• Frontend: React [Default — not specified by user].
• Styling: CSS [Default — not specified by user].
• Media storage or processing technology: [Default — not specified by user]; no specific provider or processing stack is required by the source.

11. Assumptions and Constraints

• The three page names, order, and anonymous access are fixed by the versioned Planning Scope page contract.
• The Short-form video creator is the only accepted active human persona.
• The supplied caption is to be preserved as written, including emoji and hashtags.
• The uploaded images are product references. Their marketplace interface, prices, shipping details, and other listing claims are not commercial content.
• The yellow-cart CTA is required commercial text and visual direction only; no cart or purchase capability is included.
• No future requirements are specified.

12. Glossary

• ASMR: The quiet, specific sound cues named in the commercial brief; no music or voiceover accompanies them.
• CTA: Call to action. Here, the closing lines “Lengkapi dapurmu sekarang” and “\xe2\xac\x87️ Klik keranjang kuning \xe2\xac\x87️”.
• HD2510/90: Philips Toaster 1000 Series model featured in the commercial.
• HD9314/92: Philips Kettle 1000 Series model featured in the commercial.
• 9:16: The required vertical aspect ratio of the commercial.