VignetteLab
A high-performance, infinite canvas and collaborative whiteboard application designed for creatives, engineers, and product teams.
Project Gallery
Project Overview
VignetteLab is a high-performance, infinite canvas and collaborative whiteboard application providing a boundless spatial workspace. It delivers a fluid, native-app-like drawing experience with real-time multiplayer capabilities, wrapped in a premium UI with seamless Light and Dark modes. The platform leverages Conflict-Free Replicated Data Types (CRDTs) for zero-latency concurrent editing, and an advanced WebGL/Canvas rendering pipeline with algorithmic curve smoothing for a flawless, lag-free experience.
Tech Stack
Key Features
Implemented mathematical CRDTs (Yjs) for conflict-free real-time multiplayer collaboration.
Built an advanced off-screen culling rendering pipeline to optimize an unbounded canvas with thousands of nodes.
Engineered algorithmic stroke smoothing for a flawless, pressure-sensitive drawing experience.
Created a unified pointer event layer to handle touch, stylus, and mouse inputs deterministically.
Resolved severe React lifecycle conflicts by strictly managing render loops and hook dependencies.
Case Study
Managing a high-performance canvas inside React caused infinite re-renders and hook dependency issues. Rendering an unbounded canvas necessitated complex off-screen culling to prevent memory leaks and browser crashes. Additionally, tracking nested state like CRDT payloads required rigorous typing to resolve implicit 'any' errors, while adapting to breaking changes in Next.js features.
Problem Space
Challenges
Implemented mathematical CRDTs (Yjs) for conflict-free real-time multiplayer collaboration.
Built an advanced off-screen culling rendering pipeline to optimize an unbounded canvas with thousands of nodes.
Engineered algorithmic stroke smoothing for a flawless, pressure-sensitive drawing experience.
Our Approach
Solutions
Created a unified pointer event layer to handle touch, stylus, and mouse inputs deterministically.
Resolved severe React lifecycle conflicts by strictly managing render loops and hook dependencies.
Explore More
Like what you see?
Check out more of my work or reach out to collaborate on something exciting.