System Requirements Document for regal-hey

1. Introduction

regal-hey is a self-owned video streaming website. The product intent is to give the owner's streaming service a premium, attractive public home page that presents video content to visitors and lets them choose something to watch. The site is not a third-party service or an aggregator — it is the user's own platform, and the home page is its first impression.

The audience is twofold:

• Viewers — people who land on the home page, browse the presented video content, and pick something to watch. Their mood is entertainment and discovery: a night in, looking for something appealing quickly.
• The Site Owner — the user building and running the platform, who needs the home page to present their catalogue attractively and represent their streaming service well.

The requested experience is explicitly visual and emotional: an attractive, good-looking home page for a video streaming site. The accepted creative direction frames this as a cinematic, motion-led, content-forward surface — a cinema lobby at night — rather than a generic application landing page.

2. System Overview

regal-hey is delivered as a first-party web application with two current pages:

1. home page — the anonymous public entry surface. It presents the streaming catalogue: a hero statement, a horizontally-scrolling "Now Trending" rail of poster cards, a curated-collections editorial grid, and a full-bleed featured-title band. Visitors browse and select a video here.
2. Watch — the focused viewing destination. A visitor who selects a video from the home page arrives here to watch it.

Both pages are anonymously reachable (access_requirement: none). No account, sign-in, or identity establishment is part of the current scope: the accepted behavior is browsing and watching, and no accepted journey requires durable per-person state, a commitment, an entitlement, or a value transfer bound to a specific participant. The Site Owner's responsibility in the current scope is the presentation of the catalogue on the home page itself, not a separate administration surface.

Current actors:

• Viewer (human persona) — browses the home page and watches a selected video.
• Site Owner (human persona) — owns the platform and its content; responsible for the catalogue being presented attractively on the home page.
• Streaming delivery (system process) — serves video playback to the Watch page. This is supporting infrastructure, not a human-facing capability.

Narrow exclusions for the current scope: no user accounts or profiles, no subscription or payment flow, no upload or content-management surface, no social features, and no third-party streaming service integration. These are not prohibited product directions — they are simply not part of the accepted current requirements.

2a. Product Interpretation and Delivery Boundary

The authoritative requirement is a self-owned video streaming site with an attractive home page that presents video content. Everything in this document serves that boundary.

Delivery ownership. Both pages are first-party custom UI owned by the application. The home page is the anonymous public entry: a visitor arrives with no prior relationship to the site and immediately sees the catalogue. The Watch page is likewise anonymously reachable — a visitor who selects a title goes straight to watching it. Because no accepted journey requires the platform to remember a specific person, bind a decision to them, or hold private state for them, no identity establishment or verification step is introduced. This keeps the entry experience frictionless, which is what an attractive streaming home page demands.

Current vs. future. Current scope is the home page presentation and the viewing destination it leads to. Content management, accounts, monetization, and personalization are outside the current boundary and are recorded only as future considerations in Section 11 — they do not appear in current pages, requirements, or acceptance.

Language. The user's working language is Hindi (Hinglish), and the accepted hero headline is Hindi ("Har raat, ek nayi kahani"). Interface copy in the hero and section eyebrows follows that voice; metadata and technical labels remain in their conventional form.

2c. Page Content and Component Coverage

home page

Information and state presented

• Hero statement: uppercase cyan micro-label "NOW STREAMING", a film-title-scale headline "Har raat, ek nayi kahani" with the final word in magenta, and a one-line muted synopsis.
• Floating glass metadata chips around the hero subject (e.g. 4K · Dolby · 12 Episodes) at low opacity.
• "Now Trending" rail: a horizontally-scrolling row of poster cards that bleeds off both viewport edges.
• Curated collections: a two-column editorial grid of collection entries.
• Featured-title band: a full-bleed poster with an overlaid glass info panel and film-title-scale title.
• Catalogue state: which titles are trending, which collections exist, and which title is featured.

Primary actions

• Play the featured title (solid magenta Play pill) → navigates to Watch for that title.
• Browse catalogue (ghost button with cyan hairline border) → moves focus to the trending rail / catalogue content.
• Select a poster card in the trending rail → navigates to Watch for that title.
• Select a collection entry → reveals/opens that collection's titles within the home page context.
• Select the featured band's Play control → navigates to Watch for the featured title.

Supporting actions

• Horizontal scroll / swipe through the trending rail.
• Hover or focus a poster card to reveal its glow, scale, and metadata.
• Navigate via the floating glass navigation pill (active state indicated by a thin cyan underline).

Domain entities

• Title (poster art, name, duration, year, genre, playback reference).
• Collection (name, curated set of titles).
• Featured title (the title currently occupying the full-bleed band).
• Trending set (ordered list of titles in the rail).

Component responsibilities

• Floating glass navigation pill — centred at the top; holds primary navigation and shows the active destination with a thin cyan indicator.
• Hero subject — the real-time 3D glass prism with radial HUD ring; orbits continuously, carries the magenta light sweep, and is the only 3D subject on the page.
• Hero type block — micro-label, headline, synopsis, and the two hero controls.
• Metadata chips — drifting glass chips carrying title facts.
• Trending rail — horizontally scrolling poster-card list with edge bleed.
• Poster card — poster art, title, and metadata; scales and blooms cyan glow on hover/focus.
• Collections grid — two-column editorial layout of collection entries.
• Featured band — full-bleed poster with overlaid glass info panel and Play control.

States

• Loading: hero type and controls render immediately; the 3D hero subject streams in progressively; rails and grids show placeholder poster frames until catalogue data resolves.
• Empty: if the trending set or a collection has no titles, the rail or grid shows a muted "Abhi kuch aur aa raha hai" placeholder rather than an empty gap; the hero and featured band remain if a featured title exists.
• Success: catalogue renders; poster cards are focusable and selectable; Play controls navigate to Watch.
• Error: if catalogue data fails to load, the hero remains intact and the affected rail/grid shows a retry affordance with a muted explanation; the page never renders as a blank void.
• Recovery: retrying re-requests the affected catalogue section only; the hero and navigation remain usable throughout.

Watch

Information and state presented

• The selected title's playback surface.
• Title identity: name, and available metadata (duration, year, genre).
• Playback state: playing, paused, buffering, ended.

Primary actions

• Play / pause the title.
• Seek within the title.
• Adjust volume and toggle mute.
• Toggle fullscreen.
• Return to the home page.

Supporting actions

• Resume playback after a buffer stall.
• Continue to another title after the current one ends (via return to home page).

Domain entities

• Title (the selected video and its playback reference).
• Playback session (current position, play/pause state, buffering state).

Component responsibilities

• Player surface — renders the video for the selected title.
• Playback controls — play/pause, seek, volume/mute, fullscreen.
• Title info strip — name and metadata for the playing title.
• Return control — navigates back to the home page.

States

• Loading: player surface shows a cyan progress indicator while the stream initializes.
• Empty: if no title is selected (direct arrival without a selection), the page shows a muted prompt and a control returning to the home page catalogue.
• Success: video plays; controls respond; metadata displays.
• Error: if the stream fails, the player shows a clear failure message with a retry control; the return-to-home control remains available.
• Recovery: retry re-initializes playback for the same title; if it continues to fail, the visitor can return to the home page and choose another title.

3. Functional Requirements

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

FR-1 — Self-owned streaming platform As the Site Owner, I should have my own video streaming website (not a third-party service) so that my catalogue is presented on a platform I own.

• Provenance: explicit.
• Trigger: the site is deployed and reachable.
• Observable result: the site serves its own home page and its own Watch destination under the owner's platform identity.
• Access state: public.
• Failure/recovery: not applicable at this level; availability is covered by NFR-1.
• Continuation: the owner's catalogue is presented on the home page (FR-2, FR-3).

FR-2 — Attractive home page As the Site Owner, I should have an attractive, good-looking home page for my video streaming site so that visitors get a premium first impression of my service.

• Provenance: explicit.
• Trigger: a visitor opens the site root.
• Observable result: the home page renders the accepted cinematic presentation — dark ground, floating glass navigation pill, hero statement with the 3D glass prism subject, trending rail, collections grid, and featured band — as specified in Section 6 and Section 7.
• Access state: anonymous, no identity required.
• Failure/recovery: if the 3D hero subject cannot initialize, the hero type block, controls, and catalogue remain fully usable and the hero degrades to a static luminous treatment.
• Continuation: the visitor browses the catalogue (FR-3) or plays the featured title (FR-4).

FR-3 — Present video streaming content to visitors As a Viewer, I should see the streaming catalogue presented on the home page so that I can find something appealing to watch.

• Provenance: explicit.
• Trigger: the visitor lands on the home page.
• Observable result: the trending rail, curated collections grid, and featured-title band render with poster art, titles, and metadata; poster cards are focusable and show their glow/scale state on hover or focus.
• Access state: anonymous.
• Failure/recovery: if catalogue data fails to load, the affected section shows a retry affordance and the hero remains intact; retry re-requests only that section.
• Continuation: the visitor selects a title (FR-4) or explores a collection (FR-5).

FR-4 — Select and play a title As a Viewer, I should select a title from the home page and be taken to watch it so that I can start watching immediately.

• Provenance: explicit (home page presents content) with required_inference for the viewing destination.
• Trigger: the visitor activates a Play control — the hero Play pill, a poster card in the trending rail, or the featured band's Play control.
• Observable result: the Watch page opens for the selected title and playback begins.
• Access state: anonymous; no sign-in step intervenes.
• Failure/recovery: if the stream fails to initialize, the Watch page shows a failure message with a retry control and a return-to-home control.
• Continuation: the visitor watches (FR-6), or returns to the home page to choose another title.

FR-5 — Explore curated collections As a Viewer, I should browse curated collections on the home page so that I can discover titles grouped by theme.

• Provenance: required_inference (the accepted home page presents video content; collections are the editorial grouping of that content).
• Trigger: the visitor scrolls to or selects a collection entry in the two-column editorial grid.
• Observable result: the collection's titles are revealed in the home page context.
• Access state: anonymous.
• Failure/recovery: if a collection's titles fail to load, the entry shows a muted retry state without breaking the rest of the grid.
• Continuation: the visitor selects a title from the collection (FR-4).

FR-6 — Watch a selected title As a Viewer, I should watch the selected title on the Watch page so that I can consume the content I chose.

• Provenance: required_inference (a focused viewing destination is required so a visitor can watch a video selected from the home page).
• Trigger: arrival on the Watch page with a selected title.
• Observable result: the video plays; play/pause, seek, volume/mute, and fullscreen controls respond; the title's name and metadata display.
• Access state: anonymous.
• Failure/recovery: buffering shows a progress state and resumes automatically; a stream failure shows a retry control; if no title is selected, a muted prompt and a return-to-home control are shown.
• Continuation: on end, the visitor returns to the home page to choose another title.

FR-7 — Navigate between destinations As a Viewer, I should move between the home page and the Watch page so that I can browse and watch without losing my place.

• Provenance: required_inference (the two accepted destinations must be reachable from each other).
• Trigger: the visitor uses the floating glass navigation pill or the Watch page's return control.
• Observable result: the destination changes with the accepted 400ms crossfade and cyan wipe transition; the navigation pill shows the active destination with a thin cyan underline.
• Access state: anonymous.
• Failure/recovery: if a destination fails to load, the navigation pill remains available for recovery.
• Continuation: the visitor continues browsing or watching.

FR-8 — Present the owner's catalogue attractively As the Site Owner, I should have my catalogue presented with cinematic, content-forward presentation so that my streaming service reads as premium.

• Provenance: required_inference (the owner's accepted responsibility is presenting their catalogue attractively on the home page).
• Trigger: the home page renders with catalogue data.
• Observable result: poster art and stills are treated as luminous objects on the dark ground with chromatic rim light and a faint scanline overlay; the hero subject is the single 3D focal point; HUD-style micro-labels frame the sections.
• Access state: anonymous.
• Failure/recovery: if imagery fails to load, poster cards fall back to a glass placeholder carrying the title name and metadata rather than a broken frame.
• Continuation: the visitor engages with the presented catalogue (FR-3).

4. User Personas

Viewer

Product context. The Viewer arrives at regal-hey with no prior relationship to the site and no account. They are in an entertainment mood — a night in, looking for something to watch — and they judge the platform in the first few seconds. The home page is the entire first impression.

Primary goal. Find something appealing to watch, quickly, and start watching it without friction.

Distinct accepted responsibilities.

• Land on the home page and take in the presented catalogue.
• Scan the trending rail, the curated collections, and the featured band.
• Select a title via a Play control or a poster card.
• Watch the selected title on the Watch page, controlling playback.
• Return to the home page to choose something else.

Relevant inputs or decisions. Which title to watch; whether to explore a collection or go straight to the featured title; whether to keep watching or return to browse.

Interactions with other accepted participants. The Viewer is the audience for the Site Owner's catalogue presentation. The Viewer's selection is what makes the owner's presentation meaningful; the Viewer never interacts with the owner directly, only with the catalogue the owner has curated.

Observable success. The Viewer finds an appealing title and is watching it within moments of landing, with no sign-in or setup step in the way.

What makes this role different. The Viewer's work is selection under low patience — the value of the home page is measured in how fast and how pleasurably a choice is made. This is a browsing-and-choosing role, not a managing or configuring one.

Site Owner

Product context. The Site Owner is the user who is building this streaming site themselves ("khud ka"). They own the platform and its content. Their relationship to the product is as the party responsible for how the catalogue is presented — the home page is their shopfront.

Primary goal. Have a compelling, attractive home page that represents their streaming service well and makes viewers engage with the catalogue.

Distinct accepted responsibilities.

• Own the platform identity — the site is theirs, not a third-party service.
• Ensure the catalogue is presented attractively and cinematically on the home page.
• Ensure the presentation is content-forward: the video catalogue itself is the hero.

Relevant inputs or decisions. What the catalogue contains; which title is featured; how collections are curated; how the presentation reads to a first-time visitor.

Interactions with other accepted participants. The Site Owner's presentation is consumed by the Viewer. The owner's success is observed indirectly, through the Viewer's engagement with the catalogue.

Observable success. A first-time visitor lands on the home page and immediately reads it as a premium streaming service, with the catalogue as the focal point.

What makes this role different. The Site Owner's work is presentation and representation — the concern is the quality and character of the surface the Viewer meets, not the act of watching. This is a curation-and-brand role, distinct from the Viewer's selection-and-consumption role.

5. Core User Flows

Flow 1 — Viewer lands and browses the catalogue

1. The Viewer opens the regal-hey site root in a browser. No sign-in is requested.
2. The home page renders: the deep near-black ground, the floating glass navigation pill centred at the top, and the hero.
3. The hero presents the uppercase cyan micro-label "NOW STREAMING", the headline "Har raat, ek nayi kahani" with the final word in magenta, a one-line muted synopsis, and two controls: a solid magenta Play pill and a ghost "Browse catalogue" button.
4. On the right, the 3D glass prism orbits slowly above its cyan radial HUD ring, with a magenta light sweep passing through it every 8 seconds; floating glass metadata chips drift at low opacity around it.
5. The Viewer scrolls. The camera dollies so the prism recedes and the "Now Trending" rail rises into place, bleeding off both viewport edges.
6. The Viewer hovers or focuses a poster card; it scales to 1.03 and blooms a cyan glow over 220ms, revealing its metadata.
7. Observable result: the Viewer is looking at a presented, browsable catalogue of the owner's titles.
8. Continuation: the Viewer selects a title (Flow 2) or explores a collection (Flow 3).

Failure/recovery: if the 3D hero subject cannot initialize, the hero type block, controls, and catalogue remain fully usable and the hero degrades to a static luminous treatment. If catalogue data fails to load, the affected rail or grid shows a retry affordance while the hero stays intact.

Flow 2 — Viewer selects and watches a title

1. From the home page, the Viewer activates a Play control — the hero Play pill, a poster card in the trending rail, or the featured band's Play control.
2. The destination changes to the Watch page with the accepted 400ms crossfade and cyan wipe.
3. The Watch page shows a cyan progress indicator while the stream initializes, then playback begins.
4. The Viewer controls playback: play/pause, seek, volume/mute, fullscreen. The title's name and metadata display in the info strip.
5. Observable result: the Viewer is watching the selected title.
6. Continuation: when the title ends, the Viewer returns to the home page to choose another title.

Failure/recovery: buffering shows a progress state and resumes automatically. If the stream fails, the Watch page shows a clear failure message with a retry control; retry re-initializes playback for the same title. If it continues to fail, the Viewer returns to the home page and chooses another title. If the Viewer arrives at Watch with no title selected, a muted prompt and a return-to-home control are shown.

Flow 3 — Viewer explores a curated collection

1. From the home page, the Viewer scrolls past the trending rail to the two-column editorial grid of curated collections.
2. The Viewer selects a collection entry.
3. The collection's titles are revealed in the home page context.
4. Observable result: the Viewer sees the titles grouped under that collection's theme.
5. Continuation: the Viewer selects a title from the collection, entering Flow 2.

Failure/recovery: if the collection's titles fail to load, the entry shows a muted retry state without breaking the rest of the grid.

Flow 4 — Viewer returns to browsing

1. From the Watch page, the Viewer activates the return control or the floating glass navigation pill.
2. The destination changes back to the home page with the accepted crossfade and cyan wipe; the navigation pill shows the home page as active with a thin cyan underline.
3. Observable result: the Viewer is back at the catalogue.
4. Continuation: the Viewer browses again (Flow 1) or selects another title (Flow 2).

Flow 5 — Site Owner's catalogue is presented

1. The Site Owner's catalogue is available to the home page.
2. A visitor opens the site root; the home page renders the owner's catalogue with the accepted cinematic presentation — dark ground, luminous poster art with chromatic rim light and a faint scanline overlay, HUD-style micro-labels, and the single 3D hero subject.
3. The featured title occupies the full-bleed band with a glass info panel and a magenta Play button, its title set at film-title scale.
4. Observable result: the owner's streaming service reads as a premium, content-forward platform on first impression.
5. Continuation: the visitor engages with the catalogue (Flow 1), which is the owner's intended outcome.

Failure/recovery: if poster imagery fails to load, cards fall back to a glass placeholder carrying the title name and metadata rather than a broken frame, so the presentation never degrades into a broken grid.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: Gleb Kuznetsov. Headline idea: video as a floating holographic object — a cinema lobby at night, motion-led and content-forward.

Mode. Dark mode only.

Colour tokens (exact hex by role)

Body copy never sits below 4.5:1 contrast. Glass panel borders are 1px #22E3FF at 12% opacity.

Typography. Headings and body both Space Grotesk — a wide geometric techno-grotesk. Headlines at 700 weight, tight -0.02em tracking, mixed case for the big statement with one uppercase micro-label above it. Display sizes go very large: clamp(3rem, 9vw, 8.5rem) so the title behaves like a film title card. Micro-labels are uppercase 11px with +0.22em letterspacing in #22E3FF. Body is 16px/1.65. Type scale is a 1.25 modular scale: 96 / 64 / 40 / 28 / 18 / 16 / 13 / 11 (micro-label). Line lengths are capped at 62ch for synopses.

Shape language. Floating glass panels with 20–28px radii and 1px luminous edges. Thin cyan hairline strokes and radial HUD rings around the hero subject. Poster cards use a 12px radius with a soft cyan glow that appears only on focus/hover. Curves are continuous and slightly organic (superellipse-ish) — never chunky rounded-corner SaaS.

Spacing rhythm. Full-bleed dark canvas with generous vertical breathing room between bands; the hero occupies the full viewport, the trending rail bleeds off both edges, and the featured band runs full-bleed. Section eyebrows use the HUD micro-label treatment to create a consistent instrument-panel rhythm.

Imagery style. One crafted real-time 3D subject in the hero — a faceted glass prism/torus that refracts cyan and magenta light, standing in for "the stream". Everything else is content imagery: poster art and stills treated as luminous objects on the dark ground, with subtle chromatic rim light and a faint scanline overlay. No stock people smiling at laptops, no flat clip art, no abstract gradient blobs.

Explicitly avoided. Blue/indigo (#2563EB, #4F46E5, #6366F1) on white; centred headline + subtext + blue button + gradient blob heroes; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins or system-ui for headings or body; grids of identical hover-lift white cards; gradient blobs or soft pastel washes; flat clip-art or stock photography of people smiling at screens; bouncy/springy easing or playful confetti motion; more than one 3D subject competing with the hero prism.

7. Signature Design Concept

The floating holographic stream. The public entry is a full-viewport #05060B void. On the right, a single faceted glass prism floats above a faint cyan radial HUD ring, slowly orbiting with a magenta light sweep passing through it — the only 3D subject, deliberately oversized, bleeding past the right viewport edge. On the left, an uppercase cyan micro-label "NOW STREAMING", then the Space Grotesk headline at clamp(3rem, 9vw, 8.5rem) reading "Har raat, ek nayi kahani" with the final word in #FF3D8B, then a one-line muted synopsis and two controls: a solid #FF3D8B Play pill and a ghost