Skip to content

kazim-45/openframe

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OpenFrame

Professional film pre-production suite. Free. Open source. Runs in your browser.

Live Demo License Built With No Backend Part of OpenSlate


OpenFrame is a complete pre-production tool for filmmakers. Storyboard your shots, build your shot list, manage characters and locations, plan your schedule, and collect visual references — all in one place, all for free.

Part of the OpenSlate suite. Write your script in OpenWrite — plan your shoot here.

→ Open the app


Features

🎬 Storyboard

Panel-based storyboard editor organized by scene. Each panel supports four visual modes:

Templates — 10 pre-built SVG shot compositions: ECU · CU · MCU · MS · WS · EWS · OTS · POV · Aerial · 2-Shot

Draw — freehand canvas with pencil, eraser, shapes, color picker, and stroke width. Touch-screen supported.

Upload — attach any reference photo or production still to the panel.

AI Generate — describe the shot in plain language, get a cinematic image via Pollinations.ai. Free. No API key required.

Each panel stores: shot type, camera movement, lens, duration, action, dialogue, and notes.


📋 Shot List

Auto-generated from your storyboard. Every shot across every scene in one table — shot type, camera movement, lens, duration, action, dialogue. Total runtime calculated automatically. Print to PDF in one click.


👥 Characters

Character profiles — name, actor, description, notes. Quick-reference cards for the full cast.


📍 Locations

Location records with address, contact, phone, permit status, and scouting notes. Permit-required locations flagged with a visible badge.


🖼 Mood Board

Upload reference images in a masonry grid. Add captions. Used for visual tone, color palette, costume, lighting — anything that defines the look of your film.


📅 Call Sheet

Full production scheduling — shoot dates with call times, crew list with individual call times, and production notes.


📤 Export

Export Format
Storyboard PDF — panels in a 3-column grid with shot info
Shot List PDF — full table with all shots and duration
Call Sheet PDF — schedule, crew, and production notes
Project Backup JSON — full project data, restorable

Mobile

Fully functional on phones and tablets:

  • Bottom element navigation at thumb level
  • Sidebars become full-screen slide-over drawers
  • All modals slide up from the bottom
  • Touch-aware drawing canvas
  • Virtual keyboard handling on iOS and Android
  • Swipe gestures to open/close panels

Tech Stack

Layer Choice
Framework Next.js 14 (App Router)
Styling Tailwind CSS
Storage localStorage — no backend required
AI Images Pollinations.ai — free, no API key
Hosting Vercel
CI/CD Push to main → live in ~20 seconds

Getting Started

Use it instantly:

https://openframev1.vercel.app

Run locally:

git clone git@github.com:kazim-45/openframe.git
cd openframe
npm install
npm run dev

Open http://localhost:3000.

Deploy your own:

Fork this repo → connect to Vercel → done.
Vercel detects Next.js automatically. No configuration required.

Project Structure

openframe/
├── app/
│   ├── components/
│   │   ├── DrawingCanvas.jsx     # Freehand canvas with tools
│   │   ├── PanelEditor.jsx       # Shot editor modal — all 4 visual modes
│   │   └── ShotTemplates.jsx     # 10 SVG shot compositions
│   ├── project/[id]/
│   │   └── page.jsx              # Full project view — all 6 tabs + exports
│   ├── page.jsx                  # Dashboard — project list
│   ├── layout.jsx
│   └── globals.css
├── tailwind.config.js
├── next.config.mjs
└── package.json

OpenSlate Suite

Tool Description Status
OpenWrite Screenplay editor ✅ Live
OpenFrame Pre-production suite ✅ Live
OpenView Viewfinder and shot planning 🔜 Coming

The vision: write your script in OpenWrite, plan your shoot in OpenFrame, frame your shots in OpenView — connected, free, built for filmmakers who can't afford the existing tools.


Roadmap

  • Import script from OpenWrite — scenes auto-populate storyboard
  • Drag-and-drop panel reordering
  • Google authentication via NextAuth.js
  • Cloud saves — Supabase per-user storage
  • Real-time collaboration
  • Custom domain — openframe.app

Contributing

Pull requests are open. If you find a bug — broken panel mode, export issue, layout problem on a specific device — open an issue with steps to reproduce.


License

MIT — use it, fork it, ship it. Credit appreciated, not required.


Author

Built by Kazim — 18-year-old developer and filmmaker from Lahore, Pakistan.

GitHub · OpenWrite · OpenFrame


Plan the frame. Make the shot.

About

Pre-production suite for filmmakers. Storyboard, shot list, characters, locations, mood board, and call sheet. Four visual modes per panel including AI image generation. PDF and JSON exports. Mobile ready. Part of the OpenSlate suite.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors