8080.AI
DesignReqs
Tasks
User FlowArchitecture
Log inSign up for free

video-generation-ai

bysatya v

You are a senior Full-Stack Engineer, AI Engineer, and Motion Designer. Build a production-ready web application using: - Next.js 15 - TypeScript - TailwindCSS - Remotion - OpenAI API (or equivalent LLM) - Unsplash/Pexels APIs (for stock visuals) - ElevenLabs/Google TTS (for narration) - FFmpeg - Shadcn UI APPLICATION GOAL Create an AI-powered video generation platform that generates engaging 30-40 second videos from user-provided text. WORKFLOW 1. User enters: - Topic or text prompt - Video style - Language - Voice type - Video format (9:16, 16:9, 1:1) 2. AI analyses the input and creates: - Video title - Story script - Scene breakdown - Voiceover script - Captions - Visual prompts 3. Split content into 6-10 scenes. 4. For each scene: - Generate image prompts - Fetch relevant stock images/videos - Create motion effects - Generate captions 5. Generate narration using TTS. 6. Using Remotion: - Create cinematic animations - Zoom effects - Pan effects - Ken Burns effect - Text animations - Scene transitions - Background music 7. Export final MP4 video. VIDEO REQUIREMENTS Duration: - 30-40 seconds Structure: - Hook (0-5 sec) - Main Content (5-30 sec) - Summary/CTA (30-40 sec) Each scene should contain: { id, duration, narration, caption, visualPrompt, transition, image/videoAsset } REMOTION REQUIREMENTS Create: 1. VideoComposition.tsx 2. SceneRenderer.tsx 3. CaptionRenderer.tsx 4. TransitionManager.tsx 5. ImageAnimator.tsx 6. AudioManager.tsx 7. RenderService.ts Use: - AbsoluteFill - Sequence - spring() - interpolate() - Audio - Img - Video - useCurrentFrame() - useVideoConfig() ANIMATION STYLES - Modern social media style - Instagram Reel style - TikTok style - Dynamic subtitles - Smooth transitions - Attention-grabbing opening CAPTIONS Generate: - Word-level captions - Highlight active words - Auto line breaks - Subtitle synchronization API DESIGN POST /api/generate-video Request: { "prompt": "Benefits of drinking water" } Response: { "title": "...", "script": "...", "scenes": [...], "audioUrl": "...", "videoUrl": "...", "duration": 35 } DATABASE Store: - Projects - Scripts - Generated assets - Render history - User settings PERFORMANCE - Queue-based rendering - Progress tracking - Error handling - Asset caching - Parallel asset downloads UI PAGES 1. Dashboard 2. Create Video 3. Projects 4. Render History 5. Settings CREATE COMPLETE SOURCE CODE INCLUDING: - Folder structure - Components - API routes - Remotion compositions - Database schema - Type definitions - Environment variables - FFmpeg integration - Docker setup - Deployment guide Output clean, scalable, production-ready code following modern software architecture principles. The platform should specialise in creating viral social-media videos for: - Sports - Cricket - Football - Tennis - NBA - Current Events - Finance - Motivation - Technology AI should automatically: 1. Research the topic. 2. Generate an engaging hook. 3. Create a 30-40 second storytelling script. 4. Select matching visuals. 5. Add dynamic subtitles. 6. Add background music. 7. Generate a vertical 1080x1920 video. 8. Optimise for Instagram Reels, YouTube Shorts and TikTok. Video quality should look similar to: - MagnatesMedia - Goalcast - ESPN social clips - Modern AI short-form content creators.

LandingSign UpDashboardCreate VideoLoginRender HistoryProjectsProject DetailsSettings
Landing

Comments (0)

No comments yet. Be the first!

Project Tasks

114 tasks
#1

Generate system requirement document

0m 54s0.05 cr used
Done
#2

Generate personas & user flows

0m 8s0.05 cr used
Done
#5

Architecture

0m 28s0.05 cr used
Done
#6

Workspace task plan

2m 37s0.05 cr used
Done
#7

Create flow for Video Creator

0m 6sCredits in parent
Done
#8

Create flow for Content Producer

0m 6sCredits in parent
Done
#9

Landing

3m 29sCredits in subtasks
Done
#10

Login

2m 24sCredits in subtasks
Done
#11

Sign Up

3m 26sCredits in subtasks
Done
#12

Dashboard

5m 56sCredits in subtasks
Done
#13

Create Video

7m 13sCredits in subtasks
Done
#14

Projects

6m 22sCredits in subtasks
Done
#15

Project Details

7m 41sCredits in subtasks
Done
#16

Render History

7m 24sCredits in subtasks
Done
#17

Settings

8m 44sCredits in subtasks
Done
#18

Landing / Kinetic Stage

0m 40s0.85 cr used
Done
#19

Landing / Topic Strip

0m 35s0.85 cr used
Done
#20

Landing / Entry Actions

0m 35s0.85 cr used
Done
#21

Landing / Navigation

0m 0s0.85 cr used
Done
#22

Landing / Footer

0m 1s0.85 cr used
Done
#23

Navigation

0m 33sCredits in parent
Done
#24

Footer

0m 17sCredits in parent
Done
#25

Fix Landing: Tablet navbar causes horizontal page overflow and clips the rightmost navigation link.…

1m 19sCredits unavailable
Done
#26

Fix Landing: The phone preview presents fabricated scene structure that contradicts the required 6–10…

1m 3sCredits unavailable
Done
#27

Fix Landing review findings: Tablet navbar causes horizontal page overflow and clips… (+1 more)

0m 31s0 cr used
Done
#28

Login / Navigation Slot

0m 0s0.85 cr used
Done
#29

Login / Identity Stage

0m 42s0.85 cr used
Done
#30

Login / Credential Panel

0m 36s0.85 cr used
Done
#31

Login / Footer Slot

0m 0s0.85 cr used
Done
#32

Sign Up / Navigation Slot

0m 0s0.85 cr used
Done
#33

Sign Up / Identity Stage

0m 43s0.85 cr used
Done
#34

Sign Up / Enrollment Panel

0m 59s0.85 cr used
Done
#35

Sign Up / Footer Slot

0m 0s0.85 cr used
Done
#36

Dashboard / Navigation

0m 2s0.85 cr used
Done
#37

Dashboard / Render Status Strip

0m 37s0.85 cr used
Done
#38

Dashboard / Project Summary

1m 3s0.85 cr used
Done
#39

Dashboard / Work Entry

0m 25s0.85 cr used
Done
#40

Dashboard / Footer

0m 1s0.85 cr used
Done
#41

Create Video / Navigation

0m 0s0.85 cr used
Done
#42

Create Video / Render Stage

2m 21s0.85 cr used
Done
#43

Create Video / Footer

0m 0s0.85 cr used
Done
#44

Create Video / Output Reference

0m 26s0.85 cr used
Done
#45

Projects / Navigation

0m 1s0.85 cr used
Done
#46

Projects / Header

0m 22s0.85 cr used
Done
#47

Projects / List

1m 12s0.85 cr used
Done
#48

Projects / Footer

0m 0s0.85 cr used
Done
#49

Fix Dashboard: Desktop project metadata is clipped by the fixed-width, non-scrollable column in .

1m 6sCredits unavailable
Done
#50

Fix Dashboard: Mobile project indices overlap and hide the leading characters of each project title in .

1m 31sCredits unavailable
Done
#51

Fix Dashboard review findings: Desktop project metadata is clipped by the fixed-width… (+1 more)

0m 23s0 cr used
Done
#52

Project Details / Navigation

0m 1s0.85 cr used
Done
#53

Project Details / Header

0m 38s0.85 cr used
Done
#54

Project Details / Script Panel

0m 41s0.85 cr used
Done
#55

Project Details / Scene List

1m 39s0.85 cr used
Done
#56

Project Details / Media Panel

0m 58s0.85 cr used
Done
#57

Project Details / Footer

0m 1s0.85 cr used
Done
#58

Render History / Navigation

0m 1s0.85 cr used
Done
#59

Render History / Header

0m 37s0.85 cr used
Done
#60

Render History / Table

0m 45s0.85 cr used
Done
#61

Render History / Footer

0m 2s0.85 cr used
Done
#62

Settings / Navigation Slot

0m 1s0.85 cr used
Done
#63

Settings / Header

0m 13s0.85 cr used
Done
#64

Settings / Form Panel

0m 51s0.85 cr used
Done
#65

Settings / Footer Slot

0m 0s0.85 cr used
Done
#66

Fix Create Video: The scene timeline is hardcoded and disconnected from the AI result — is a fixed 7-entry…

0m 19sCredits unavailable
Error
#67

Fix Create Video: The render progress shown in the stage is not derived from the submitted job — falls…

0m 19sCredits unavailable
Error
#68

Fix Create Video review findings: frontend/src/components/Create Video Render Stage.jsx: the… (+1 more)

2m 14s0 cr used
Paused
#69

Fix Settings: Settings heading wraps mid-word at tablet; see (, ).

0m 32sCredits unavailable
Done
#70

Fix Settings review finding: Settings heading wraps mid-word at tablet;

0m 12s0 cr used
Done
#71

Create backend_modules diagram

0m 21sCredits in parent
Done
#72

Create er_diagram diagram

0m 21sCredits in parent
Done
#73

Create frontend_modules diagram

0m 20sCredits in parent
Done
#74

Create sequence diagram

0m 20sCredits in parent
Done
#75

Create service_network diagram

0m 20sCredits in parent
Done
#76

script and run queued renders with live progress and retry

140 cr estimated
To Do
#77

Persist projects and assets, enforce scene count, and burn word-level captions

160 cr estimated
To Do
#78

Start renders from the five inputs with topic specialisation and narration

140 cr estimated
To Do
#79

Review past render outcomes and decide on retries

60 cr estimated
To Do
#80

Create projects from submitted inputs and route failures back to retry

100 cr estimated
To Do
#81

Browse and inspect only the signed-in user's projects, scripts and assets

100 cr estimated
To Do
#82

Open and save user settings from signed-in navigation

60 cr estimated
To Do
#83

Run the full background generation pipeline and export the final MP4

160 cr estimated
To Do
#84

captions, narration, and composed video per scene

160 cr estimated
To Do
#85

Persist user settings across sessions

100 cr estimated
To Do
#86

Enroll new users through Sign Up

120 cr estimated
To Do
#87

script, scenes, assets, narration, and queued render

160 cr estimated
To Do
#88

Serve POST /api/generate-video for signed-in users

140 cr estimated
To Do
#89

Accept generation submissions and track render progress

120 cr estimated
To Do
#90

Serve the signed-in user's render history

100 cr estimated
To Do
#91

Queue renders with progress, retry, and Project Details link

120 cr estimated
To Do
#92

complete scene records and export the finished MP4

140 cr estimated
To Do
#93

Serve finished video for playback and gate download on render completion

120 cr estimated
To Do
#94

Run generation and scene breakdown against the LLM provider

100 cr estimated
To Do
#95

Build the 6–10 scene breakdown with assets, captions and mixed audio

140 cr estimated
To Do
#96

Deliver the signed-in dashboard with project and render status

100 cr estimated
To Do
#97

List saved projects and render history from persisted records

100 cr estimated
To Do
#98

Gate protected destinations behind a signed-in session

120 cr estimated
To Do
#99

Show full project detail with scene assets, playback, download and retry

100 cr estimated
To Do
#100

Project Details shows the finished video, progress and failure recovery

120 cr estimated
To Do
#101

Styled render pipeline: scenes, cached assets and narration

140 cr estimated
To Do
#102

End-to-end generation: research, scenes, assets, storage and vertical export

160 cr estimated
To Do
#103

LLM calls routed through the Lite LLM gateway

80 cr estimated
To Do
#104

Narration audio from Eleven Labs or Google TTS

80 cr estimated
To Do
#105

Application-owned sign-up and sign-in

120 cr estimated
To Do
#106

Stock visuals fetched from Unsplash and Pexels

80 cr estimated
To Do
#107

Only Landing, Login and Sign Up are reachable without a session

100 cr estimated
To Do
#108

Dashboard shows live projects and render status

100 cr estimated
To Do
#109

Project Details plays and downloads the finished MP4

120 cr estimated
To Do
#110

Create Video submits inputs and tracks render progress

140 cr estimated
To Do
#111

Sign Up enrolls a new user and lands on Dashboard

100 cr estimated
To Do
#112

Settings load, save and persist user preferences

80 cr estimated
To Do
#113

Render History lists past renders with outcomes

80 cr estimated
To Do
#114

Login verifies returning users and gates protected pages

120 cr estimated
To Do
#115

Projects lists saved projects and opens details

100 cr estimated
To Do
#116

Make the Landing hero interactive and route visitors to Sign Up and Login

80 cr estimated
To Do
Live
Landing design preview
Landing: Read platform overview
Login: 1. Submit credentials
Login: 2. Retry after invalid credentials
Sign Up: Create account instead
Dashboard: Review project summaries
Projects: Scan saved projects
Project Details: Inspect script and scenes
Project Details: Play narration audio
Project Details: Play final video
Create Video: Retry failed render
Render History: Review render outcomes
Project Details: Open related project
Settings: Edit user settings
Settings: 1. Save settings
Settings: 2. Correct save failure
Projects: Return to project list
Live
Landing design preview
Landing: Read platform overview
Login: 1. Submit credentials
Login: 2. Retry after invalid credentials
Sign Up: Create account instead
Dashboard: Review project summaries
Projects: Scan saved projects
Project Details: Inspect script and scenes
Project Details: Play narration audio
Project Details: Play final video
Create Video: Retry failed render
Render History: Review render outcomes
Project Details: Open related project
Settings: Edit user settings
Settings: 1. Save settings
Settings: 2. Correct save failure
Projects: Return to project list