Back to all work
— Project 11
Web · Computer Vision

MCI Renovation

Renovation site + live floor visualizer

A marketing site and live floor visualizer for a Brooklyn renovation and hardwood-flooring contractor. Homeowners can point a phone at their floor and preview stain colors and wood textures in real time, with the whole demo running in the browser over WebRTC and TensorFlow.js so there is no image-upload step.

Role
Solo Engineer · Design + Build
Period
2026
Status
Production
Next.js 14TypeScriptTailwind v4TensorFlow.jsWebRTCThree.js
— Chapter 01
System shape

How the system fits together.

Click any block to read about it
Fig. 01 — MCI Renovation architecture
— Chapter 02
Decisions and outcomes

The calls that shaped it.

  1. 01

    Floor segmentation runs in the browser via TensorFlow.js DeepLab (ADE20K weights), filtering for floor / flooring / rug / carpet / path / step classes so the overlay tracks the actual floor surface rather than an HSL color tap. The mask is then run through typed-array morphology, blur, bilinear scaling, and temporal blending before each frame is composited back to the visible video.

  2. 02

    Two render modes share the same pipeline: a fast HSL hue/saturation swap with multiply blend that preserves luminosity (so lighting and grain still read), and a tileable hardwood-texture overlay that keeps the original floor's luminance. Both run at ~30 fps on a phone in the browser with no server round-trip.

  3. 03

    Real-photo texture pipeline behind the texture mode: floor reference images are cropped to 512px tiles, recolorized per stain by separating luminance from chroma so grain and knots survive the recolor, and cached by image+stain key — so a homeowner can swap stains live without re-loading anything.

  4. 04

    Built so the contractor can maintain it: the six pages, copy, image set, and stain palette all live as editable data instead of being buried in components, with a Three.js hero whose hardwood plank uses canvas-generated grain and roughness as a real material rather than a flat image.

— Aside
The interesting work isn't the stack. It's the boundaries.
— Chapter 03
How it runs

What it runs on.

  • 01
    Next.js 14 App Router + TypeScript + Tailwind v4
  • 02
    WebRTC getUserMedia for camera capture; canvas-based real-time compositor
  • 03
    TensorFlow.js DeepLab (ADE20K) for floor semantic segmentation
  • 04
    HSL multiply-blend recolor path + tileable hardwood-texture overlay path
  • 05
    Real-photo texture pipeline: 512px tile crop, luminance-preserving recolor, per-image+stain cache
  • 06
    Three.js hero with canvas-generated grain + roughness textures on a real material
  • 07
    shadcn/ui + Framer Motion + React Hook Form + Zod