https://changshenghsun.com/tags/real-time-collaboration/Real-Time CollaborationHugoBlox Kit (https://hugoblox.com)en-usSat, 20 Jun 2026 00:00:00 +0000https://changshenghsun.com/media/icon_hu_d41247041d33f7ba.pnghttps://changshenghsun.com/tags/real-time-collaboration/https://changshenghsun.com/projects/gridstage/Sat, 20 Jun 2026 00:00:00 +0000https://changshenghsun.com/projects/gridstage/<p><strong>2026 — in active development</strong></p> <h2 id="why-i-built-this">Why I built this</h2> <p>As a dancer, formations were always the part nobody wanted to handle. How do you place everyone so the stage actually looks right? Will two people run into each other halfway through a transition? Those questions bothered me every time we put a piece together. I went looking for an open-source tool and there was none — and I was not about to pay a subscription for the commercial ones. So I built <strong>GridStage</strong>.</p> <h2 id="what-it-is">What it is</h2> <p>A top-down 2D stage where you place performers, add formations along a timeline synced to the music, and preview the walk-in transitions in 2D or 3D. It exports walk-chart PDFs (one page per dancer), videos, and GIFs. Several people can edit the same piece at once — live cursors, presence, and undo that only reverts your own changes — over a CRDT, a data structure where concurrent edits merge without a central referee. The part I care most about is the vision pipeline: pause a rehearsal video on a formation, click the four stage corners once, and the app detects the dancers, maps their foot positions onto the stage floor, and drops them into the editor as a normal editable formation. All of it runs in the browser.</p> <h2 id="where-it-stands">Where it stands</h2> <p>v0.8.6 · 130 commits · ~16k lines of strict-mode TypeScript in a pnpm monorepo · 24 unit-test files plus a Playwright end-to-end suite. Three ways to run it, none requiring an account: a Windows/macOS desktop app, an installable PWA that works offline on a phone, and a Docker self-host stack.</p> <p>Measured, not claimed:</p> <ul> <li><strong>60 performers × 4 formations</strong> in a permanent end-to-end stress test — dragging stays accurate and playback holds ~57 fps (CI floor 20).</li> <li><strong>Video → formation capture</strong> runs entirely client-side (YOLOX-nano through onnxruntime-web, WebGPU with a wasm fallback): 6 of 7 dancers recovered from a real six-dancer rehearsal photo, ~1.8 s per frame on CPU alone. Zero server cost, and no one&rsquo;s rehearsal footage leaves their laptop.</li> </ul> <p>Against <strong>ArrangeUs</strong>, the category leader, and the other commercial formation apps I audited before starting, these are the things they do not do at all (checked July 2026; their feature lists do move):</p> <table> <thead> <tr> <th>Capability</th> <th>GridStage</th> <th>ArrangeUs &amp; other commercial apps</th> </tr> </thead> <tbody> <tr> <td>Real-time multi-user editing</td> <td>CRDT (Yjs) — live cursors, presence, per-user undo</td> <td>one editor at a time, files passed around</td> </tr> <tr> <td>Formations captured from a rehearsal video</td> <td>on-device detection + homography</td> <td>nothing on the market does this</td> </tr> <tr> <td>Rehearsal-vs-plan review</td> <td>per-dancer drift, C-position centering, left–right asymmetry</td> <td>—</td> </tr> <tr> <td>Transition collision warnings</td> <td>Hungarian matching + sweep-line crossing detection</td> <td>—</td> </tr> <tr> <td>3D preview</td> <td>camera presets + follow-a-performer</td> <td>limited</td> </tr> <tr> <td>Video / GIF export with music</td> <td>yes</td> <td>limited</td> </tr> <tr> <td>Price and licence</td> <td>free, MIT, self-hostable</td> <td>subscription, closed source</td> </tr> </tbody> </table> <p>The place I am clearly behind is distribution, not capability: ArrangeUs has 457k+ users and years of tutorials, GridStage has an install page.</p> <h2 id="whats-next">What&rsquo;s next</h2> <ul> <li><strong>Building a user community.</strong> The capability gap is closed; the distribution one is not. Demo videos and an in-app guide are already in progress, and the next step is getting the editor in front of real dance teams and cheer squads and running on their feedback — the work that decides whether GridStage stays a portfolio piece or becomes a tool people actually choreograph with.</li> <li><strong>Accounts and cloud sync.</strong> Today a piece lives on one machine and travels as a <code>.gridstage</code> file. This is the largest remaining gap against commercial tools, and the one architectural decision I still owe the project — self-host or a hosted backend.</li> <li><strong>Full rehearsal-vs-plan deviation report.</strong> The first cut compares one paused frame against the plan. Scanning a whole rehearsal into a per-formation error timeline is the version that closes the plan → rehearse → correct loop, and it is the hardest part for anyone to copy.</li> <li><strong>Stage lighting and cue sheets.</strong> Colored lights on the 2D stage and a 3D wash, cues on the timeline, exported as a printable cue sheet — the other half of what a stage manager actually needs.</li> <li><strong>Plugins and a community template library</strong>, so formation libraries can grow without me writing every one of them.</li> </ul>