Synchronicity

What's next for Synchronicity

Inspiration

Synchronicity is about the moment a private gesture becomes a shared artwork. We wanted a piece that rewards coordination between independent visitors instead of another solo AI image generator or generic particle field.

What it does

Each visitor's cursor, touch, click, and timing-only keyboard rhythm becomes a luminous trajectory. When independent traces intersect, the field produces a synchronized starburst and a pentatonic tone. Deterministic ghost performers keep the artwork alive when realtime is unavailable, while the interface clearly labels local echo mode.

How we built it

A React + TypeScript + Vite shell hosts an imperative PixiJS v8 renderer so animation stays outside React re-renders. Trace packets are normalized, clamped, sequence-checked, and rate-limited before they reach the renderer. The intended shared room is Supabase Realtime Broadcast for high-frequency traces and Presence for slow-changing participant metadata. The current public deployment gracefully runs in local echo mode when Supabase variables are not configured. Audio is synthesized with the Web Audio API after the visitor's gesture.

Challenges

The hardest parts were keeping the renderer bounded and responsive, designing deterministic ghosts and collision intensity, handling audio autoplay rules, and making fallback behavior feel intentional rather than like an error. We also added reduced-motion behavior, keyboard-accessible controls, PNG capture, and responsive intro layout.

Accomplishments

The result is a polished, no-account interactive sculpture with pointer, touch, click, keyboard rhythm, synthesized sound, capture export, deterministic fallback, automated tests, and a public Vercel deployment.

What we learned

Separating the visual loop from the React shell makes performance and failure recovery much easier. We also learned to reserve Presence for membership state and use Broadcast for cursor-frequency data.