Spiller

Inspiration

Pre-visualization is powerful, but it can be expensive and difficult to access. We wanted to create a faster way for filmmakers to turn an idea on the page into something the entire production team could see and discuss.

What it does

Spiller transforms screenplay text into an interactive 3D scene. Users paste a scene, and Gemini identifies the setting, characters, props, lighting, spatial relationships, and visual details. Spiller then renders that plan as a browser-based Three.js blockout that users can orbit, zoom, and inspect from different camera angles.

How we built it

We built Spiller with Next.js, React, TypeScript, Google Gemini, Google’s Agent Development Kit, and Three.js. The Gemini agent returns a structured scene plan, which is validated with Zod before being rendered as procedural 3D geometry. The app also includes a local fallback generator so users can still explore scenes when AI generation is unavailable.

Challenges we ran into

The main challenge was translating screenplay language into reliable spatial data. Screenplays describe mood, movement, scale, and relationships in natural language, while a 3D renderer needs precise values and bounded structures. We addressed this by constraining the AI output, validating every scene plan, limiting scene complexity, and creating reusable procedural representations for common objects.

Accomplishments that we're proud of

We are proud that Spiller turns a screenplay into an explorable scene in under a minute. We also built a complete workflow from text input to validated AI output to interactive 3D rendering, while keeping the experience accessible in a browser and simple enough to run locally.

What we learned

We learned that AI-generated output becomes much more useful when it is treated as structured data rather than free-form text. We also learned how important validation, fallback behavior, and clear visual communication are when building creative tools with generative AI.

What's next for Spiller

Next, we want to support multiple scenes, richer environments, more detailed characters and props, saved projects, collaborative sharing, and additional camera-planning tools. We also want to add stronger visual references so filmmakers can move from rough blockouts toward more expressive pre-visualization.

Built With

• agent
• builder
• cloud
• css
• development
• gemini
• kit
• next.js
• react
• three.js
• typescript
• zod