Hero

• Hero turns a product website into a launch-style marketing video. It reads the site, picks the important story beats, builds a storyboard, and guides the final motion and render.

Comment

Dev Post — Phase 1 Live Edit Loop (Real System, Real Routes)

This is not a fake “chat-over-screenshots” demo.
The URL input and the Phase 1 edit loop are wired to real route handlers and current code paths in the repository.

🧠 What Phase 1 Actually Is

Phase 1 is the current editable slice of the system — a tightly scoped environment focused on making the opener live-editable, stable, and fast to iterate on.

The goal is not full runtime flexibility yet.
The goal is a reliable, validated live-edit loop.

🔁 How the Phase 1 Live Edit Loop Works

  1. Studio holds a self-contained TSX module for the current opener
  2. A note + current code is sent to POST /api/phase1-edit
  3. Gemini returns revised TSX code
  4. The code is validated against sandbox constraints
  5. POST /api/phase1-preview compiles it into an iframe-ready document
  6. A hidden validator iframe runs the preview
  7. The visible preview updates only if validation passes

🔒 Current Sandbox Constraints

  • Self-contained TSX only
  • Inline styles only
  • No Tailwind className usage
  • No relative imports
  • No network, filesystem, or server APIs

This is intentionally narrow — optimizing for a stable live-edit loop, not arbitrary execution.

✅ Implemented Now

  • Turborepo monorepo foundation
  • Frontend Studio surface
  • URL-triggered blueprint runs
  • Website crawl, render, screenshot, and extraction groundwork
  • Storyboard-prep artifact generation
  • Storyboard-ready Studio handoff
  • Phase 1 live preview compilation
  • Note-driven code revision loop
  • Validator-gated preview replacement

🧪 Experimental / Partial

  • Storyboard shaping (extraction → motion bridge)
  • Gemini-assisted site understanding
  • Early storyboard-prep flows
  • Motion experiments across multiple approaches

🚧 Planned Next

  • Stronger site-understanding normalization
  • Timestamped storyboard generation
  • DOM-first motion system
  • Editable loops beyond Phase 1
  • React Three Fiber depth-aware rendering
  • Final render orchestration
  • Voice-over, music, and SFX pipeline
  • Shared contracts + worker runtime
  • Cleaner service boundaries

🏗 Repository Architecture

Monorepo (Turborepo)

frontend/web

Next.js 16 app handling:

  • Studio experience
  • Route handlers
  • Preview + Phase 1 edit loop
  • Motion experiments

philipp_part_blueprint

Website-intelligence workspace:

  • Crawling + rendering
  • Screenshot capture
  • Structure/design extraction
  • Storyboard-prep artifacts

docs/

Source of truth for:

  • Vision
  • Architecture
  • API direction
  • Roadmap

Some systems described in docs are planned, not yet implemented.

⚙️ Tech Stack

Core

  • Next.js 16
  • React 19
  • TypeScript
  • Turborepo

Frontend + Motion

  • Tailwind CSS v4
  • Framer Motion
  • GSAP
  • Three.js
  • React Three Fiber
  • Drei
  • Remotion

🎯 Takeaway

This system already runs real code, real validation, and real previews.

Phase 1 is a working, constrained live-edit system — built for speed, safety, and iteration — and it’s the foundation for everything that follows.

Built With

  • drei
  • framer-motion
  • gsap
  • next.js-16
  • react-19
  • react-three-fiber
  • tailwind-css-v4
  • three.js
  • turborepo
  • typescript
Share this project:

Updates