ScribeGlass — Spatial Storyboard & Scriptwriting HUD

💡 Inspiration

With the emergence of smart glasses (like Ray-Ban Meta) and spatial video formats, the traditional scriptwriting pipeline is still stuck in flat, 2D text files. Writers struggle to visualize how physical camera placement, focal zoom lengths, and character movement align with their dialogue. We built ScribeGlass to act as a "smart viewfinder"—bridging raw script text drafts with interactive spatial storyboarding.

🧠 What it Does

ScribeGlass is a unified workspace for directors and content creators:

1. Creator Dictation Dialogue: Input raw script ideas. ScribeGlass automatically parses the text into structured screenplay cards (slugging location, dialogue, action, and audio design).
2. AI Director's Critique: Analyzes narrative pacing velocity, classifies the rhythm (e.g. High Tension / Action, Melancholic), and prints custom suggested shot modifications.
3. HUD Viewfinder Console: Simulates focal lens zooms (24mm, 50mm, 85mm), aspect-ratio masks (16:9, 2.39:1, 9:16), and tap-to-focus reticles. You can click "SNAP VIEW TO SHOT" to capture video frames directly to storyboard cards!
4. Cinematic Screenplay: Formats sequences into standard script page layouts, optimized with print stylesheets to export clean screenplay PDF documents.

🛠️ How We Built It

• Architecture: Responsive Single Page Application built on React 19 and compiled via Vite.
• Styling: Handcrafted cyber dark-slate theme styled with Vanilla CSS and glassmorphism backdrops.
• Canvas Engine: HTML5 2D Canvas context renders active viewfinder reticles and storyboard composition guidelines (Rule of Thirds, Diagonal lines).
• Asset pipeline: Video preview loops are served locally via the project static bundle to resolve CORS blocks and run offline.

🚧 Challenges We Faced

Standard third-party video CDNs enforce strict CORS limitations, which originally blocked the canvas snapshot engine from extracting video frames. We resolved this by downloading stable developer video loops directly into the application's local public/ directory, allowing zero-latency loading and CORS-free snapshot canvas copies.

🎉 Accomplishments We're Proud Of

• A lightweight React workspace compiling in under 3 seconds.
• Dynamic tap-to-focus crosshairs adjusting focus targets in real-time.
• A production-ready print stylesheet that isolates screenplays, hiding all dashboard panels for clean printing.

📚 What We Learned

We mastered advanced HTML5 Canvas bitmap extractions and how to safely handle browser media source streams under strict browser sandbox parameters.

🚀 What's Next for ScribeGlass

Integrating actual hardware APIs from smart glasses (such as Meta's camera streams) to draw heads-up overlays inside the physical lenses of directors on set.

Built With

• css
• github
• html
• javascript
• react
• vercel
• vite