# Product Requirements Document: ScreenVivid MVP | **Document Version** | **Author** | **Date** | **Status** | | :--- | :--- | :--- | :--- | | 1.1 | Product Management | [Date] | Final for Review | ## 1. Introduction & Vision ### 1.1. Product Overview ScreenVivid is a powerful, browser-based 3D video animation tool designed for content creators, marketers, and social media managers. It empowers users to create rich, dynamic video compositions by combining multiple video assets, animated text, and 3D transformations on an intuitive timeline interface. All rendering, processing, and exporting are handled client-side, ensuring user privacy and eliminating the need for powerful desktop hardware or expensive software subscriptions. ### 1.2. Problem Statement Creating professional-looking video animations with 3D elements is currently a high-barrier-to-entry task. It demands complex and resource-intensive desktop software (e.g., Adobe After Effects, Blender), a steep learning curve, and often, significant financial investment. There is a market need for an accessible, lightweight, and powerful tool that allows creators to produce compelling video content directly in their browser. ### 1.3. Vision Our vision is to democratize 3D video animation, making it as easy and accessible as traditional 2D video editing. ScreenVivid will be the go-to tool for creators who want to elevate their content with dynamic 3D effects without the traditional overhead. ## 2. Goals & Success Metrics ### 2.1. Product Goals * **Launch a stable MVP:** Deliver a feature-complete and robust Minimum Viable Product that fulfills all core requirements outlined in this document. * **Validate Core Value Proposition:** Confirm that users find value in the client-side, 3D-centric video editing workflow. * **Establish a Foundational Architecture:** Build a scalable and maintainable codebase that can support future features like collaboration, templates, and advanced effects. ### 2.2. Key Success Metrics (First 3 Months Post-Launch) * **User Adoption:** Achieve 1,000 Monthly Active Users (MAUs). * **Core Feature Engagement:** > 50% of active users successfully export at least one video. * **User Retention:** Achieve a Week-1 retention rate of > 20%. * **Performance:** Maintain an average of > 30 FPS in the preview canvas during playback on modern hardware (e.g., MacBook Pro M1/Intel i7 with 16GB RAM). * **Session Duration:** Achieve an average session duration of > 15 minutes for engaged users (users who interact with the timeline). ## 3. Target Audience & User Personas ### 3.1. Persona 1: Chloe, the Social Media Manager * **Needs:** Quickly create eye-catching, short-form video content (reels, stories) with animated text and logos. Values speed, ease of use, and pre-set animations. * **Pain Points:** Desktop video editors are too slow and complex for her rapid workflow. * **Use Case:** Imports a product video and a logo, places them in 3D space, adds an animated "Shop Now" text call-to-action, and exports for Instagram. **3.2. Persona 2: Alex, the Content Creator** * **Needs:** Create custom intros, outros, and lower-thirds for YouTube videos. Wants granular control over animation (keyframing) and visual quality. * **Pain Points:** Finds tools like After Effects intimidating and time-consuming to learn. * **Use Case:** Composes an intro sequence with multiple video clips flying into place, uses keyframes to animate the camera, and adds 3D text with their channel name. ### 4. Functional Requirements (MVP) This section details the specific features and functionalities required for the MVP launch. #### FR-1: Media Management * **Description:** The user must be able to import, view, and manage their media assets within a dedicated library panel. * **Requirements:** * **1.1. Media Library Panel:** A persistent, collapsible panel shall display all imported media for the current project session. * **1.2. File Import:** * Users can upload media via a dedicated "Upload" button or by dragging and dropping files onto the media library panel. * Supported video formats: **MP4 (H.264), WebM (VP8/VP9)**. The application should reject unsupported file types with a user-friendly error message. * A progress indicator must be shown for each file during upload/processing. * **1.3. Asset Representation:** * Each asset in the library shall be represented by a thumbnail (the first frame of the video). * The asset's filename and dimensions shall be displayed. * **1.4. Asset Management:** Users can select an asset in the library and delete it from the project. A confirmation prompt must be shown before deletion. #### FR-2: Timeline & Tracks * **Description:** A multi-track timeline interface that serves as the primary workspace for arranging and editing video clips. * **Requirements:** * **2.1. Multi-Track Interface:** The timeline shall support an arbitrary number of video/text tracks. New tracks are created automatically when a clip is dragged to an empty area. * **2.2. Drag & Drop:** Users must be able to drag an asset from the Media Library and drop it onto a track in the timeline to create a clip. * **2.3. Clip Manipulation:** * **Trimming:** Users can trim the start and end of a clip by dragging its edges. The cursor must change to indicate trim mode. * **Moving:** Users can click and drag a clip to move it along its track (time) or to a different track (layer). * **Splitting:** A "Split" tool/button (and keyboard shortcut `S`) shall cut the selected clip(s) at the current playhead position. * **2.4. Playhead & Playback:** * A vertical playhead indicates the current frame being displayed in the preview. * Users can click or drag the playhead along the time-ruler to "scrub" through the composition. * Playback controls (Play, Pause, Go to Start) shall be present and synced with the playhead and preview. * **2.5. Timeline Navigation:** * Controls (buttons or a slider) must be provided to zoom in and out of the timeline. * The timeline must be horizontally scrollable. * **2.6. Snapping:** When moving or trimming clips, their edges should optionally snap to the playhead, the start/end of other clips, or keyframes to facilitate precise alignment. This feature should be toggleable. #### FR-3: 3D Scene & Transformation * **Description:** All visual assets (video, text) are rendered as objects in a 3D space, which can be manipulated. * **Requirements:** * **3.1. 3D Canvas:** A central canvas shall display a real-time 3D preview of the composition. * **3.2. Video as a 3D Plane:** Each video clip on the timeline will be rendered as a texture onto a `THREE.PlaneGeometry` mesh. * **3.3. Properties Inspector:** When a clip is selected, a "Properties" panel shall appear, displaying its transform values. * **Position:** Numeric inputs for X, Y, Z coordinates. * **Rotation:** Numeric inputs for X, Y, Z rotation (in degrees). * **Scale:** Numeric inputs for X, Y, Z scale. A "lock aspect ratio" toggle shall be available. * **3.4. Direct Manipulation:** Users can optionally manipulate a selected object's position, rotation, and scale directly on the 3D canvas via a visual gizmo (a-la Blender/Unity). * **3.5. Layering (Z-Index):** The Z-position of an object determines its visual layer. Objects with a lower Z-value (closer to the camera) will render on top of objects with a higher Z-value. #### FR-4: Text Rendering & Animation * **Description:** Users can add and customize 2D and 3D text elements. * **Requirements:** * **4.1. Add Text:** A button ("Add Text") shall create a new text clip on a new timeline track. * **4.2. Text Properties:** When a text clip is selected, the Properties Inspector shall show: * Text Content: A text input field. * Font Family: A searchable dropdown populated via the Google Fonts API. * Font Size, Color, Alignment (Left, Center, Right). * **4.3. 3D Text:** * A toggle/property to enable "3D Text". * When enabled, properties for `Extrusion Depth` and `Bevel` (size, segments) become available. * **4.4. Animation Presets:** A dropdown in the inspector offers basic animation presets: Fade In/Out, Slide In (from top/bottom/left/right), Typewriter effect. Applying a preset automatically creates the necessary keyframes. #### FR-5: Keyframe Animation * **Description:** Users can animate object properties over time using a keyframe-based system. * **Requirements:** * **5.1. Keyframe Creation:** Next to each animatable property in the inspector (Position, Rotation, Scale, Opacity, Light properties), there will be a stopwatch/diamond icon. Clicking it will add a keyframe at the current playhead position for that property. * **5.2. Keyframe Visualization:** Keyframes shall be visible as small diamond icons directly on the timeline clips. * **5.3. Keyframe Manipulation:** Users can click to select, drag to move in time, or delete keyframes on the timeline. * **5.4. Camera Animation:** The camera itself shall be an animatable object. A dedicated "Camera" track or setting will allow users to keyframe its Position and Rotation to create camera movements (pans, tilts, dollies). * **5.5. Easing Functions:** When a keyframe is selected, the user can choose an easing function (e.g., Linear, Ease In, Ease Out, Ease In-Out) to control the interpolation curve leading up to that keyframe. #### FR-6: Lighting * **Description:** A basic but effective lighting system to add depth and realism to the 3D scene. * **Requirements:** * **6.1. Default Lighting:** Every new project will start with a default lighting setup: one `AmbientLight` (for global illumination) and one `PointLight` (for specular highlights and shadows). * **6.2. Add/Manage Lights:** Users can add additional lights (PointLight, DirectionalLight) to the scene via a menu. * **6.3. Light Properties:** When a light is selected (from a scene outliner panel or by clicking a helper in the canvas), its properties (Color, Intensity, Position) are editable in the inspector. * **6.4. Animatable Lights:** All light properties (Color, Intensity, Position) must be keyframe-animatable. #### FR-7: Core Editing Features * **Description:** Essential quality-of-life features that define a modern editor. * **Requirements:** * **7.1. Undo/Redo:** The application must support multi-level undo/redo (`Ctrl+Z` / `Ctrl+Y`) for all major actions (e.g., clip manipulation, property changes, keyframe edits, deletion). * **7.2. Multiple Selection:** Users can select multiple clips on the timeline by `Shift+Click` or by dragging a selection box. Actions (move, delete, copy/paste) will apply to all selected clips. * **7.3. Copy/Paste Clips:** Users can copy (`Ctrl+C`) and paste (`Ctrl+V`) selected clips. Pasted clips will appear at the playhead's position. * **7.4. Ripple Delete:** An option (or default behavior) where deleting a clip causes all subsequent clips on that same track to shift left to close the gap. * **7.5. Keyboard Shortcuts:** Implement standard keyboard shortcuts for common actions: `Spacebar` (Play/Pause), `S` (Split), `Delete` (Delete selected), `Ctrl+C/V/X/Z/Y`. A help modal should list all available shortcuts. #### FR-8: Preview & Export * **Description:** The user must be able to preview their work in real-time and export the final composition as a video file. * **Requirements:** * **8.1. Real-time Preview:** The 3D canvas must update in real-time as the user scrubs the timeline or modifies properties. Playback should be as smooth as possible. * **8.2. Aspect Ratio Guide:** An overlay on the preview canvas will show the 16:9 aspect ratio boundary. * **8.3. Export Workflow:** * An "Export" button will open a modal with export settings. * **Settings:** * Resolution: 720p (1280x720), 1080p (1920x1080). * Format: WebM, MP4. * Quality: Low, Medium, High (affecting bitrate). * The export process will render the animation frame-by-frame and encode it using the `MediaRecorder` API. A progress bar indicating the export status is mandatory. * Once complete, the user will be prompted to download the final video file. ### 5. Non-Functional Requirements (NFRs) * **5.1. Performance:** * **Initial Load:** The application should be interactive within 5 seconds on a standard broadband connection. * **Playback FPS:** Maintain a minimum of 30 FPS during timeline playback for a project of moderate complexity (e.g., 5 video tracks, 10 keyframed properties, 2 lights). * **5.2. Browser Compatibility:** The application must be fully functional on the latest two versions of: * Google Chrome * Mozilla Firefox * Microsoft Edge * Apple Safari * **5.3. Usability:** The user interface must be intuitive, requiring minimal guidance for users familiar with basic video editing concepts. All interactive elements must have clear hover and active states. * **5.4. Data Privacy & Security:** * All user-imported media and project data must remain client-side. * No media assets or project files will be uploaded to or stored on a server for the MVP. * **5.5. Accessibility (A11y):** All interactive controls (buttons, inputs, sliders) must have appropriate ARIA labels and be navigable via keyboard. ### 6. Assumptions & Dependencies * **Assumptions:** * Users will have modern hardware with a dedicated or powerful integrated GPU capable of running WebGL2 smoothly. * Users are on a stable, high-speed internet connection for loading the application and Google Fonts. * **Dependencies:** * The functionality and performance are dependent on the capabilities of the user's browser and its implementation of WebGL, WebCodecs, and MediaRecorder APIs. * The project relies on the stability and continued maintenance of the open-source libraries in the tech stack (Next.js, Three.js, R3F, Redux, etc.). ### 7. Out of Scope for MVP (Future Considerations) To ensure a timely and focused launch, the following features will **not** be included in the MVP: * **Audio Editing:** No audio track visualization, mixing, or processing. Exported videos will be silent. * **User Accounts & Cloud Storage:** All projects are session-based and stored locally. There will be no cloud saving or user authentication. * **Collaboration:** No real-time or asynchronous collaboration features. * **Advanced Effects:** No support for custom shaders, post-processing effect chains (e.g., bloom, god rays), or particle systems. * **3D Model Import:** Users cannot import their own 3D models (e.g., `.glb`, `.obj`). * **Templates:** No pre-built project templates will be offered. * **Advanced Text Animation:** No per-character or per-word animation controls. * **Responsive Design for Mobile:** The application is designed for desktop/laptop use only. - Initial Deployment

initial commit