$ show liltrendi/gitlantis
Gitlantis is a VS Code extension that turns the traditional file explorer into an interactive 3D ocean world. Users control a boat to navigate a seascape where directories appear as lighthouses and files as buoys, making code exploration more engaging. The extension communicates via webview with a React Three Fiber interface, offering features like branch switching, file opening, and settings customization. It also supports a standalone browser mode for demo purposes using sample data. Architecturally, the extension consists of a VS Code extension host that handles workspace and Git operations, and a rich webview application built with React 18, Three.js, React Three Fiber/Drei, and Zustand for state management. The 3D scene includes dynamic ocean tiling, boat physics (using React Three Cannon), collision-based node interaction, a compass, minimap, and ambient audio. The UI layer provides splash screens, loading states, settings modals with multiple tabs, and mobile joystick support. The codebase demonstrates modern frontend practices and creative use of 3D in a developer tool. However, it has several maintainability concerns: many @ts-expect-error comments for Three.js types, hardcoded demo data for browser mode, a complex dual-build setup, and no automated tests. Some components, like the settings modal and the dynamic backdrop, are well-abstracted and potentially reusable in other Three.js projects.
The LLM identified 4 files worth highlighting for reuse:
A modal component that manages a tabbed settings panel with multiple content sections (General, Behavior, Controls, About, Restore). It encapsulates the active tab state and renders child panels selectively, forming a clean and reusable pattern for any settings interface requiring categorized options.
A 3D compass overlay that indicates the player's orientation in the 3D world. It uses Three.js to create a directional indicator that updates with the camera angle. This component is self-contained and can be extracted for use in any 3D application needing a heads-up compass.
Generates a dynamic background scene using procedural geometry and text rendering. It demonstrates non-obvious skill by combining Three.js shapes and Canvas text to create a visually appealing backdrop that responds to the environment. The logic is self-contained and can be reused as an environment generator for loading screens or menus.
Manages positioning and playback of multiple audio sources (wave ambient and horn effects) with distance-based volume attenuation. This reusable component can be integrated into any Three.js scene to add spatial audio without heavy coupling to the game logic.