Skip to main content

​
3D World Components

​
Boat

The player’s boat rendered from a GLB model with customizable colors. 
<Boat />
Features:
  • Loads boat model from /public/models/boat/boat.glb
  • Customizable colors for hull, walls, roof, rails, body, and floaters
  • Scaling based on minimap fullscreen state
  • Floating and rocking animations via useNavigation hook
  • Positioned at [0, -5.5, -20] by default
Source: src/browser/components/world/boat/index.tsx:13

​
Ocean

Infinite ocean using procedurally generated tiles. 
<Ocean />
Features:
  • Uses three-stdlib Water material
  • Infinite tiling that follows the boat position
  • Animated water normals texture
  • Configurable water color, sun direction, and distortion
  • Default tile size: 10,000 units
  • Default render radius: 2 tiles in each direction
Source: src/browser/components/world/ocean/index.tsx:7

​
Sky

Realistic sky with sun position and atmospheric scattering. 
<Sky />
Features:
  • Uses @react-three/drei Sky component
  • Rayleigh scattering for blue sky
  • Configurable turbidity for atmospheric haze
  • Sun position at (0.3, 0.1, 0.4) world coordinates
  • Distance: 450,000 units
Sky Parameters:
  • rayleigh: 2 - Blue scattering intensity
  • turbidity: 5 - Atmospheric haze
  • mieDirectionalG: 0.8
  • mieCoefficient: 0.05
Source: src/browser/components/world/sky/index.tsx:6

​
File

Represents a file in the 3D world. 
<File
  instance={instance}
  index={index}
  label="example.ts"
  model={fileModel}
  nodeRef={nodeRef}
  isColliding={false}
  isBrowserEnvironment={false}
  isMinimapFullScreen={false}
  openOnClick={handleOpen}
/>
Features:
  • Scale: 27 (normal), 30 (minimap fullscreen)
  • Position Y: 13 (normal), 20 (minimap fullscreen)
  • Shows “Press SHIFT+ENTER” when colliding
  • Includes backdrop label
Source: src/browser/components/world/nodes/file/index.tsx:5

​
Folder

Represents a folder in the 3D world. 
<Folder
  instance={instance}
  index={index}
  label="src"
  model={folderModel}
  nodeRef={nodeRef}
  isColliding={false}
  isBrowserEnvironment={false}
  isMinimapFullScreen={false}
  openOnClick={handleOpen}
/>
Features:
  • Scale: 7 (normal), 9 (minimap fullscreen)
  • Position Y: 2.5
  • Shows “Press SHIFT+ENTER” when colliding
  • Larger backdrop labels than files
Source: src/browser/components/world/nodes/folder/index.tsx:5

​
UI Components

​
Compass

Displays boat heading with cardinal directions. 
<Compass />
Features:
  • Shows current heading in degrees (0-360)
  • Displays cardinal directions (N, S, E, W, NE, SE, SW, NW)
  • Responsive design (different layouts for mobile/desktop)
  • Red center marker indicating current heading
  • Scrolling strip showing surrounding directions
  • Hidden when settings.compass === "Hide"
  • Fades in after splash screen
Source: src/browser/components/ui/compass/index.tsx:4 Shows current path and Git branch. 
<Breadcrumbs />
Features:
  • Displays current Git branch via <BreadcrumbBranch />
  • Shows file path via <BreadcrumbPath />
  • Includes donate button
  • Hidden when settings.breadcrumbs === "Hide"
  • Positioned at top-left corner
  • Fades in after splash screen
Source: src/browser/components/ui/breadcrumbs/index.tsx:7

​
Minimap

Top-down view of the world. Features:
  • Orthographic camera showing overhead view
  • Follows boat position
  • Click to teleport to files/folders
  • Two modes: corner minimap (120x120px) or fullscreen
  • Toggle fullscreen with F key
  • Positioned at bottom-right when not fullscreen
Source: src/browser/components/world/minimap/index.tsx

​
Settings

Settings modal for configuring the game. 
<Settings />
Tabs:
  • General - Minimap, breadcrumbs, compass visibility
  • Controls - Boat speed, acceleration, turning
  • Behavior - Collision radius, node visibility
  • About - Version and credits
  • Restore - Reset to defaults
Source: src/browser/components/ui/settings/index.tsx

​
Splash

Loading screen shown on startup. 
<Splash />
Features:
  • Displays Gitlantis logo
  • Fades out after world loads
  • Prevents interaction during loading
Source: src/browser/components/ui/splash/index.tsx

​
Loading

Loading indicator for directory data. 
<Loading />
Source: src/browser/components/ui/loading/index.tsx

​
NoOpenProject

Error screen when no project is open. 
<NoOpenProject />
Features:
  • Instructs user to open a folder/workspace
  • Only shown in VS Code extension environment
Source: src/browser/components/ui/no-open-project/index.tsx

​
ColorPicker

Color picker for boat customization. 
<ColorPicker
  color="#ff0000"
  onChange={(newColor) => setColor(newColor)}
/>
Source: src/browser/components/ui/color-picker/index.tsx

​
Slider

Numeric slider for settings. 
<Slider
  value={50}
  onChange={(val) => setValue(val)}
  min={0}
  max={100}
  step={1}
/>
Source: src/browser/components/ui/slider/index.tsx

​
Tooltip

Hover tooltip for UI elements. 
<Tooltip text="This is a tooltip">
  <button>Hover me</button>
</Tooltip>
Source: src/browser/components/ui/tooltip/index.tsx

Build docs developers (and LLMs) love

Get started for freeTalk to us