Back to projects

Project case study

Invisibility Cloak

Hue-based chroma key that swaps a coloured cloth for the background, processed pixel by pixel on Canvas in the browser.

My roleDeveloper
Technologies used
  • Canvas API
  • React
  • TypeScript
  • Vite
  • Fastify
  • Zod
Open demoView repository (opens in a new tab)
Invisibility cloak studio with the video area and the arcane panel, before the background is captured.
capa-da-invisibilidade.vercel.app / Home page

Problem

Separating a cloth from the rest of the image needs a steady mask on every frame.

Processing pixel by pixel in the browser is heavy without a frame cap.

Solution

Architecture at a glance
  • Frames from the user's camera, processed in the browser.
Technical decisions
  1. 640×480 capture and the background recorded after 3 s.
  2. HSL hue mask with a soft edge and alpha blending, through getImageData and putImageData.
  3. FPS cap and sampling inside the frame loop itself.

Result

A real-time per-pixel processing study, with no computer vision dependency.

  • Image processing on Canvas
  • Frame loop
  • HSL colour

Learnings and limitations

  • The published interface lacks fine calibration controls; thresholds are fixed.
  • The backend is not published.
  • The colour helper is a keyword heuristic.
  • There are no frontend tests.

More about the project

Full case details, collapsed for optional reading.

Full description

Invisibility cloak effect in the browser: the pixels of a chosen-colour cloth are swapped for the background captured beforehand.

The background is captured after a 3 s delay; then each frame goes through an HSL hue mask with a soft edge and alpha blending, pixel by pixel on Canvas 2D.

An eyedropper picks the cloth colour, and a keyword-based helper suggests complementary colours for the room.

The idea is a classic exercise; this version is TypeScript with no vision library, and it started from a template before growing over 19 commits.

React, Vite and TypeScript with Canvas 2D; a Fastify backend with Zod exists in the repository but is not published.

Features and highlights
  • Background capture with a countdown.
  • Mirrored eyedropper.
  • Colour suggestions by keyword.
  • Scene quality score.
  • Keyboard shortcuts.
  • Processes the mask pixel by pixel on Canvas 2D, with no vision library.
  • Softens the mask edge with alpha blending.
  • Caps the FPS to keep the loop steady.
Technical architecture and data

Technical architecture

How the case was designed as a product

Hue-based chroma key that swaps a coloured cloth for the background, processed pixel by pixel on Canvas in the browser.

Canvas APIWeb platformReactFrameworkTypeScriptLanguageViteFrameworkFastifyFrameworkZodFramework

Data used

  • Frames from the user's camera, processed in the browser.

Core components

  • Background capture with a countdown.
  • Mirrored eyedropper.
  • Colour suggestions by keyword.
  • Scene quality score.
  • Keyboard shortcuts.

Technical decisions

  • Image processing on Canvas
  • Frame loop
  • HSL colour

Trade-offs

  • The published interface lacks fine calibration controls; thresholds are fixed.
  • The backend is not published.
  • The colour helper is a keyword heuristic.
  • There are no frontend tests.
How to run
  1. npm install && npm run dev (port 3000)
  2. Optional backend: cd backend && npm install && cp .env.example .env && npm run dev
  3. npm run test:backend
Additional media
Project demonstration video.
Credits

Developed by Matheus Siqueira - https://www.matheusdev.tech

Next projectAd Performance Intelligence

Next.js BI dashboard comparing Google Ads and Meta Ads on simulated data: KPIs, funnel and ROAS.

View full case