401 lines
5.6 KiB
Markdown
401 lines
5.6 KiB
Markdown
Build a modern web-based VFX review and approval platform prototype focused on simplicity, speed, and reliability for boutique VFX/animation studios.
|
||
|
||
The goal is NOT to compete with enterprise systems immediately.
|
||
|
||
The goal is:
|
||
|
||
* dead simple uploads
|
||
* fast review cycles
|
||
* frame-accurate feedback
|
||
* artist/client collaboration
|
||
* approval tracking
|
||
* production-ready architecture
|
||
|
||
The UX should feel modern, cinematic, lightweight, and extremely responsive.
|
||
|
||
Tech stack requirements:
|
||
|
||
* Next.js latest App Router
|
||
* TypeScript
|
||
* TailwindCSS
|
||
* shadcn/ui
|
||
* PostgreSQL
|
||
* Prisma ORM
|
||
* React Query / TanStack Query
|
||
* UploadThing or S3-compatible uploads
|
||
* Server Actions where appropriate
|
||
* Docker support
|
||
* Self-hostable architecture
|
||
* Dark mode first
|
||
|
||
The system should support:
|
||
|
||
* clients
|
||
* projects
|
||
* shots
|
||
* versions
|
||
* comments
|
||
* annotations
|
||
* approvals
|
||
|
||
# CORE GOAL
|
||
|
||
Artists upload shot versions.
|
||
|
||
Clients and supervisors can:
|
||
|
||
* watch versions
|
||
* pause on frames
|
||
* leave timestamped comments
|
||
* draw annotations directly on frames
|
||
* approve/reject versions
|
||
|
||
Everything should feel frictionless.
|
||
|
||
# DATA MODEL
|
||
|
||
## CLIENTS
|
||
|
||
* company
|
||
* contact person
|
||
* email
|
||
|
||
## PROJECTS
|
||
|
||
* project name
|
||
* code
|
||
* linked client
|
||
* status
|
||
* due dates
|
||
|
||
## SHOTS
|
||
|
||
* shot code
|
||
* sequence
|
||
* description
|
||
* status
|
||
* assigned artist
|
||
* priority
|
||
|
||
Statuses:
|
||
|
||
* Waiting
|
||
* In Progress
|
||
* Internal Review
|
||
* Client Review
|
||
* Revisions
|
||
* Approved
|
||
* Final
|
||
|
||
## VERSIONS
|
||
|
||
Each shot can have many versions.
|
||
|
||
Fields:
|
||
|
||
* version number
|
||
* upload file
|
||
* thumbnail
|
||
* artist
|
||
* upload date
|
||
* notes
|
||
* fps
|
||
* duration
|
||
* frame count
|
||
* approval status
|
||
|
||
Approval statuses:
|
||
|
||
* Pending Review
|
||
* Approved
|
||
* Rejected
|
||
* Needs Changes
|
||
|
||
Support:
|
||
|
||
* mp4
|
||
* mov
|
||
* jpg sequences
|
||
* png sequences
|
||
|
||
# VIDEO REVIEW PLAYER
|
||
|
||
Build a custom review player optimized for frame review.
|
||
|
||
Features:
|
||
|
||
* frame stepping
|
||
* JKL playback
|
||
* timeline scrubbing
|
||
* timestamp display
|
||
* frame number display
|
||
* fullscreen
|
||
* playback speed controls
|
||
|
||
VERY IMPORTANT:
|
||
Comments must attach to:
|
||
|
||
* exact frame number
|
||
* timestamp
|
||
* version
|
||
|
||
Example:
|
||
Frame 115:
|
||
"Tracking slips here."
|
||
|
||
# FRAME-ACCURATE COMMENTS
|
||
|
||
Users can:
|
||
|
||
* pause playback
|
||
* click "Add Comment"
|
||
* comment attaches to exact frame
|
||
|
||
Comment structure:
|
||
|
||
* author
|
||
* frame number
|
||
* timestamp
|
||
* text
|
||
* resolved/unresolved
|
||
* replies
|
||
* created date
|
||
|
||
Allow threaded replies.
|
||
|
||
# DRAW-OVER ANNOTATIONS
|
||
|
||
Users should be able to:
|
||
|
||
* draw directly on paused frame
|
||
* arrows
|
||
* circles
|
||
* freehand lines
|
||
* rectangles
|
||
|
||
Annotations must save:
|
||
|
||
* frame number
|
||
* vector drawing data
|
||
* author
|
||
* linked comment
|
||
|
||
Allow:
|
||
|
||
* toggling annotations
|
||
* multiple annotations per frame
|
||
|
||
Use HTML canvas or Konva.js.
|
||
|
||
# REVIEW WORKFLOW
|
||
|
||
Implement a lightweight approval pipeline.
|
||
|
||
Review statuses:
|
||
|
||
* Pending
|
||
* Internal Approved
|
||
* Client Approved
|
||
* Needs Changes
|
||
* Final Approved
|
||
|
||
Clients should be able to:
|
||
|
||
* approve version
|
||
* reject version
|
||
* request revisions
|
||
|
||
Artists should:
|
||
|
||
* receive notifications
|
||
* upload new versions
|
||
* compare against previous versions
|
||
|
||
# SIDE-BY-SIDE VERSION COMPARISON
|
||
|
||
Allow:
|
||
|
||
* A/B version comparison
|
||
* wipe comparison slider
|
||
* previous version overlay
|
||
|
||
Useful for:
|
||
|
||
* comp revisions
|
||
* cleanup changes
|
||
* color tweaks
|
||
|
||
# NOTIFICATIONS
|
||
|
||
Add notification system.
|
||
|
||
Examples:
|
||
|
||
* New version uploaded
|
||
* New feedback added
|
||
* Shot approved
|
||
* Shot rejected
|
||
* Comment reply added
|
||
|
||
Support:
|
||
|
||
* in-app notifications
|
||
* email notifications
|
||
* Slack integration
|
||
|
||
# SLACK INTEGRATION
|
||
|
||
Integrate with Slack webhooks.
|
||
|
||
Examples:
|
||
|
||
```plaintext id="6j6t2g"
|
||
SH020 v004 approved by client
|
||
```
|
||
|
||
```plaintext id="p5v8rz"
|
||
New feedback added on SH035 frame 122
|
||
```
|
||
|
||
Allow configurable channels per project.
|
||
|
||
# FILE STORAGE
|
||
|
||
Use S3-compatible architecture.
|
||
|
||
Support:
|
||
|
||
* local storage
|
||
* Backblaze B2
|
||
* AWS S3
|
||
* Cloudflare R2
|
||
* self-hosted MinIO
|
||
|
||
Generate:
|
||
|
||
* thumbnails
|
||
* proxies
|
||
* poster frames
|
||
|
||
# SECURITY
|
||
|
||
Implement:
|
||
|
||
* signed upload URLs
|
||
* secure client review links
|
||
* expiring review sessions
|
||
* role permissions
|
||
|
||
Roles:
|
||
|
||
* Admin
|
||
* Producer
|
||
* Supervisor
|
||
* Artist
|
||
* Client
|
||
|
||
Clients should ONLY see:
|
||
|
||
* assigned projects
|
||
* approved review material
|
||
|
||
# CLIENT REVIEW PORTAL
|
||
|
||
Clients should have a very simple portal:
|
||
|
||
* open project
|
||
* review shots
|
||
* leave notes
|
||
* approve/reject
|
||
|
||
No production complexity exposed.
|
||
|
||
Keep it clean and minimal.
|
||
|
||
# DASHBOARD
|
||
|
||
Internal dashboard should show:
|
||
|
||
* shots awaiting review
|
||
* shots needing revisions
|
||
* approved shots
|
||
* overdue shots
|
||
* recent comments
|
||
* artist assignments
|
||
|
||
# UI REQUIREMENTS
|
||
|
||
The UI should feel:
|
||
|
||
* modern
|
||
* film-industry oriented
|
||
* dark themed
|
||
* fast
|
||
* minimal clutter
|
||
|
||
Inspiration:
|
||
|
||
* Frame.io
|
||
* SyncSketch
|
||
* ShotGrid Review
|
||
* Vimeo Review
|
||
|
||
But simpler and cleaner.
|
||
|
||
# IMPORTANT PERFORMANCE REQUIREMENTS
|
||
|
||
Optimize for:
|
||
|
||
* fast scrubbing
|
||
* lightweight annotation rendering
|
||
* low-latency comments
|
||
* proxy playback
|
||
|
||
Avoid bloated enterprise complexity.
|
||
|
||
# BONUS FEATURES
|
||
|
||
If possible implement:
|
||
|
||
* LUT viewing
|
||
* EXR sequence support
|
||
* burn-ins
|
||
* watermarking
|
||
* presentation playlists
|
||
* review sessions
|
||
* audio comments
|
||
* webhook API
|
||
* task linking
|
||
* AI feedback summaries
|
||
|
||
# ARCHITECTURE
|
||
|
||
Design the system so it can later integrate into a larger VFX pipeline platform including:
|
||
|
||
* bidding
|
||
* production tracking
|
||
* artist scheduling
|
||
* invoicing
|
||
* asset management
|
||
* render tracking
|
||
|
||
Avoid hardcoding review-specific assumptions.
|
||
|
||
# MVP PRIORITY
|
||
|
||
Prioritize these features FIRST:
|
||
|
||
1. Upload video
|
||
2. Scrub by frame
|
||
3. Add timestamp comments
|
||
4. Draw annotations
|
||
5. Approve/reject versions
|
||
6. View feedback history
|
||
|
||
Those six features are the core product.
|
||
|
||
Everything else is secondary.
|
||
|
||
The app should feel like:
|
||
“A modern lightweight review system that actually respects artists’ time.”
|