System Requirements Document for regal-inner

1. Introduction

regal-inner is a free, browser-based, Arabic-first studio that turns written text into a short video accompanied by music. The product intent is a single transformation: the visitor types text, chooses a music track, and receives a short, scored moving image they can use immediately — at no cost.

The audience is Arabic-speaking creators, teachers, small-business owners, and social storytellers who need output fast, often on a phone, at night, with no budget. The product is deliberately framed as a generative studio rather than a request-processing form: the generated film is the artwork, and the interface is a dark plinth beneath it.

The product is free of charge. The generated video is short. The generated video includes music. These three facts are hard constraints carried from the authoritative requirement thread.

2. System Overview

regal-inner currently delivers two pages:

• الرئيسية — a public entry surface that explains, before any protected work, that the site is free and converts text into a short video with music.
• إنشاء فيديو — the primary workspace for entering text, selecting music, generating the short video, and previewing the result.

Both pages are application-owned custom pages and both are reachable without an account (access_requirement: none). There is no sign-up, sign-in, or account-management capability in the current scope.

The single accepted active human actor is منشئ الفيديو النصي (the text-to-video creator). The system also performs non-human work: text-to-video generation and music attachment, executed by the backend and any generation worker it requires. These are system processes, not personas.

Current behavior in scope:

• A free, Arabic-first text-to-video conversion producing a short video.
• The generated video includes music.
• Text entry, duration selection, music track selection with waveform previews, generation, and preview of the rendered result.

Narrow exclusions (current scope):

• No long-form video generation. The user's earlier question about creating a long video is not a current commitment; the accepted refinement is a short video with music.
• No paid tiers, billing, or subscription capability.
• No account creation, login, or profile management.
• No stock photography, illustration, or emoji imagery.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. regal-inner is delivered as a first-party web application with custom UI. Both accepted pages are application-owned and publicly reachable. The generation pipeline (text → scenes → music → encode) is backend-owned system work; the human-facing interaction that starts, monitors, and receives that work lives on إنشاء فيديو.

Access ownership. The accepted access contract sets access_requirement: none for both الرئيسية and إنشاء فيديو. No accepted journey requires durable, privately owned, resumable actor-specific state, and no accepted commitment, entitlement, or value transfer must remain bound to a specific participant. Application-owned identity is therefore not established, and no anonymous pre-identity lifecycle is required. The product is free and account-free.

Current vs. future boundary. Current: free short text-to-video with music, on two pages. Future (not current, not in acceptance): long-form video output, and any capability not listed in Section 3.

2c. Page Content and Component Coverage

الرئيسية

• Information / state: states that the site is free and that it converts text into a short video with music. Presents the three-step explanation of how the conversion works and a rail of sample outputs.
• Primary action: a single full-width ember CTA block «ابدأ مجانًا» that leads to إنشاء فيديو.
• Supporting actions: the hero's generative canvas responds to the visitor's own typed words in the composer below, before any commitment; sample-output clips loop in dark frames.
• Domain entities: sample output (source prompt text, looping clip, duration), music track (name, waveform), timecode (current / total).
• Component responsibilities:
  • Full-bleed generative canvas hero seeded from the visitor's typed text, masked away from the text column.
  • Oversized Arabic-first headline «حوّل نصّك إلى فيديو قصير مع موسيقى», flush-left, wrapping to three lines, never overlapped by the canvas.
  • One line of 16px muted supporting copy beneath the headline.
  • Single full-width ember CTA block with a thin inset bottom rule.
  • Single-column reading measure (max 68ch) carrying the three-step explanation.
  • Horizontal rail of sample outputs: real looping clips in dark frames, each labelled with its source prompt in small muted type.
  • A 9:16 phone-shaped preview frame floating half-bled off the right edge, playing a real rendered sample with a live waveform beneath it and a tabular timecode 00:14/00:30.
• States:
  • Loading: canvas initializes; sample clips load in their frames.
  • Empty: no text typed yet — the canvas runs its default flow field; the sample rail still shows its clips.

• Success: typed words visibly seed the flow field; CTA leads to the workspace.
• Error / recovery: if a sample clip fails to load, its dark frame remains with its prompt label; the CTA and headline remain fully usable.
• Reduced motion: the canvas freezes to a single composed still frame; all content remains readable in place.

إنشاء فيديو

• Information / state: the composer's current text, selected duration, selected music track, generation progress, and the rendered preview with its timecode and waveform.
• Primary action: the single ember generate CTA in the composer block.
• Supporting actions: type or paste text into the textarea; choose a duration; select one of the three free music tracks via its waveform strip; play or scrub the rendered preview.
• Domain entities: text input, duration selection, music track (name, waveform, free), render job (progress percentage, pipeline stage readout: text → scenes → music → encode), rendered video (9:16 or 16:9, timecode rail, music waveform).
• Component responsibilities:
  • Left column (40% at 1280px): text composer textarea, duration selector, music track list with waveform previews, generate block.
  • Right column (60% at 1280px): sticky preview stage holding the rendered video at 9:16 or 16:9, with a timecode rail beneath it and a data-teal music waveform running directly under the frame.
  • Music selection rendered as three 40px-tall waveform strips in muted grey that turn data-teal and animate a playhead on hover/selection — not track cards.
  • Rendering state rendered as a single ember light-sweep crossing the preview frame with a counting percentage and a scrolling monospace data readout of the pipeline, instead of a spinner.
• States:
  • Loading: the preview stage shows the render light-sweep, counting percentage, and pipeline readout.

• Empty: no text entered — the preview stage is an empty dark frame with its 1px luminous edge and timecode rail at 00:00/00:00; the generate CTA is present but the composer prompts for text.
• Success: the rendered short video plays in the preview frame with its timecode rail and data-teal music waveform beneath it.
• Error / recovery: if generation fails, the preview frame returns to its empty state with a readable failure message in the composer block; the entered text, duration, and selected track are retained so the creator can retry.
• Reduced motion: the progress sweep becomes a static percentage bar; the preview remains readable in place.

3. Functional Requirements

Each requirement is a distinct story point with provenance, lifecycle facts, and observable acceptance.

FR-1 — Free text-to-video conversion As منشئ الفيديو النصي, I should convert my written text into a video at no cost, so that I can produce a moving image without paying.

• Provenance: explicit (موقع مجاني يحوّل النص إلى فيديو; constraint: الموقع مجاني).
• Actor: منشئ الفيديو النصي. Trigger: submitting text from the composer on إنشاء فيديو.
• Observable result: a rendered video appears in the preview stage. Access state: no account required.
• Failure/recovery: on failure, a readable message appears and the entered text is retained for retry.
• Continuation: the creator can preview, replay, or start another conversion.

FR-2 — Output is a short video As منشئ الفيديو النصي, I should receive a short video, so that the output is quick to produce and easy to share.

• Provenance: explicit (الفيديو الناتج فيديو قصير; constraint: الفيديو الناتج قصير).
• Actor: منشئ الفيديو النصي. Trigger: a completed generation.
• Observable result: the rendered video is short, with its duration shown on the timecode rail (e.g. 00:14/00:30).
• Failure/recovery: if the requested duration cannot be produced, the failure is reported readably and the composer retains its inputs.
• Continuation: the creator can replay the short video or generate another.

FR-3 — Output includes music As منشئ الفيديو النصي, I should receive a video that includes music, so that the result is a finished, scored piece.

• Provenance: explicit (الفيديو الناتج يتضمن موسيقى; constraint: الفيديو الناتج يتضمن موسيقى).
• Actor: منشئ الفيديو النصي. Trigger: a completed generation.
• Observable result: the rendered video plays with its music, and a data-teal music waveform runs directly beneath the preview frame.
• Failure/recovery: if music attachment fails, the failure is reported readably and the creator can retry with the same or another track.
• Continuation: the creator can replay the scored video or generate another.

FR-4 — Enter and edit the source text As منشئ الفيديو النصي, I should type or paste my text into a composer, so that the video is built from my own words.

• Provenance: explicit (يحوّل النص إلى فيديو).
• Actor: منشئ الفيديو النصي. Trigger: focusing the textarea on إنشاء فيديو.
• Observable result: the text is held in the composer and is the source for generation.
• Failure/recovery: empty text leaves the preview stage in its empty state and prompts for text.
• Continuation: the creator proceeds to duration and music selection.

FR-5 — Choose the video duration As منشئ الفيديو النصي, I should choose a duration for the short video, so that the output fits my intended use.

• Provenance: required_inference (indispensable mechanic for the accepted short-video outcome; the direction specifies a duration selector and a timecode rail).
• Actor: منشئ الفيديو النصي. Trigger: using the duration selector in the composer.
• Observable result: the selected duration is reflected in the timecode rail total (e.g. 00:30).
• Failure/recovery: an unavailable duration is not selectable; the current selection remains visible.
• Continuation: the creator proceeds to music selection and generation.

FR-6 — Select a free music track with waveform preview As منشئ الفيديو النصي, I should choose one of the free music tracks by its waveform, so that the video's music matches what I want.

• Provenance: explicit (الفيديو الناتج يتضمن موسيقى) with required_inference for the selection mechanic (three free tracks shown as waveform strips).
• Actor: منشئ الفيديو النصي. Trigger: hovering or selecting a waveform strip in the music track list.
• Observable result: the strip turns data-teal and animates a playhead; the selected track is the one attached to the generated video.
• Failure/recovery: if a track cannot be previewed, the strip remains selectable and the failure is reported readably.
• Continuation: the creator proceeds to generation.

FR-7 — Generate the short video with music As منشئ الفيديو النصي, I should trigger generation and watch its progress, so that I know the work is happening.

• Provenance: explicit (يحوّل النص إلى فيديو) with required_inference for the observable progress mechanic.
• Actor: منشئ الفيديو النصي. Trigger: activating the single ember generate CTA.
• Observable result: a single ember light-sweep crosses the preview frame with a counting percentage and a scrolling monospace pipeline readout (text → scenes → music → encode).
• Failure/recovery: on failure, the sweep stops, a readable failure message appears, and the composer retains text, duration, and track for retry.
• Continuation: on success, the rendered video appears in the preview stage.

FR-8 — Preview the rendered short video with its music As منشئ الفيديو النصي, I should preview the rendered short video with its music, so that I can confirm the result before using it.

• Provenance: explicit (الفيديو الناتج يتضمن موسيقى) with required_inference for the preview stage.
• Actor: منشئ الفيديو النصي. Trigger: a completed generation.
• Observable result: the video plays in the dark gallery-stage frame at 9:16 or 16:9, with a timecode rail beneath it and a data-teal music waveform running directly under the frame.
• Failure/recovery: if playback fails, the frame remains with its timecode rail and a readable message; the creator can regenerate.
• Continuation: the creator can replay, adjust inputs, or generate another short video.

FR-9 — Learn that the site is free and what it does, before any commitment As منشئ الفيديو النصي, I should understand on the home page that the site is free and turns text into a short video with music, so that I can decide to start.

• Provenance: required_inference (public entry surface required by the accepted free, account-free product).
• Actor: منشئ الفيديو النصي. Trigger: arriving at الرئيسية.
• Observable result: the headline, the free statement, the three-step explanation, and the sample-output rail are readable; the CTA «ابدأ مجانًا» leads to إنشاء فيديو.
• Failure/recovery: if a sample clip fails to load, its frame and prompt label remain and the CTA stays usable.
• Continuation: the creator enters إنشاء فيديو.

FR-10 — See the hero canvas react to typed words As منشئ الفيديو النصي, I should see the generative canvas respond to my own typed words, so that the demo itself shows me what the product does.

• Provenance: required_inference (the direction's signature move; recomposes accepted content only).
• Actor: منشئ الفيديو النصي. Trigger: typing in the composer below the hero on الرئيسية.
• Observable result: the flow field is seeded from the typed glyph positions and visibly changes.
• Failure/recovery: with prefers-reduced-motion, the canvas freezes to a single composed still frame and all content stays readable in place.
• Continuation: the creator activates the CTA and continues to إنشاء فيديو.

4. User Personas

منشئ الفيديو النصي

Product context. An Arabic-speaking creator, teacher, small-business owner, or social storyteller who needs a short, scored video and has no budget for one. They often work on a phone, at night, on a modest device. They arrive with text already written — a lesson summary, a product announcement, a social post — and want it turned into something that moves.

Primary goal. Turn their own written text into a short video with music, for free, and get it back ready to use.

Distinct accepted responsibilities.

• Writing or pasting the source text into the composer.
• Choosing the duration of the short video.
• Choosing one of the free music tracks by listening to and reading its waveform.
• Triggering generation and watching its progress.
• Previewing the rendered short video with its music and confirming the result.

Relevant inputs or decisions. The source text itself; the duration; which of the three free tracks to attach; whether the rendered result is acceptable or needs another pass.

Interactions with other accepted participants. There is no other accepted human participant. The creator's counterpart in the lifecycle is the system's generation pipeline, which performs text → scenes → music → encode and returns the rendered short video. The creator initiates, monitors, and receives that work; the pipeline never acts on its own behalf.

Observable success. A short video plays in the dark gallery-stage preview frame, with a timecode rail beneath it and a data-teal music waveform running directly under the frame — produced at no cost, with no account.

What makes this role's work different. The role is defined by authorship of the source text and by the aesthetic judgment of the result. It is not an administrative or configuration role: the creator's only decisions are what to say, how long, and which music — and the payoff is watching inert words become a moving, scored thing.

5. Core User Flows

Flow A — First visit: understanding the offer and starting

1. منشئ الفيديو النصي opens الرئيسية on a phone, at night, with no account.
2. The first screen is a near-black full-bleed generative canvas with a slow luminous flow field in ember-orange and data-teal drifting across the right two-thirds. The left third carries the oversized Arabic-first headline «حوّل نصّك إلى فيديو قصير مع موسيقى», flush-left, wrapping to three lines; the canvas is masked away from the text column so it never overlaps the headline.
3. Beneath the headline, one line of 16px muted copy states that the site is free. A single full-width ember CTA block «ابدأ مجانًا» sits below it with a thin inset rule.
4. Along the bottom edge, a 9:16 phone-shaped preview frame floats half-bled off the right edge, playing a real rendered sample with a live waveform under it and a tabular timecode 00:14/00:30.
5. The creator scrolls. The canvas and headline layer move with scroll-linked parallax; the canvas morphs continuously and never resets jarringly.
6. The creator reads the three-step explanation in a single-column measure (max 68ch) and browses the horizontal rail of sample outputs — real looping clips in dark frames, each labelled with its source prompt in small muted type.
7. Decision: the creator activates «ابدأ مجانًا».
8. Result: إنشاء فيديو opens. No account is requested.
9. Continuation: the creator proceeds to Flow B.

Failure/recovery: if a sample clip fails to load, its dark frame and prompt label remain in the rail and the CTA stays fully usable. With prefers-reduced-motion, the canvas freezes to a single composed still frame and all content remains readable in place.

Flow B — The hero demo reacts to the creator's own words

1. On الرئيسية, منشئ الفيديو النصي types a few words into the composer below the hero.
2. Result: the hero's flow field is seeded from the typed glyph positions and visibly changes — the demo is the hero.
3. Continuation: the creator either keeps typing to explore, or activates «ابدأ مجانًا» and continues to Flow C.

Failure/recovery: with prefers-reduced-motion, the canvas holds a single composed still frame; the typed text and the CTA remain fully usable.

Flow C — Generating a short video with music

1. منشئ الفيديو النصي arrives at إنشاء فيديو (from الرئيسية or directly; no account required).
2. At 1280px the workspace is a fixed two-column layout: left 40% is the text composer, right 60% is the sticky preview stage. At 768px the preview moves above the composer as a sticky top stage. At 375px everything stacks, with the generate button pinned as a full-width bar with 16px safe margins.
3. Input: the creator types or pastes their text into the textarea.
4. Selection: the creator chooses the duration of the short video using the duration selector. The chosen duration is reflected in the timecode rail total.
5. Selection: the creator reviews the three free music tracks, each shown as a 40px-tall waveform strip in muted grey. On hover or selection, a strip turns data-teal and animates a playhead. The creator selects one track.
6. Commitment: the creator activates the single ember generate CTA.
7. Observable progress: a single ember light-sweep crosses the preview frame, with a counting percentage and a scrolling monospace data readout of the pipeline (text → scenes → music → encode). No spinner is shown.
8. System work: the backend pipeline renders the scenes from the text, attaches the selected music, and encodes the short video.
9. Result: the rendered short video plays in the dark gallery-stage preview frame at 9:16 or 16:9, with a 1px luminous edge, a timecode rail beneath it (e.g. 00:14/00:30), and a data-teal music waveform running directly under the frame.
10. Continuation: the creator replays the video, changes the text, duration, or track and generates another, or leaves the page. The result was produced free of charge.

Failure/recovery: if generation fails, the light-sweep stops, a readable failure message appears in the composer block, and the entered text, chosen duration, and selected track are retained so the creator can retry without retyping. If music attachment fails, the same retention applies and the creator can retry with the same or a different track. With prefers-reduced-motion, the progress sweep becomes a static percentage bar and the preview remains readable in place.

Flow D — Previewing and confirming the scored result

1. منشئ الفيديو النصي has a rendered short video in the preview stage on إنشاء فيديو.
2. Action: the creator plays the video and watches the timecode rail advance against the total.
3. Observable result: the video plays with its music, and the data-teal waveform beneath the frame tracks the audio.
4. Decision: the creator judges the result acceptable, or decides to change the text, duration, or track.
5. Continuation: if acceptable, the creator uses the short video. If not, the creator returns to step 3 of Flow C and generates again.

Failure/recovery: if playback fails, the frame remains with its timecode rail and a readable message; the creator can regenerate from the retained inputs.

6. Visuals, Colors and Theme

The creative direction is authoritative for this section. Muse: Refik Anadol. Headline idea: data made physical — the generated film is the artwork.

Mode: dark mode across the whole app.

Colour tokens (exact hex, by role):

Colour rules. #FF7A3D is used only for the single generate CTA and the live render progress sweep. #5FE1C8 marks the music waveform, the timeline playhead, and finished-state confirmation. #8C8A9A is for labels and metadata only, never for body copy. Generated video frames supply the only other colour in the page, so the UI stays a dark frame around a bright moving image. Panels use 1px rgba(255,255,255,0.08) hairlines instead of shadows.

Typography.

• Headings: Space Grotesk 500/600, tight -0.02em tracking, sentence case (never all-caps for headlines), with a real weight jump — display headlines at 600, subheads at 400, with a 3× size gap.
• Arabic headings: Noto Kufi Arabic 600 at matched optical size, line-height 1.35 so the script breathes.
• Body: Noto Kufi Arabic.
• Numerals and timecodes (00:14 / 00:30): always Space Grotesk tabular, letterspaced +0.04em, set as small data ornaments beside labels.
• Scale: 1.333 modular on a 16px base — display clamp(40px, 7vw, 104px); h2 clamp(28px, 3.4vw, 44px); h3 24px; body 16px/1.7 (Arabic 17px/1.9); labels 13px; timecodes 13px tabular. Mobile display floor is 40px so the headline never collides with the viewport edge.

Shape language. Almost no chrome: square corners (0–4px radius) on panels and fields, hard 1px rules, and one continuous flowing form per screen — the generative canvas. Buttons are full-width rectangular blocks with a 2px inset bottom rule; no pills, no soft shadows. The only curves in the product are the moving ones in the rendered video and the music waveform, so the interface reads as a dark plinth under a living object.

Layout. Two pages. الرئيسية: full-bleed generative canvas as the first screen, a single-column reading measure (max 68ch) beneath it for the three-step explanation, then a horizontal rail of sample outputs. إنشاء فيديو: a fixed two-column workspace at 1280px — left 40% is the text composer (textarea, duration selector, music track list with waveform previews, generate block), right 60% is the sticky preview stage holding the rendered video at 9:16 or 16:9 with a timecode rail under it. At 768px the preview moves above the composer as a sticky top stage; at 375px everything stacks with the generate button pinned as a full-width bar with 16px safe margins, and all labels, timecodes, and controls wrap inside their containers.

Imagery. No stock photography and no illustration. The imagery is generative: a particle/fluid field derived from the user's own typed text (glyph positions seeding the flow), the rendered video frames themselves, and music waveforms drawn as thin luminous lines. Sample outputs on الرئيسية are shown as real looping clips in dark frames, each labelled with its source prompt in small muted type — the work is the picture.

Forbidden. Blue or indigo primary on a white ground; any #0057FF/#2563EB/#7C3AED-family accent. Inter, Roboto, Arial, Helvetica, Poppins, or system-ui for headings or body. Centred headline + subtext + blue button + gradient blob hero composition. A grid of identical hover-lift feature cards. Glassmorphic frosted panels and pastel gradient washes. Stock photography of people, clip art, or emoji as imagery. Bouncy or springy easing, confetti, particle bursts on click. Any motion that keeps running when prefers-reduced-motion is set, or a canvas that covers headline, labels, timecodes, or controls at 375/768/1280.

7. Signature Design Concept

The hero is the demo.

The first screen of الرئيسية is a near-black full-bleed generative canvas (#07070B) carrying a slow luminous flow field in ember-orange and data-teal drifting across the right two-thirds. The left third carries the oversized Arabic-first headline «حوّل نصّك إلى فيديو قصير مع موسيقى» in Space Grotesk / Noto Kufi Arabic at clamp(40px, 7vw, 104px), flush-left, wrapping to three lines. The canvas is masked away from the text column, so the headline is never overlapped.

Beneath the headline sits one line of 16px muted copy and a single full-width ember CTA block «ابدأ مجانًا» with a thin inset rule. Along the bottom edge, a 9:16 phone-shaped preview frame floats half-bled off the right edge, playing a real rendered sample with a live waveform under it and a tabular timecode 00:14/00:30.

The signature move: the flow field is seeded from the visitor's own typed words in the composer below, before they commit to anything. The demo is the hero, and it reacts to the textarea. There is no centred stack, no gradient blob, and no floating cards.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: a real-time WebGL/R3F particle/fluid flow field in ember-orange (#FF7A3D) and data-teal (#5FE1C8) drifting across the right two-thirds of a near-black (#07070B) full-bleed canvas, masked away from the left text column.
• Input → transformation → outcome thesis: the visitor's typed words seed the flow field's glyph positions; the field reorganizes into a luminous flow that carries those words as motion; the outcome is that the visitor sees their own text become a moving, luminous thing before they commit to anything — the accepted transformation, demonstrated rather than described.
• Motion vocabulary: one continuous slow generative flow that never resets jarringly; scroll-linked parallax between the canvas and the headline layer; a light-sweep across the preview frame while rendering; a counting timecode that ticks up with real progress. No bounce, no springy hovers, no confetti.
• Composed first frame: near-black ground; the flow field already drifting across the right two-thirds; the oversized Arabic-first headline flush-left in the left third, wrapping to three lines and never overlapped; one line of muted copy and the single ember CTA block beneath it; the 9:16 phone-shaped preview frame half-bled off the right edge with its live waveform and tabular timecode 00:14/00:30.
• Reduced-motion state: the canvas freezes to a single composed still frame, the progress sweep becomes a static percentage bar, and all content remains readable in place.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

One crafted real-time object: a single continuous particle/fluid field whose glyph positions are seeded from the visitor's typed text. It shows the product's defining state — inert words becoming luminous, flowing form — in ember-orange and data-teal on a near-black ground. It is masked away from the headline column, never covers readable text or controls at 375/768/1280, and freezes to a composed still frame under prefers-reduced-motion.

9. Non-Functional Requirements

• NFR-1 — Free of charge. The product is free; no payment, billing, or subscription capability exists in the current scope. Provenance: explicit (constraint: الموقع مجاني). Rationale: the free promise is the product's core positioning.
• NFR-2 — Short output. The generated video is short, with its duration shown on the timecode rail. Provenance: explicit (constraint: الفيديو الناتج قصير). Rationale: short output is what makes fast, modest-device generation possible.
• NFR-3 — Music always present. Every generated video includes music. Provenance: explicit (constraint: الفيديو الناتج يتضمن موسيقى). Rationale: the scored result is the accepted deliverable.
• NFR-4 — Arabic-first, RTL. The layout is full RTL; all reading text uses Noto Kufi Arabic at 17px/1.9; Latin timecodes and numerals use Space Grotesk tabular as deliberate data ornaments against the script. Provenance: explicit (Arabic-first direction).
• NFR-5 — Modest-device and mobile usability. The product must be usable on a phone at night on a modest device: at 375px everything stacks, the generate button is pinned as a full-width bar with 16px safe margins, and all labels, timecodes, and controls wrap inside their containers. Provenance: explicit (audience and layout direction).
• NFR-6 — Readable text and controls stay whole. At 375px, 768px, and 1280px, headlines, wordmarks, labels, numbers, cards' text, and controls stay entirely inside the viewport and their container, wrapping or scaling to fit, and no other element covers any part of them. Imagery, decoration, and motion may be cropped, bled, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control. Provenance: explicit (readability rule).

• NFR-7 — Reduced-motion support. With prefers-reduced-motion, the canvas freezes to a single composed still frame, the progress sweep becomes a static percentage bar, and all content remains readable in place. Provenance: explicit (direction).
• NFR-8 — No account required. Both accepted pages are reachable without an account; no sign-up, sign-in, or profile capability exists in the current scope. Provenance: explicit (access contract: access_requirement: none for both pages).
• NFR-9 — Observable generation progress. Generation must expose real progress: a counting percentage and a pipeline readout (text → scenes → music → encode), not an indeterminate spinner. Provenance: required_inference (indispensable observable state for the accepted generation lifecycle).

10. Tech Stack

• Frontend: React (web), RTL Arabic-first layout, with a real-time WebGL/R3F hero canvas as required by the creative direction.
• Backend: Python / FastAPI, extended with routes and modules for the text-to-video generation API and the music track catalog. This fits inside the existing backend process, port, and deployment.
• Generation worker: a separate process for the render pipeline (text → scenes → music → encode), since rendering is long-running work that must not block the API. It reports progress back for the counting percentage and pipeline readout.
• Storage: object storage for rendered short videos and music track assets; a small relational store for render job state and progress.
• Containerization: Docker / docker-compose as the inventory of runnable services (frontend, backend, generation worker, storage).
• Kubernetes: not required for the current scope.

11. Assumptions and Constraints

• A-1. The current deliverable is a short video. The user's earlier question about creating a long video is not a current commitment and is out of scope; the accepted refinement is a short video with music. (Assumption — narrow, consistent with the authoritative thread.)
• A-2. The product is free of charge, with no paid tier, billing, or subscription capability. (Explicit constraint.)
• A-3. The generated video always includes music. (Explicit constraint.)
• A-4. Both accepted pages are publicly reachable with no account. No identity establishment, sign-in, or account-management capability is in scope. (Explicit access contract.)
• A-5. The music track catalog is a small set of free tracks presented as waveform strips; the direction specifies three. (Required inference from the accepted music requirement plus the direction.)
• A-6. The duration selector and timecode rail are indispensable mechanics for the accepted short-video outcome; the direction specifies the timecode rail format 00:14/00:30. (Required inference.)
• A-7. The generation pipeline runs as a separate worker process so that long-running rendering does not block the API and can report real progress. (Required inference — infrastructure needed to make the accepted workflow work.)
• A-8. No stock photography, illustration, or emoji imagery is used; all imagery is generative. (Explicit direction.)
• A-9. The generic indigo/blue-on-white SaaS template is forbidden for this project. (Explicit direction.)

12. Glossary

• منشئ الفيديو النصي (text-to-video creator): the single accepted active human actor; the person who writes text, chooses music, generates, and receives the short video.
• فيديو قصير (short video): the accepted output format — a brief rendered video, not long-form.
• الرئيسية (Home): the public entry page that explains the free offer and leads to the workspace.
• إنشاء فيديو (Create Video): the primary workspace page for text entry, duration and music selection, generation, and preview.
• Flow field: the generative particle/fluid canvas whose glyph positions are seeded from the visitor's typed text.
• Gallery stage: the dark preview frame with a 1px luminous edge, a timecode rail, and a data-teal music waveform running directly beneath it.
• Timecode rail: the tabular Space Grotesk readout beneath the preview frame, formatted as current/total (e.g. 00:14/00:30).
• Pipeline readout: the scrolling monospace data readout of the generation stages (text → scenes → music → encode).
• Light-sweep: the single ember progress sweep that crosses the preview frame during rendering, replacing a spinner.
• Waveform strip: a 40px-tall music track representation in muted grey that turns data-teal and animates a playhead on hover or selection.