Launching today
GlassKit UI
AI-ready React UI for Meta's Ray-Ban Display glasses
29 followers
AI-ready React UI for Meta's Ray-Ban Display glasses
29 followers
Open-source (MIT) React components for Meta Ray-Ban Display web apps. 44 components + a D-pad focus engine for the 600x600 lens, and built for AI agents: a skill, an MCP server, and llms.txt so Claude/Cursor build it right. Vendor shadcn-style; own the source.
The copy-into-your-repo model makes sense here. Before editing a component heavily, I’d want to know the update path: do you re-run the CLI and merge a diff, or treat modified components as forked?
It's the shadcn model, so there are really two layers with different update stories.
The runtime is a versioned npm dep. The platform-critical stuff (the spatial focus engine, system-back navigation, the sensor hooks, GlassViewport) all lives in @glasskit-ui/react. That stays in your package.json and updates over semver like any other dependency. You never vendor or fork it, so you keep getting fixes for the gnarly Display-runtime behavior for free.
The components are yours. When you "glasskit add now-playing", the styled component source drops into your repo and you own it.
Congrats on the launch! I'm curious how does the spatial focus engine decide which element gets focus when multiple interactive components are stacked vertically?
@crystalmei Thanks! It's purely geometric, not DOM order, so stacked components "just work" regardless of how they're nested.
When you press a direction, the engine takes the center of the currently-focused element and scores every other .focusable on screen.
A candidate only qualifies if its center is actually in the pressed direction (for Down, its center-y has to be below the current one).
Each qualifier gets a score of: distance along the travel axis + 2 × drift on the cross axis -> lowest score wins.
So for a vertical stack, pressing Down picks the nearest element below, but that 2× cross-axis penalty means a component sitting directly beneath you beats one that's slightly closer but offset sideways.
It keeps the ring traveling in a straight visual line instead of zig-zagging.
A few rules layer on top: disabled and zero-size/invisible elements are skipped, a focused slider keeps its own left/right axis for value changes, and traps the ring inside modals so arrows can't wander onto covered content.