Kintsugi Network

What inspired usThe Kintsugi Network is an interactive art installation inspired by the Japanese philosophy of Kintsugi—the practice of repairing broken pottery with gold. Instead of hiding fractures, Kintsugi treats them as a beautiful, essential part of an object's history. We wanted to apply this metaphor to human vulnerability by taking personal reflections—a visitor's biggest regret, proudest moment, and half-finished dream—and transforming them into a collective, living mosaic of shared experiences.How we built itThe journey of a story begins when visitors submit their reflections via a Google Form, which automatically populates a Google Spreadsheet. Our backend polls this spreadsheet every 30 seconds.When a new entry is detected, it passes through a safety filter powered by Claude Haiku to ensure the installation remains a safe space. From there, Claude Sonnet reasons through a structured 6-step prompt to emotionally analyze the text, pick a visual metaphor, choose a color palette, and directly generate a 512x512 abstract image of a ceramic shard. Simultaneously, Claude Haiku acts as a poet, comparing the new story against recent entries to find thematic echoes and generate short connection phrases (e.g., "two lives, one silence").Finally, our frontend—built on PixiJS—receives the data via WebSockets. It masks the generated image into a jagged, irregular polygon and drops it onto a continuously growing full-screen canvas, linking thematically related shards with glowing gold Bezier curves.Challenges we facedAI Latency vs. Real-Time Engagement: Claude's high-fidelity image generation takes a few seconds. To keep the installation feeling alive and responsive, we implemented a job queue (p-queue). When a submission is processing, the system immediately broadcasts a placeholder polygon colored based on the emotional tone of the text; once the final image is ready, the frontend seamlessly swaps the texture.Performance at Scale: Rendering 1000+ high-resolution shards with animations and glow filters at a steady 60fps is computationally heavy. We solved this using PixiJS v8 with viewport culling (only rendering what is currently on-screen) and Level of Detail (LOD) rendering, which drops the texture in favor of a flat colored polygon when a user zooms far out.Architectural Determinism: We needed the exact same mosaic shapes to reconstruct perfectly upon a server restart without storing massive coordinate arrays in our database. We achieved this by generating a deterministic hash (shape_seed) from the shard's UUID. Both the backend and frontend use a Linear Congruential Generator (LCG) algorithm to map out the jagged points. The core state transitions follow the mathematical formula $state = (1664525 \times state + 1013904223) \pmod{2^{32}}$ to ensure the exact same irregular polygon is carved out every time.What we learnedWe learned how to deeply integrate Large Language Models into a real-time, deterministic visual pipeline. By forcing the AI to "show its work" through a multi-step reasoning prompt before generating an image, we discovered how to bridge the gap between abstract emotional text and highly specific art direction. We also vastly improved our skills in WebGL performance optimization and asynchronous state recovery.

Built With

• anthropic
• api
• express.js
• node.js
• p-queue
• pixijs
• reasoned-image-generation.-data-source-&-ingestion:-google-forms-feeding-into-google-sheets
• sqlite
• typescript
• v8
• vite
• websockets
• zero-infrastructure-state-persistence.-ai-&-logic:-the-@anthropic-ai/sdk-powering-two-models:-claude-haiku-4-5-for-rapid-content-safety-screening-and-poetic-connection-analysis.-claude-sonnet-4-6-for-direct