7 months ago
2195561Remove the timed STARBASE dissolve-in/out intro that played on every page load. Replace it with a full-screen login gate that blocks access to the graph until the user authenticates via GitHub OAuth. Login screen design: - STARBASE title in Geist Pixel (56px, centered) preserving brand - "explore your codebase" subtitle (11px uppercase, tertiary color) - "Sign in with GitHub" button with GitHub SVG icon - Animated 2D canvas starfield background (1200 stars with parallax drift and twinkle) for visual continuity with the 3D graph - Content fades in via .show-content class transition Auth flow: - On page load, the login overlay renders immediately at opacity:1 (no flash of graph content) and calls /api/me to check session - If authenticated: overlay is removed instantly, graph loads normally - If not authenticated: login content fades in, button redirects to /auth/github which starts the OAuth flow - On OAuth callback (URL contains #authenticated): overlay is removed, hash is cleared, auth state is refreshed - On sign out: showLogin() re-adds the overlay and fades content in This is optimal over a route-based approach because the app is a single-page 3D visualization — there's no router, and the graph initializes eagerly. A DOM overlay that gates visibility is the lightest mechanism: zero bundle cost, no routing library, and the graph's WebGL context stays warm behind the overlay so there's no re-initialization delay after login.
Parent9b93d47