Scripta

What Inspired Me

The idea for Scripta came from watching how difficult and inefficient traditional table reads can be, especially when people aren’t in the same place. Coordinating schedules, time zones, and availability often turns what should be a creative, low-pressure experience into a logistical nightmare.

We noticed that many writers resort to Zoom table reads or shared voice notes, which break immersion and make it hard to hear the script as a cohesive whole. We wanted to build something that preserved the magic of a table read while removing the need for everyone to be present at the same time. The question became:

What if a table read worked like async collaboration tools, but still felt cinematic and creative?

That idea became Scripta.

What We Learned

This project taught us a lot across both technical and product-focused areas.

On the technical side, we learned how to:

Build immersive 3D scenes on the web using Three.js and React Three Fiber
Coordinate frontend state with backend services like authentication, storage, and database records
Handle audio recording, storage, and sequencing in a way that feels seamless to users
Design a system that parses structured text (screenplay format) into meaningful data

On the product side, I learned that:

Immersion matters; small details like sound effects and visuals significantly impact user engagement
Async collaboration requires clear progress tracking to avoid confusion
Simplicity beats feature overload, especially for creative tools

How We Built the Project

We built Scripta as a modern web application with a strong focus on user experience.

The core flow looks like this:

Script Input
Writers upload or type their screenplay. The app parses the text to extract characters and dialogue lines.
Actor Assignment
Each character is assigned to a real person via email invites, creating a clear mapping between roles and users.
Remote Recording
Actors record their dialogue from their own devices. Each recording is stored individually.
Audio Stitching
The system orders and combines recordings into a single audio track that matches the script.
Dashboard Management
Writers track progress, manage actors, and generate the final table read audio.

Technically, the project is built with:

React + TypeScript for the frontend
Vite for fast development and builds
Three.js / React Three Fiber / Drei for the 3D typewriter scene
Tailwind CSS + shadcn/ui for styling and UI consistency
Supabase for authentication, database, and audio storage

At a high level, the system can be thought of as:

[ \text{Script} \xrightarrow{\text{Parsing}} \text{Roles + Lines} \xrightarrow{\text{Recording}} \text{Audio Clips} \xrightarrow{\text{Stitching}} \text{Final Table Read} ]

Challenges I Faced

One of the biggest challenges was balancing realism with performance. Creating a cinematic 3D typewriter scene while keeping load times and responsiveness acceptable required careful optimization.

Another major challenge was audio handling:

Ensuring recordings were consistent across different devices
Managing asynchronous uploads
Stitching audio clips in the correct order without gaps or overlaps

Script parsing was also tricky. Screenplays aren’t always perfectly formatted, so we had to design logic that was flexible enough to handle real-world inconsistencies without breaking the workflow.

Finally, designing for async collaboration forced us to think deeply about edge cases:

What happens if an actor drops out?
How do you show progress clearly?
How do you keep writers in control without overwhelming them?

Closing Thoughts

Scripta pushed us to think beyond just “building a working app” and focus on experience, flow, and creativity. It combines technical depth with a strong product vision, and it reinforced the idea that the best tools don’t just solve problems but also feel good to use.

This project helped us grow as both developers and designers, and it’s something we are genuinely excited to keep improving.