Remix

Make your own version of Cinematic Video Workspace

Edit the prompt below and generate a customized version in seconds.

Original by John Paul Olarte

Describe your app

Build a mobile-first web app called JP AI VIDEO GENERATOR.

BRAND
JP AI MOVIE
JP AI VIDEO GENERATOR
Tagline: Create. Imagine. Produce.

PURPOSE
This is a personal cinematic AI video production workspace. It lets users create video shots from images, prompts, characters and scenes, then organize those shots into a movie timeline.

TARGET USERS
Beginner creators and independent filmmakers who want to plan and manage AI-generated movie/video shots from an Android phone or desktop.

IMPORTANT
Build a real working app. Do NOT fake AI video generation, fake MP4 files, fake progress, or fake generated videos.

If no AI video engine is connected, clearly show:
🔴 AI Video Engine Not Connected

The app should still fully work as a video planning and production workspace.

TECHNOLOGY
Use:
- HTML
- CSS
- Vanilla JavaScript
- IndexedDB
- LocalStorage only for small settings

Do NOT use React, Vue, Angular, Bootstrap, Tailwind, or unnecessary libraries.

DESIGN
Create a dark futuristic cinematic interface:
- Very dark navy/black background
- Blue and cyan accents
- Lightweight futuristic glow
- Clean cinematic cards
- Responsive mobile-first design
- Large touch-friendly buttons
- No heavy animations or lag

MAIN NAVIGATION
Home
Projects
Video Generator
Shot Planner
Media
Settings

HOME
Show:
- JP AI VIDEO GENERATOR
- FREE MODE
- AI Video Engine: 🔴 Not Connected
- Create Video
- Projects
- Shot Planner
- Media Library
- Recent Projects

VIDEO GENERATOR
Create the main workspace with:
- Active Project
- Active Scene
- Current Shot

INPUT IMAGE
Allow:
- Upload Image
- Choose From Media

Supported:
JPG, JPEG, PNG, WEBP

Show image preview, filename, size and type.

Store media in IndexedDB, not LocalStorage.

VIDEO PROMPT
Create fields:
- Subject
- Character Motion
- Action
- Environment Motion
- Camera Movement
- Camera Angle
- Lens
- Lighting
- Mood
- Duration
- Style
- Negative Prompt

Buttons:
Generate Structured Prompt
Copy Prompt
Save Prompt
Clear

PROMPT BUILDER
Combine the fields into one editable cinematic video prompt.

Example:
"Photorealistic cinematic science fiction scene of a young programmer sitting inside a dark radio observatory at night. He slowly turns toward the monitor as an unknown signal becomes stronger. Rain moves outside while the screens flicker. Slow cinematic push-in, realistic human movement, cold blue lighting, suspenseful atmosphere, 24fps, 6 seconds."

VIDEO SETTINGS
Duration:
5s, 10s, 15s

Aspect Ratio:
16:9, 9:16, 1:1

Resolution:
480p, 720p, 1080p

Motion:
Low, Medium, High

Camera:
Static, Push In, Pull Out, Pan Left, Pan Right, Tilt, Tracking, Orbit, Handheld

Frame Rate:
24 FPS, 30 FPS

Only enable settings supported by a real connected engine.

CHARACTER REFERENCE
Allow the user to select a character from the project.

Show:
- Character Name
- Reference Image
- Appearance
- Clothing
- Personality

SCENE CONTEXT
Allow loading:
- Scene Number
- Scene Title
- Location
- Time
- Characters
- Action
- Dialogue
- Camera
- Lighting
- Mood
- Visual Description

SHOT PLANNER
Create a cinematic shot planner.

Each shot contains:
- Shot Number
- Shot Type
- Description
- Input Image
- Character
- Camera Movement
- Character Motion
- Environment Motion
- Video Prompt
- Duration
- Status

Shot types:
Establishing Shot
Wide Shot
Medium Shot
Close-Up
Extreme Close-Up
Over-the-Shoulder
Tracking Shot
Low Angle
High Angle
POV Shot
Insert Shot

Actions:
Add
Edit
Duplicate
Delete
Move Up
Move Down

SCENE DURATION
Show:
Target Duration
Current Duration
Remaining Duration

Calculate automatically from saved shot durations.

MOVIE TIMELINE
Display shots in order with:
- Thumbnail
- Shot Number
- Duration
- Status

Actions:
Move
Duplicate
Replace
Delete
Preview

Show total duration.

Do not render a final movie unless a real video engine is connected.

AI VIDEO ENGINE
Create an AIService with:

async generateVideo(data)

When no provider is connected, return:
"AI Video Engine Not Connected"

Architecture:

Frontend
→ Secure Backend or Local AI Server
→ Real AI Video Model
→ Generated Video
→ JP AI VIDEO GENERATOR
→ Media Library

Never put private API keys in frontend JavaScript or LocalStorage.

GENERATION STATES
Prepare UI for:
Preparing
Sending Request
Generating
Processing
Saving
Completed
Failed

Only use real generation states when a real engine is connected.

VIDEO PREVIEW
When a real video exists, show an HTML5 video player with:
Play
Pause
Seek
Volume
Fullscreen

Show:
Filename
Duration
Resolution
Aspect Ratio
Created Date

Buttons:
Save to Media
Generate Again
Create New Version
Delete

If no video exists:
"No generated video yet."

VIDEO VERSIONS
Support:
V1, V2, V3...

Store:
Version
Prompt
Duration
Created Date
Status

MEDIA LIBRARY
Categories:
Images
Videos
Audio

Actions:
Open
Delete
Use as Input Image

PROJECTS
Create projects with:
Project Name
Description
Genre
Tone

Project cards show:
Name
Genre
Created Date
Last Updated
Scenes
Shots
Total Duration

DATABASE
Use IndexedDB database:

JPAIVideoGeneratorDB

Stores:
projects
scenes
shots
prompts
characters
media
videoVersions
settings

Data must survive:
- Refresh
- Browser restart
- Android Home button
- App reopen

STATE PERSISTENCE
Save:
Current Project
Current Scene
Current Shot
Current Screen
Generator Settings
Current Prompt
Selected Image
Character Reference
Scene Context

Use debounced autosave and visibilitychange/pagehide/beforeunload.

Restore the previous valid workspace when the app opens.

SETTINGS
Include:
Appearance
Video Engine
Storage
Export/Import
About

Video Engine:
Current Engine: 🔴 Not Connected
Provider: None

Prepare options:
None
Local AI Engine
External API

Do not fake provider connections.

EXPORT / IMPORT
Allow project data export as:

JP-AI-VIDEO-PROJECT.json

Include project, scene, shot, prompt, character, video metadata and settings.

Do not put large video files inside JSON.

PERFORMANCE
Keep the app lightweight.
Avoid duplicate functions, IDs, listeners, database initialization and navigation systems.

MOBILE
Optimize for Android:
- Touch-friendly
- Responsive
- No horizontal overflow
- No tiny controls
- Mobile bottom navigation

IMPORTANT FINAL FLOW

JP AI MOVIE
→ Story
→ Characters
→ Scenes
→ Image Prompt
→ Image
→ JP AI VIDEO GENERATOR
→ Select Image
→ Character Reference
→ Scene Context
→ Video Prompt
→ Shot Planner
→ Real AI Video Engine
→ Generate Video
→ Video Preview
→ Save to Media
→ Versions
→ Movie Timeline

Build Version 1 now.

The app must be functional even without an AI video engine.

Clearly separate FREE MODE planning features from actual AI generation.

Never pretend that a video was generated when no real AI engine is connected.

Free to use. No credit card required.