Skip to content
Andrew Voirol
WorkLogAboutContact
HomeWorkLog

AboutContact

✦ Just one prompt away from figuring it all out.

Friday, August 14, 2026hair-raising-demogod-build

Compositing a Brooklyn loft keynote studio at 60fps

CanvasReactVideoUX

Turned a raw webcam feed into a polished tech keynote studio without touching an external broadcast tool. Wrote a 665-line HTML5 Canvas compositor in StudioRenderer.ts that layers background environments, presenter avatars, studio lighting, and foreground props in a single 60 FPS render loop. The camera face-swap mode uses a feathered elliptical clipping aperture centered on the nose landmark to blend real webcam video onto a custom procedural crewneck shirt. Added studio props right on the virtual desk: a Google DeepMind laptop with a gradient I/Ø badge and a yellow ribbed ceramic coffee mug. Integrated a built-in auto-scrolling teleprompter with adjustable speed and font size directly above the lens line so eye contact never drops. For recording, RecordingEngine.ts captures the 60 FPS canvas stream and mixes microphone audio locally using MediaRecorder, outputting ready-to-share WebM clips with zero cloud processing.

← Previous

The 320% hair slider that bounces when I talk

Next →

MUJŌ: first ink on digital washi


Andrew Voirol

Builder, hacker, shipper. Currently leaving localhost.

Navigate

WorkBuilder’s LogAboutContactRSS Feed

Connect

X / TwitterGitHubLinkedIn

© 2026 Andrew Voirol·Back to top ↑
✦Just one prompt away from figuring it all out.