index · all work
10 · EdTech

Lumen Frontier

Two ways to explore what you know: a drag-and-drop widget OS, and a galaxy of subjects you fly through as an astronaut.

Year2025
Statuslive
RoleSolo · design + engineering
Built withAstro 4 · React 18 · TypeScript 5 · Three.js r180 · Tailwind CSS 3 · +5
lumen-frontier.vercel.appopen ↗

Live demo. Click Run to load the real app and use it right here, or open it full-screen.

01Overview

Lumen Frontier is the experimental front-end of the Lumen learning project: an attempt to make studying feel like a place instead of a form. One landing page splits into two very different interfaces. **LumenOS** is a desktop-style dashboard where every study tool is a widget you drag, resize, and arrange on an open canvas, with the whole layout saved locally so it comes back exactly how you left it. **Lumenverse** is a first-person 3D space, hand-built in Three.js, where each academic subject is a glowing planet you fly toward as a tethered astronaut, mouse-look and WASD included.

Under the hood it is an Astro islands app: static HTML by default, React only where things need to be interactive, and nanostores as the shared brain between islands. The widget system is registry-driven and code-split, so each of the thirteen widgets loads as its own chunk on demand. A FastAPI backend is scaffolded for future auth and cross-device sync, but today the app runs entirely in the browser and persists to localStorage.

02The problem

Most study apps are a login wrapped around a feature list, and they all feel the same. Lumen Frontier treats the interface itself as the product: knowledge you can lay out like a workspace, or fly through like a solar system, so the act of studying feels less like filling out a form and more like moving through a space you own.

03Highlights
  • One landing page, two full front-ends: a draggable widget "OS" (LumenOS) and a first-person 3D knowledge explorer (Lumenverse), each with its own layout and interaction model.
  • Registry-driven widget system with 13 working widgets (notes, tasks, pomodoro, goals, journal, music, ambience, stats, flashcards, and more), each lazy-loaded into its own chunk via React.lazy + Suspense.
  • Custom useDrag and useResize hooks give every widget header-drag and corner-resize with per-widget min/max constraints, and the full canvas persists to localStorage with a migration shim that upgrades older saved layouts.
  • A 985-line hand-written Three.js scene: astronaut POV (gloves, visor, HUD lines), a tethered spaceship, 18 subject planets with layered atmospheric glow, pointer-lock mouse-look, WASD flight, fullscreen immersive mode, and a rocket fly-to animation.
  • Performance-tuned WebGL: capped device pixel ratio, simplified sphere geometry, shadows disabled, a trimmed 1,000-star field, and Vite manual chunks that split three from the react vendor bundle.
  • Astro islands architecture with nanostores as the cross-island state bus, an 'Old Money' Tailwind theme (brass, burgundy, cognac, forest, ivory), glassmorphism panels via Tailwind backdrop-blur, and GitHub Actions CI that builds the frontend and lints, types, and tests the backend.
04By the numbers
13
interactive widgets
18
explorable subject planets
985-line hand-written Three.js scene
~9,200
lines of frontend TS/TSX/Astro
What's inside6 parts
  • @lumen-frontier/frontendapp

    The deployed Astro 4 site with React 18 islands, serving three routes (landing, dashboard, and the 3D lumenverse) with TypeScript, Tailwind, and nanostores as the state bus between islands.

  • LumenOSapp

    A desktop-style study dashboard where every tool is a widget you drag by its header, resize from the corner, add from a categorized marketplace, and arrange on a canvas that saves back to localStorage.

  • Lumenverseapp

    A 985-line Three.js first-person scene where each subject is a glowing planet you fly to as a tethered astronaut, with helmet visor, gloves, a HUD, pointer-lock mouse-look, WASD flight, and a rocket fly-to animation.

  • widget-systemlibrary

    The registry-driven engine behind LumenOS: it lazy-loads 13 widgets with React.lazy and Suspense and runs direct manipulation through custom useDrag and useResize hooks with per-widget size limits.

  • backendservice

    A FastAPI scaffold for future auth and cross-device sync, wired for SQLAlchemy and Supabase, currently a stub that is excluded from the Vercel build.

  • apiservice

    A Vercel serverless handler at api/index.py that wraps the FastAPI app with Mangum for ASGI compatibility, ready as the entry point once the backend goes live.

·Tags
EdTech3D / WebGLWidget dashboardAstro islandsThree.jsFrontend
Full tech stack 10
Astro 4React 18TypeScript 5Three.js r180Tailwind CSS 3nanostoresViteFastAPI (scaffold)npm workspacesVercel