LumaLens

Inspiration Landscape lighting installers face a frustrating sales problem: to show a client what their property could look like lit up, they have to haul equipment out, set up temporary rigs, spend hours on site — and still might not get the job. The client says "I need to think about it" and the installer walks away with nothing. We wanted to replace that entire physical demo process with something that takes 30 seconds and a Zillow link. What it does LumaLens turns a Zillow property listing into an interactive 3D lighting preview. Paste a listing URL, and LumaLens uses Browserbase to scrape the exterior photos, sends them to Claude Vision to extract the property's geometry — roofline shape, number of stories, facade materials, architectural features — and procedurally generates a 3D model of the house in Three.js. The installer can then toggle between lighting scenarios (Curb Appeal, Security, Dramatic, Minimal) and show the client exactly what their property will look like before a single fixture is installed. How we built it

Browserbase spins up a real browser session to scrape Zillow listing photos — necessary because Zillow blocks headless requests and relies on JavaScript rendering Claude Vision (claude-sonnet-4-6) receives up to 5 exterior photos and returns structured JSON describing the house geometry Three.js via @react-three/fiber procedurally builds a 3D model from that JSON, with SpotLight and PointLight fixtures positioned per lighting scenario Next.js app router handles the full stack — scrape and analyze API routes on the backend, React frontend with dynamic SSR-disabled Scene import

Challenges we ran into Zillow's frontend is heavily JavaScript-rendered and actively resists scraping — getting Browserbase to reliably extract photo URLs from the image gallery required multiple fallback selector strategies. Three.js also can't run server-side, which meant the Scene component had to be dynamically imported with ssr: false or the Next.js build would crash. Keeping the Claude Vision prompt strict enough to return clean structured JSON — with no preamble — took several iterations. Accomplishments that we're proud of Getting Claude Vision to reliably interpret architectural geometry from real estate photos and produce structured output that maps directly to a 3D scene was the core technical bet of this project, and it works. The lighting toggle is real Three.js physics — not a filter or overlay — so the shadows and highlights respond correctly to the scene geometry. What we learned Scoping ruthlessly is the only way to ship at a hackathon. We considered full photogrammetry and NeRF-based reconstruction early on and ruled both out — the Claude Vision + procedural geometry approach gets 80% of the visual fidelity in 20% of the build time, and for a sales demo tool that's exactly the right tradeoff. We also learned that Browserbase is the correct tool any time you're dealing with a JavaScript-heavy site that blocks conventional scrapers. What's next for LumaLens Voice control via Deepgram so clients can say "make the path lights warmer" and the scene updates in real time. A Pika MCP integration to export a cinematic flythrough video of the lit property as a leave-behind for the client. Support for searching by address rather than requiring a Zillow URL. And longer term, actual photogrammetry from contractor-supplied site photos for higher-fidelity models.

Built With

• anthropic-claude
• browserbase
• next.js