/* metaglass.dev — shared UI components */ const Icon = { Search: () => , GitHub: () => , X: () => , Star: () => , Arrow: () => , Out: () => , Plus: () => , Down: () => , Sun: () => , Moon: () => , Back: () => , Video: () => , Link: () => }; function HUD() { const [t, setT] = React.useState(() => new Date()); React.useEffect(() => { const id = setInterval(() => setT(new Date()), 1000); return () => clearInterval(id); }, []); const fmt = t.toLocaleTimeString('en-GB', { hour12: false }); return (
SIG · STRONG · UTC {fmt} · v1.0.0 — live
); } function TopBar({ search, setSearch, theme, toggleTheme, onOpenSubmit }) { return (
metaglass.dev
setSearch(e.target.value)} /> ⌘ K
); } function Hero({ count, newCount }) { return (
{count} apps indexed community-run unaffiliated · fan-built

Every app worth running on Meta display glasses.

metaglass.dev is an open registry of community apps and guides for the Meta Ray-Ban Display glasses. Browse what people are shipping, read how they built it, and put your own app on the map.

start building → browse marketplace
); } function Marquee({ count, newCount }) { const items = [ { text: `${count} apps indexed`, accent: true }, { text: "live on metaglass.dev" }, { text: "fan-built · unaffiliated with Meta" }, { text: `${newCount} new this week`, accent: true }, { text: "submissions open" }, { text: "v1.0.0 — live" }, { text: "open registry" }, { text: "tag your repo: #metaglass" }, { text: "SDK opened May 15, 2026" }, { text: "web apps · HTML/JS/CSS" }]; const all = [...items, ...items]; return (
{all.map((it, i) => {it.text} )}
); } function initials(name) { return name.split(/[.\s_-]+/).filter(Boolean).slice(0, 2).map((p) => p[0].toUpperCase()).join(''); } function FeaturedCard({ app, onOpen }) { return (
onOpen(app)}>
{app.image ? ( {app.name} ) : ( )} {app.category} {!app.image && // preview}

{app.name}{app.new && new}

{app.tagline}

{initials(app.author.name)} {app.author.name}
{app.category}
); } function Filters({ categories, active, setActive, sort, setSort, counts }) { const sorts = ["Featured", "Newest", "A-Z"]; return (
{categories.map((cat) => )}
sort:
{sorts.map((s) => )}
); } function AppRow({ app, onOpen, index }) { return (
onOpen(app)}>
{app.image ? ( {app.name} ) : ( )} {!app.image && // {String(index + 1).padStart(3, '0')}}

{app.name}

{app.new ? 'new · ' : ''}{app.category}

{app.tagline}

{initials(app.author.name)} by {app.author.name} · updated {app.updated} ago {app.repo && ·{app.repo}}
e.stopPropagation()}> {app.repo ? ( ) : ( )} {app.x ? ( ) : ( )} {app.video && ( )}
); } function SubmitCTA({ onOpenSubmit }) { return (

Built something? Put it on the map.

Submissions are reviewed by hand. We accept public GitHub repos or live web apps with a working demo, even if it's rough — early experiments are welcome.

); } function Footer({ onOpenSubmit }) { return ( ); } /* ===== Build drawer ===== */ function BuildDrawer({ open, onClose }) { React.useEffect(() => { const onKey = (e) => {if (e.key === 'Escape') onClose();}; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); return (
); } /* ===== App detail drawer ===== */ function AppDrawer({ app, onClose, onOpenOther, allApps }) { React.useEffect(() => { const onKey = (e) => {if (e.key === 'Escape' && app) onClose();}; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose, app]); React.useEffect(() => { if (app) { const body = document.querySelector('.appdrawer-body'); if (body) body.scrollTop = 0; } }, [app]); const related = React.useMemo(() => { if (!app) return []; return allApps.filter((a) => a.id !== app.id && a.category === app.category).slice(0, 3); }, [app, allApps]); const open = !!app; return (
); } function SubmitModal({ open, onClose }) { React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open, onClose]); return (
/ submit an app

Tag me on X so I can review and add it.

Post about your app and tag @m_j_fox. Public GitHub repos or live web apps both welcome — early experiments are fine.

open @m_j_fox
); } Object.assign(window, { Icon, HUD, TopBar, Hero, Marquee, FeaturedCard, Filters, AppRow, SubmitCTA, Footer, BuildDrawer, AppDrawer, SubmitModal, initials });