Video to UI

Transform any screen recording into production-ready HTML and CSS code.

Overview

Video to UI is Replay's core feature. Upload a screen recording of any website, app, or UI design, and our AI will analyze every frame to generate clean, semantic React code with Tailwind CSS styling.

AI Architecture: The Sandwich Model

Replay uses a sophisticated multi-model pipeline we call the "Sandwich Architecture":

🔍 Phase 1: Surveyor (Gemini 3 Flash)

"Measure twice, cut once" — Extracts precise layout measurements, grid systems, spacing patterns, and color palettes from video frames using code execution for pixel-accurate data.

⚡ Phase 2: Generator (Gemini 3 Pro)

Main code generation — Receives Surveyor measurements and generates production-ready React + Tailwind code with working navigation and interactions.

✅ Phase 3: QA Tester (Gemini 3 Flash)

Visual verification — Compares generated UI against original frames, calculates SSIM similarity, and provides auto-fix suggestions for pixel-perfect output.

What the AI Detects

Layout Structure

Headers & navigation
Sidebars
Grid layouts
Card components
Footers

Visual Design

Colors & gradients
Typography
Spacing
Border radius
Shadows

Content

Text & headlines
Images (as placeholders)
Icons
Buttons
Forms

Interactions

Page navigation
Hover states
Modal dialogs
Tab switching
Scroll content

Supported Formats

.mp4

.webm

.mov

.avi

Maximum file size: 100MB • Recommended length: 10-60 seconds

Best Practices

Do's

Record at high resolution (1080p+)
Show the complete UI with scrolling
Click through all navigation items you want generated
Hover over interactive elements to capture states
Use consistent, slow movements
Keep videos focused on one flow at a time

Don'ts

Record videos longer than 2 minutes
Use low resolution or blurry recordings
Switch between many unrelated screens
Include cursor animations or effects
Record with visible browser dev tools

Generation Modes

Before generating, choose between two modes using the toggle in the sidebar:

Reconstruct

Default

Exact layout & structure match. The AI faithfully reproduces the video's layout, spacing, colors, and content placement. Best for pixel-accurate recreation of existing designs, dashboards, and app UIs.

Reimagine

Creative layout, same content. The AI preserves all text, data, and section purposes but invents a completely new visual design with advanced animations (GSAP ScrollTrigger, split-text effects, parallax, glassmorphism), custom scrollbars, horizontal carousels, bento grids, and cinematic layouts. Powered by 18+ animation patterns from reactbits.dev.

Tip: You can switch modes at any time — both in the New Project view and inside existing projects. The toggle appears above the Generate button in the sidebar.

Video Trimming

Use the timeline slider to trim your video before generation. This helps you:

Focus on specific sections of a longer recording
Remove intro/outro portions
Select only the screens you want to generate

Tip: For multi-page apps, you can generate different sections separately and then combine them using Edit with AI.

Generated Output

The AI generates a complete React component with Tailwind CSS:

// Next.js App Router Page
// Generated by Replay from video analysis

export default function HomePage() {
  const [currentPage, setCurrentPage] = useState('home');
  
  return (
    <div className="min-h-screen bg-zinc-900">
      {/* Navigation */}
      <nav className="flex items-center gap-4 p-4">
        <button onClick={() => setCurrentPage('home')}>Home</button>
        <button onClick={() => setCurrentPage('about')}>About</button>
      </nav>
      
      {/* Page: Home */}
      {currentPage === 'home' && (
        <main className="p-8">...</main>
      )}
      
      {/* Page: About */}
      {currentPage === 'about' && (
        <main className="p-8">...</main>
      )}
    </div>
  );
}

Uses React useState for page switching and Tailwind CSS for styling. Ready to use in Next.js or any React project.

Credit Cost

Video to UI Generation~150 credits