The HUD-first web framework for smart glasses.
Build glanceable web apps for Meta Ray-Ban Display — 600×600, Neural Band, zero dependencies.
English · 한국어
Meta opened Ray-Ban Display to third-party Web Apps — plain HTML/CSS/JS rendered on the glasses and shared by URL. But the display is a strange canvas: 600×600, no cursor, driven by a Neural Band and temple touch, and (during the preview) each app is capped at ~100 testers.
Glint is the missing app layer. It gives you a launcher-hub: ship one URL that hosts a whole suite of small, glanceable utilities — sidestepping the per-app cap and claiming the "home screen" before an official store exists. It's ~9 KB, has zero dependencies, and there's no build step to start.
Status — built against Meta's Wearables Device Access Toolkit / Web Apps developer preview. Public publishing isn't open yet; this is a head start, not a store submission.
Three curated palettes, switchable at runtime. Same UI, different soul.
| Ember · SLSO8 | Nyx · Nyx8 | Apollo · Apollo |
|---|---|---|
 |
 |
 |
Instrument-style compass — real tick bezel and needle, not primitive shapes.
- 🥽 HUD-first — a fixed 600×600 stage that scales to any viewport (≈1:1 on the glasses).
- 🎯 Spatial focus navigation — no cursor; a focus ring moves with up/down, selects on activate.
- 🖐 Input adapter — keyboard + touch for dev, real Neural Band / Cap Touch wired in one place.
- 🧩 Launcher-hub router — many utilities behind a single URL.
- 🎨 Curated palettes — Ember / Nyx / Apollo as design tokens; add your own in 8 hex values.
- ✒️ Real line icons — inline, Lucide-style, colored by
currentColor. No emoji, no icon-font. - 📦 Zero dependencies, no build required — plus an optional one-command single-file build.
- 🧰 Ten apps included — clock, timer, stopwatch, weather, compass, level, notes, converter, a component gallery, and docs.
git clone https://github.com/SillyToolValley/glint && cd glint
npm run dev # landing + live demo at http://localhost:3000
# the interactive app alone is at /demo.htmlPrefer one file? npm run build inlines everything into dist/glint.html — host it anywhere, or open it directly on the glasses.
Controls — ↑ ↓ navigate · ← → adjust · Enter select · Esc back · touch swipe / two-finger = back.
Live site in one command (needs gh authenticated):
bash scripts/deploy.sh glint # creates the repo, pushes, enables GitHub Pages
# → https://<you>.github.io/glint/A Pages workflow redeploys on every push to main.
To the glasses
- Host the folder (or
dist/glint.html) on any static host — GitHub Pages, Vercel, Netlify. - Open the URL on your Ray-Ban Display via the Meta AI app (developer mode on).
- During the preview, share a password-protected URL with up to ~100 testers.
Docs: wearables.developer.meta.com/docs/develop/webapps
Themes are curated lospec palettes, shipped as token blocks in glint.css:
| Theme | Palette | Feel |
|---|---|---|
| Ember | SLSO8 | warm amber on deep navy — instrument HUD |
| Nyx | Nyx8 | soft peach on near-black — moody, elegant |
| Apollo | Apollo | cool teal on warm greys — clean, technical |
Switch at runtime:
document.documentElement.dataset.theme = 'nyx';Add your own by copying a [data-theme="…"] block and dropping in eight values
(--stage --surface --surface-2 --line --ink --muted --accent --on-accent + --edge).
Keep a dark canvas — the display is additive — and one high-legibility accent.
function HelloApp(){
return Glint.Screen({ title: 'Hello' },
Glint.Row('Say hi', {
icon: Glint.icon('plus'),
onSelect: () => Glint.toast('Hi from the HUD')
})
);
}
// register it in the Launcher list (app.js):
Row('Hello', { icon: icon('plus'), sub: 'Demo', onSelect: () => router.push(HelloApp) });| API | Description |
|---|---|
Glint.el(tag, props, ...kids) |
Minimal hyperscript element builder |
Glint.icon(name, size) |
Inline line icon (stroke = currentColor) |
Glint.Screen({title, root, onShow, onHide}, ...kids) |
Screen with status bar + scroll body |
Glint.Row(label, {icon, sub, right, chev, onSelect}) |
Focusable list row |
Glint.Button(label, {variant, icon, onSelect}) |
Focusable button (primary/ghost/danger) |
Glint.Toggle(label, {value, onChange}) |
On/off switch |
Glint.Ring({size, stroke}) → .set(0..1) |
SVG progress ring |
Glint.toast(msg) |
Transient HUD notification |
Glint.store.get/set(key, val) |
Persistence (localStorage + memory fallback) |
Glint.router.push/pop/home(factory) |
Screen navigation stack |
Glint.focus |
Spatial focus manager over [data-focus] |
Typed via glint.d.ts.
Wire the glasses input — keyboard and touch work out of the box; connect the real
Neural Band + Cap Touch events in one place, bindGlassesInput() in glint.js:
// glasses.on('swipe', d => Glint.focus.move(d === 'up' ? -1 : 1));
// glasses.on('pinch', () => Glint.focus.select());
// glasses.on('back', () => Glint.router.pop());Every app keeps working unchanged — apps only speak the semantic layer (navigate / select / back).
glint/
├── index.html # landing / showcase site (embeds the live demo)
├── demo.html # the app shell (loads the sources)
├── glint.js # runtime: el, icon, focus, input, router, components
├── glint.css # 3 palette themes + HUD component styles
├── app.js # helpers + 10 apps (clock, timer, stopwatch, weather…) + boot
├── glint.d.ts # TypeScript definitions
├── scripts/
│ ├── build.mjs # inline sources → dist/glint.html
│ └── deploy.sh # create repo + push + enable GitHub Pages
├── .github/workflows/ # CI + Pages deploy
├── dist/glint.html # single-file build (generated)
├── LAUNCH.md # launch posts (HN / X / Product Hunt / Reddit)
└── assets/ # logo, screenshots, hero
- 2-D grid navigation
- Voice / speech-to-text capture
- Notification surfaces
-
create-glint-appscaffold + React/TS binding - A public showcase of apps built with Glint
Issues and PRs welcome — see CONTRIBUTING.md. Keep it tiny and dependency-free.
MIT. Rename "Glint" to your own project freely.
Not affiliated with Meta. Ray-Ban and Oakley are trademarks of their respective owners. Palettes courtesy of their creators via lospec.