System Requirements Document for goa-trip

1. Introduction

goa-trip produces a single deliverable: a 2-second animated intro — a title card displaying "GOA" — designed to be used as the opening of the creator's Goa trip video. The title card carries animations and sits over a beach background with a neon vibe. The product exists so the trip video creator can see the animated opener play exactly as it will appear, then take it into their trip video.

The audience is the trip video creator (sravika) preparing a personal Goa trip video who wants a punchy, cinematic two-second opener rather than a generic title slide.

2. System Overview

goa-trip is a small, custom-UI web product with two destinations:

• Landing — an anonymous public entry that presents the 2-second animated GOA title card product and routes the creator into the preview experience.
• Intro Preview — the working stage that owns the accepted interaction: playing the animated 2-second GOA title card over a neon beach background, replaying it, and taking it into the trip video.

The only active human actor is the Trip video creator. Both destinations are anonymously reachable (access_requirement: none); no account, sign-in, or identity continuity is required or introduced.

Current accepted behavior is narrow and exact: a 2.0-second intro, a "GOA" title card, animations on that title card, and a beach background with a neon vibe. Nothing else — no editing suite, no media library, no multi-title authoring, no social sharing — is part of the current product.

Removed from scope

• None. No concept was explicitly removed by the user.

2a. Product Interpretation and Delivery Boundary

The product is delivered as a first-party web experience. The creator arrives anonymously at the Landing page, which presents the animated GOA title card as the hero and routes into the Intro Preview. The Intro Preview is where the accepted interaction lives: the creator plays the 2-second animated title card over the neon beach background, watches it to its exact 2.0-second end, replays it, and takes the result into their trip video.

There is no application-owned identity, no provider-owned surface, and no external destination in the current scope. Both pages are public and anonymous. The 2-second length is a hard constraint of the intro itself, not a suggestion, and the intro's purpose — the opening of the creator's trip video — is fixed.

Future ideas are not part of the current product and are not represented on any page.

2c. Page Content and Component Coverage

Landing

• Information / state: The product's purpose — a 2-second animated GOA title card over a neon beach — presented as the hero stage itself, with the GOA wordmark frozen mid-glow inside the neon beach scene. A short scroll of three glass panels below the hero explains the 2-second opener, the neon beach title card, and the trip-video opening use.
• Primary action: Enter the Intro Preview to watch the animated title card.
• Supporting actions: Scroll to read the three glass panels; a static replay affordance when reduced motion is preferred.
• Domain entities: The GOA title card; the neon beach scene; the 2.0-second duration.
• Component responsibilities:
  • Hero stage: full-bleed midnight-navy beach scene with horizon glow band, dark palm silhouettes, and the oversized GOA wordmark frozen mid-glow with cyan under-stroke.
  • Top-left mono HUD strip: GOA / TITLE CARD / 2.0s.
  • Bottom-right mono readout: 00:00.00 → 00:02.00.
  • Corner HUD brackets framing the stage.
  • Entry control routing to Intro Preview.
  • Three glass panels below the hero (2-second opener, neon beach title card, trip-video opening).
• States:
  • Loading: scene fades from black over 300ms.
  • Empty: not applicable (static content).
  • Success: hero renders fully lit with the frozen wordmark and HUD.
  • Error: not applicable (no data fetch).
  • Recovery: with prefers-reduced-motion, the fully-lit final frame is shown with a static replay control.

Intro Preview

• Information / state: The full-viewport neon beach stage with the GOA title card composing inside it; a top glass HUD strip showing the project label and a 2.0s readout; a bottom glass control strip with replay, a 2-second scrub bar with glowing playhead, and a download chip; a bottom-right mono timecode counting 00:00.00 → 00:02.00; a thin cyan progress hairline across the bottom of the stage; corner HUD brackets.
• Primary action: Play the animated 2-second GOA title card.
• Supporting actions: Replay; scrub the 2-second timeline; download the intro for use as the trip video opening.
• Domain entities: The GOA title card; the neon beach scene; the 2.0-second duration; the timecode; the scrub playhead.
• Component responsibilities:
  • Stage: full-bleed neon beach scene (dark navy sky with faint star field, magenta-to-cyan horizon glow band, layered luminous surf ribbons with cyan crests, wet-sand reflection of the title glow, distant palm silhouettes).
  • Title card: GOA wordmark in Space Grotesk 700, uppercase, tracking +0.18em, magenta neon glow with cyan under-stroke.
  • Top HUD strip: project label + 2.0s readout.
  • Bottom control strip: circular replay button, 2-second scrub bar with glowing playhead, download chip.
  • Timecode readout: 00:00.00 → 00:02.00 counting in real time during playback.
  • Progress hairline: thin cyan line across the bottom of the stage.
  • Corner HUD brackets: thin cyan L-shapes at all four corners.
• States:
  • Loading: scene fades from black over 300ms; horizon glow sweeps left-to-right.
  • Empty: not applicable.

• Success: wordmark ignites (two rapid flickers, then full magenta glow), cyan under-stroke draws left-to-right over 400ms, frame holds, and cuts at exactly 2.0s.
• Error: not applicable (no data fetch).
• Recovery: replay restarts the sequence from the beginning; with prefers-reduced-motion, the fully-lit final frame is shown with a static replay control.

3. Functional Requirements

FR-1 — 2-second intro opening (explicit) As a Trip video creator I should get a 2-second intro that serves as the opening of my trip video, so that my trip video starts with a punchy, self-contained opener.

• Trigger: the creator plays the intro on the Intro Preview.
• Observable result: the animated sequence runs and cuts at exactly 2.0 seconds.
• Access: anonymous; no account required.
• Failure/recovery: replay restarts the sequence from the beginning.
• Continuation: the creator takes the intro into their trip video.

FR-2 — GOA title card (explicit) As a Trip video creator I should see a title card displaying "GOA", so that the opener names the trip destination.

• Trigger: the intro plays.
• Observable result: the GOA wordmark is displayed as the title card.
• Access: anonymous.
• Failure/recovery: replay re-displays the wordmark.
• Continuation: the creator continues to the animated sequence.

FR-3 — Animated title card (explicit) As a Trip video creator I should see the title card animate, so that the opener feels alive rather than static.

• Trigger: the intro plays.
• Observable result: the title card animates (wordmark ignites with two rapid flickers, then full magenta glow; cyan under-stroke draws left-to-right over 400ms; frame holds; cut at 2.0s).
• Access: anonymous.
• Failure/recovery: replay restarts the animation.
• Continuation: the creator watches to the 2.0s cut.

FR-4 — Beach background with neon vibe (explicit) As a Trip video creator I should see the title card over a beach background with a neon vibe, so that the opener carries the night-swim Goa mood.

• Trigger: the intro plays.
• Observable result: the neon beach scene (dark navy sky, magenta-to-cyan horizon glow, luminous surf ribbons, wet-sand reflection, palm silhouettes) sits behind the GOA title card.
• Access: anonymous.
• Failure/recovery: replay re-renders the scene.
• Continuation: the creator watches the title card compose inside the scene.

FR-5 — Preview the animated intro before use (required_inference) As a Trip video creator I should preview the animated 2-second GOA title card over the neon beach before using it, so that I can confirm it looks right as my trip video opening.

• Trigger: the creator enters the Intro Preview from the Landing.
• Observable result: the full-viewport stage plays the animated title card with HUD timecode and controls.
• Access: anonymous.
• Failure/recovery: replay restarts; reduced-motion shows the fully-lit final frame with a static replay control.
• Continuation: the creator replays or takes the intro into their trip video.

FR-6 — Replay the intro (required_inference) As a Trip video creator I should replay the 2-second intro, so that I can watch it again before committing it to my trip video.

• Trigger: the creator activates the circular replay button.
• Observable result: the sequence restarts from 00:00.00 and runs to 00:02.00.
• Access: anonymous.
• Failure/recovery: the replay control remains available after each run.
• Continuation: the creator watches again or proceeds.

FR-7 — Scrub the 2-second timeline (required_inference) As a Trip video creator I should scrub the 2-second timeline, so that I can inspect any moment of the opener.

• Trigger: the creator drags the glowing playhead on the 2-second scrub bar.
• Observable result: the stage reflects the scrubbed position within the 2.0-second sequence.
• Access: anonymous.
• Failure/recovery: releasing the playhead leaves the stage at that position; replay restarts from the beginning.
• Continuation: the creator replays or proceeds.

FR-8 — Take the intro into the trip video (required_inference) As a Trip video creator I should take the 2-second intro into my trip video, so that it becomes the opening of my trip video.

• Trigger: the creator activates the download chip on the Intro Preview.
• Observable result: the intro is made available to the creator for use as the trip video opening.
• Access: anonymous.
• Failure/recovery: the download chip remains available; the creator can replay and retry.
• Continuation: the creator uses the intro as the opening of their trip video.

4. User Personas

Trip video creator

• Product context: sravika is assembling a personal Goa trip video and needs a short, cinematic opener. The deliverable is motion itself, so the creator judges the product by how the 2-second title card looks and feels in motion, not by a static frame.
• Primary goal: Obtain a 2-second animated GOA title card over a neon beach background to use as the opening of the trip video.
• Distinct accepted responsibilities: Choose the title card content ("GOA"), the vibe (beach background with neon styling), preview the animated result, and take it into the trip video.
• Relevant inputs or decisions: Whether the animated title card reads correctly at 2.0 seconds; whether the neon beach mood matches the intended night-swim euphoria; when to replay versus proceed.
• Interactions with other accepted participants: None — the creator is the sole active human actor; no counterparty, recipient, or approver is part of the accepted scope.
• Observable success: The creator watches the GOA wordmark ignite over the neon beach, sees the sequence cut at exactly 2.0 seconds, and takes that intro into the trip video as its opening.

5. Core User Flows

Flow A — Discover the product and enter the preview

1. The creator opens the Landing page anonymously.
2. The neon beach hero stage fades from black over 300ms; the horizon glow sweeps left-to-right; the GOA wordmark is shown frozen mid-glow with its cyan under-stroke; the top-left HUD reads GOA / TITLE CARD / 2.0s and the bottom-right readout reads 00:00.00 → 00:02.00.
3. The creator reads the three glass panels below the hero (2-second opener, neon beach title card, trip-video opening).
4. The creator activates the entry control and arrives at the Intro Preview.
5. Failure/recovery: with prefers-reduced-motion, the fully-lit final frame is shown with a static replay control; the creator can still enter the preview.

Flow B — Watch the animated 2-second GOA title card

1. On the Intro Preview, the creator starts playback.
2. The scene fades from black over 300ms; the magenta-to-cyan horizon band brightens from the left edge to the right.
3. The GOA wordmark ignites like a neon tube — two rapid opacity flickers, then full magenta glow — and the cyan under-stroke draws left-to-right over 400ms.
4. The mono timecode at bottom-right counts 00:00.00 → 00:02.00 in real time; the thin cyan progress hairline advances across the bottom of the stage.
5. The frame holds and cuts at exactly 2.0 seconds.
6. Continuation: the creator replays or proceeds to take the intro into the trip video.

Flow C — Replay the intro

1. On the Intro Preview, the creator activates the circular replay button in the bottom glass control strip.
2. The sequence restarts from 00:00.00 and runs again to 00:02.00.
3. Failure/recovery: the replay control remains available after each run; the creator can replay as many times as needed.

Flow D — Scrub the 2-second timeline

1. On the Intro Preview, the creator drags the glowing playhead along the 2-second scrub bar.
2. The stage reflects the scrubbed position within the 2.0-second sequence.
3. Failure/recovery: releasing the playhead leaves the stage at that position; replay restarts from the beginning.

Flow E — Take the intro into the trip video

1. On the Intro Preview, after watching the animated title card, the creator activates the download chip in the bottom glass control strip.
2. The intro is made available to the creator for use as the opening of the trip video.
3. Failure/recovery: the download chip remains available; the creator can replay and retry.
4. Continuation: the creator uses the 2-second intro as the opening of their trip video.

6. Visuals Colors and Theme

Muse and headline: Neon horizon after Gleb Kuznetsov — a personal trip-video opener where the product's own output is the hero: a 2-second animated GOA title card over a neon beach at night, cinematic and luminous by default.

Mode: Dark only. The whole product lives on midnight navy; no white or near-white ground anywhere.

Colour tokens (exact hex by role):

• Background: #070B1A (deep midnight navy; carries ~70% of every screen)
• Surface (glass panels): #0E1530 with 1px luminous borders rgba(255,255,255,0.14)
• Text: #F2F6FF (white-ice, readable type only)
• Primary: #FF2D95 (hot magenta — title glow and primary action)
• Accent: #22E6D6 (electric cyan — secondary glow, wave crests, HUD ticks)
• Muted: #7C8BB0

Typography:

• Headings: Space Grotesk — GOA wordmark Space Grotesk 700, uppercase, tracking +0.18em, magenta neon tube glow (text-shadow: 0 0 8px #FF2D95, 0 0 24px #FF2D95, 0 0 64px rgba(255,45,149,0.55)) with a thin cyan under-stroke. Supporting headlines Space Grotesk 500 at large scale with tight leading.
• Body: Space Grotesk, 17px / 1.6.
• Micro-labels: JetBrains Mono 500, uppercase, 11–12px, tracking +0.32em, in cyan.
• Type scale: 1.25 modular for UI (12 / 14 / 16 / 20 / 25 / 31); display scale separate — wordmark clamp(72px, 18vw, 220px), page headline clamp(40px, 7vw, 96px), section label 12px mono caps.

Shape language: Full-bleed scene as the frame; floating glass panels with 20px radii and 1px rgba(255,255,255,0.14) borders; thin luminous hairlines tracing the horizon; HUD ticks, corner brackets, and radial dials as ornament; no solid opaque cards — everything sits in front of the glow.

Spacing rhythm: Generous stage margins so HUD strips pin cleanly to top and bottom; glass panels breathe with consistent padding; no centered SaaS stack, no card grid.

Imagery style: A real-time neon beach — dark navy sky with a faint star field, a magenta-to-cyan glow band at the horizon, stylised surf as layered luminous ribbons with cyan crests, wet-sand reflection of the title glow, distant palm silhouettes as dark cut-outs. Never stock photography, never flat clip-art.

Avoid: White/near-white grounds; blue/indigo SaaS accents (#2563EB, #4F46E5); gradient-blob heroes or identical hover-lift card grids; stock beach photography or flat clip-art palms; centered headline + subtext + CTA stacks; Inter, Roboto, Arial, Helvetica, or system-ui for headings or body; bouncy or springy easing; text or controls over the brightest glow without a glass backing guaranteeing contrast.

Readability rule: Headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (clamp(...)) to fit; no other element covers them. Imagery, decoration, and motion may crop, bleed, rotate, overlap, or cut as the direction asks, provided they cover no readable text or control. With prefers-reduced-motion, a usable static arrangement is provided.

7. Signature Design Concept

The stage is the product. The first accepted page (Landing) opens on a full-bleed midnight-navy beach at night: a magenta-to-cyan horizon glow band across the lower third, dark palm silhouettes at the edges, and the GOA wordmark oversized (clamp(72px, 18vw, 220px)) centered in the upper-middle with a magenta neon glow and a cyan under-stroke drawing across it. A mono HUD strip at top-left reads GOA / TITLE CARD / 2.0s; a mono readout at bottom-right counts 00:00.00 → 00:02.00. Thin cyan corner brackets frame the stage. The dominant element is the glowing wordmark inside a lit scene; the only chrome is the glass HUD. No headline-plus-subtext-plus-button stack, no gradient blob.

The signature move — the wordmark igniting like a real neon tube (two rapid flickers, then full magenta glow, cyan under-stroke drawing left-to-right over 400ms) — is the product's defining state, recomposed from accepted content only.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The oversized GOA wordmark inside the real-time neon beach scene — dark navy sky with faint star field, magenta-to-cyan horizon glow band, layered luminous surf ribbons with cyan crests, wet-sand reflection of the title glow, distant palm silhouettes.
• Input → transformation → outcome thesis: On load, the beach scene fades from black over 300ms → the horizon glow sweeps left-to-right → the GOA wordmark flickers on like a neon tube (two quick stutters, then full) → the cyan under-stroke draws across → the whole frame holds and cuts at exactly 2.0s. A slow continuous parallax drift on the surf and a light sweep across the glass panels run whenever the stage is idle; scroll-scrubbed camera drift on the landing hero.
• Motion vocabulary: Cinematic and precise — fades, left-to-right sweeps, neon-tube flicker, under-stroke draw, parallax drift, light sweep. No bouncy or springy easing.
• Composed first frame: Full-bleed midnight-navy beach, horizon glow band across the lower third, palm silhouettes at the edges, GOA wordmark oversized and centered upper-middle, top-left mono HUD GOA / TITLE CARD / 2.0s, bottom-right mono readout 00:00.00 → 00:02.00, cyan corner brackets.
• Reduced-motion state: The fully-lit final frame is shown with a static replay control; no flicker, sweep, or drift.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

A crafted real-time WebGL/R3F scene showing the product's defining state: a neon beach at night with a magenta-to-cyan horizon glow band, layered luminous surf ribbons with cyan crests, wet-sand reflection of the title glow, faint star field, and dark palm silhouettes — with the GOA wordmark composing inside it and igniting on cue. The scene is the hero subject, not a backdrop for a CTA stack.

9. Non-Functional Requirements

• Duration precision (explicit): The intro must be exactly 2 seconds long; the sequence cuts at 2.0s and the timecode counts 00:00.00 → 00:02.00.
• Intended use (explicit): The intro is intended as the opening of the creator's trip video; the product must make the intro available for that use.
• Reduced motion (required_inference): With prefers-reduced-motion, the fully-lit final frame is shown with a static replay control, preserving the accepted outcome without motion.
• Readable text and controls (required_inference): Headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px; imagery and motion may crop or bleed but never cover readable text or controls.
• Contrast (required_inference): Text and controls placed over the glow sit on a glass backing that guarantees contrast.
• Anonymous access (explicit via planning scope): Both Landing and Intro Preview are reachable without an account; no identity continuity is required.

10. Tech Stack

• Frontend: React with a real-time WebGL/R3F hero scene (per the creative direction's webgl hero dimensionality).
• Styling: Space Grotesk (headings/body) and JetBrains Mono (micro-labels), dark-mode tokens as specified in Section 6.
• Delivery: Static first-party web delivery; no backend service is required for the accepted behavior (the intro is a self-contained animated sequence).

11. Assumptions and Constraints

• Assumption (required_inference): The intro is delivered to the creator via the download chip on the Intro Preview so it can be used as the trip video opening; the exact file format is unspecified and left to implementation.
• Assumption (required_inference): The scrub bar allows inspection of any moment within the 2.0-second sequence; it does not extend the intro beyond 2 seconds.
• Constraint (explicit): The intro must be 2 seconds long.
• Constraint (explicit): The intro is intended as the opening of the creator's trip video.
• Constraint (explicit): The title card displays "GOA", includes animations, and uses a beach background with a neon vibe.
• Constraint (explicit via planning scope): Both pages are anonymously reachable; no account or sign-in is introduced.
• Default — not specified by user: Exact export/download file format and encoding of the intro.

12. Glossary

• Intro: The 2-second animated opening produced by the product.
• Title card: The card displaying the "GOA" wordmark within the intro.
• GOA wordmark: The oversized "GOA" text in Space Grotesk 700, uppercase, with magenta neon glow and cyan under-stroke.
• Neon beach: The real-time night beach scene — dark navy sky, magenta-to-cyan horizon glow, luminous surf ribbons, wet-sand reflection, palm silhouettes.
• Timecode: The mono readout counting 00:00.00 → 00:02.00 during playback.
• Scrub bar: The 2-second timeline control with a glowing playhead on the Intro Preview.
• HUD: The glass heads-up-display strips, corner brackets, and micro-labels framing the stage.
• Trip video creator: The sole active human persona; the creator preparing the Goa trip video.