Orbit - Semantic Canvas - AI Tinkerers - New York City Hackathon
AI Tinkerers - New York City
Hackathon Showcase

Orbit - Semantic Canvas

You I/ You Ex is the new UI/UX

2 members Watch Demo

Project Overview:

Orbit Semantic Canvas Orbit is a novel, spatial workspace that fundamentally reimagines information organization and human-AI interaction. Moving far beyond the conventional, linear chat window, Orbit allows users to simply drop unstructured data-like raw text, URL links, or quick notes-straight onto a 2D canvas. It then instantly transforms those inputs into an organized, dynamic visual workspace.

Shattering UI Conventions with Playful Interactions Our interface is the core innovation. We shattered traditional UI paradigms by introducing “Semantic Gravity.” Rather than forcing users into rigid folders or grids, Orbit computes the underlying meaning of your content in real-time. Cards physically drift and naturally cluster toward semantically similar elements on the screen. Furthermore, we introduced a playful “Magnet” tool: users can drag a physical widget onto the canvas, type a natural language constraint (e.g., “near a park” or “quiet”), and watch as matching cards are magnetically pulled toward it. These physics-based dynamics turn abstract data processing into a tangible, delightful experience.

Generative Experience Driven by Claude Instead of using AI merely to generate text responses, Orbit leverages Claude’s unique reasoning capabilities to drive the UI itself. When content is dropped on the canvas, Claude infers the context and generates rich, custom interactive UI cards on the fly. Depending on the input, Claude structures these components dynamically to include custom widgets like budget sliders, star ratings, vibe meters, or natural light indicators—creating a truly generative, bespoke interface for every piece of data.

Achieving Prototype Stability Despite the complex spatial physics and AI generations, the prototype achieves robust stability by adopting a completely stateless backend architecture. Rather than relying on rigid database locks or heavy, real-time WebSocket syncing, all persistent state and vector data are reliably housed in Redis, allowing the backend to utilize thin FastAPI wrappers to broker requests flawlessly.

Technologies, Frameworks, & Libraries:

This responsive, intelligence-driven UI is powered by a cohesive, modern stack:

Frontend Canvas: Next.js 14 (App Router) provides the foundation, paired with @xyflow/react to handle the robust, draggable 2D node-based canvas.

Physics & Animation: Framer Motion drives the fluid spatial animations, spring physics, and the “gravity” drifting effect.

Backend API: Python 3.11+ and FastAPI power the fast, asynchronous endpoint logic for the application.

AI Engine: Anthropic’s Claude 3.5 Sonnet acts as the reasoning engine to structure data into UI schemas via strictly formatted JSON outputs.

Redis(Database/State):

  1. Achieving Prototype Stability & Speed via Redis Despite complex physics and AI generations, the prototype achieves stability through a completely stateless backend.
  2. Redis used as the single source of truth for both application state and vector data
  3. Redis Stack JSON module stores generative state for each card
  4. Vector Similarity Search (VSS) module stores Float32 embeddings in the same datastore
  5. Co-location of state and embeddings removes need for secondary database lookups
  6. Thin FastAPI layer acts only as a request broker with minimal business logic
  7. Redis performs in-memory cosine similarity for low-latency semantic retrieval
  8. Enables real-time computation of “semantic gravity” directly from the UI
  9. Rapid card sorting and attraction without performance bottlenecks
  10. Consistent prototype speed despite physics simulation and AI generation workload

Github: https://github.com/ArvindPadala/orbit-semantic-canvas

Anthropic Redis

project website

Summarizing URL...