Documentation

Learn Animus

Transform any GitHub repository into an interactive 3D visualization. Explore file structures, analyze dependencies, and uncover complexity patterns — directly in your browser.

Getting Started

Up and running in 4 steps

No downloads or installations. Animus runs entirely in your browser — connect your account and go.

Sign In & Access

Connect your GitHub account and head to the dashboard. Click "Launch App" from the homepage, or navigate directly to /dashboard.

Import a Repository

Click "New Graph" and paste any GitHub repository URL — public or private. Animus fetches the file tree, resolves dependencies, and builds a complete graph automatically.

Explore in 3D

Your codebase materializes as an interactive 3D neural network. Orbit, zoom, and click any node to inspect file details, dependency chains, and complexity metrics.

Organize & Manage

Group related graphs into color-coded workspaces. Rename, reorganize, and switch between grid and list views to manage your visualization library.

Supported Repository URL Formats

https://github.com/{owner}/{repo}

Examples:
  https://github.com/vercel/next.js
  https://github.com/facebook/react
  https://github.com/denoland/deno
  https://github.com/sindresorhus/ky

Usage Guide

Mastering the Graph Viewer

The graph viewer is the core experience of Animus. Here's everything you can do with it.

3D Navigation

Click and drag to orbit freely around your codebase. Scroll to zoom in and out. The camera uses smooth damping for fluid, cinematic navigation.

Node Inspection

Click any node to open its detail panel — file name, path, extension, line count, dependency count, and a computed complexity score.

Button.tsx142 lines

Dependencies8

Complexity32/100

Heatmap Mode

Activate heatmap mode to visualize complexity across your entire codebase at a glance. Red indicates high complexity, yellow is moderate, and green means clean, maintainable code.

High

Medium

Low

Workspace Management

Organize imported graphs into color-coded workspaces. Create, rename, and move graphs between workspaces. Switch between grid and list views to suit your workflow.

Frontend

Backend

Libraries

Graph Controls

Use the control panel at the bottom-right of the graph viewer for quick camera and view operations.

Zoom In

Moves the camera closer to the graph center

Zoom Out

Moves the camera further from the graph center

Fit to View

Automatically repositions the camera to frame all visible nodes

Reset

Clears the current selection and resets all view modes

Keyboard Shortcuts

Navigate with precision

All mouse and keyboard controls for navigating the 3D graph viewer and dashboard interface.

Navigation

Click + Drag

Orbit the camera around the graph

Scroll

Zoom in and out

Click

Select a node to open the inspection panel

ClickEmpty

Deselect the current node and close the panel

Controls

+

Zoom in using the control panel

-

Zoom out using the control panel

Fit

Fit all visible nodes to the viewport

F11

Toggle fullscreen mode

General

Esc

Close open modals and panels

Tab

Navigate between interactive elements

Technology

Built with modern tools

Built on a modern web stack optimized for real-time 3D rendering and responsive interactions.

Next.js 16

Server-side rendering with App Router and Turbopack for fast page loads and optimized production builds

React 19

Concurrent rendering, Server Components, and the latest hooks API for fluid, responsive interfaces

Three.js / R3F

Hardware-accelerated 3D rendering through React Three Fiber and Drei at a consistent 60fps

TypeScript

Full type safety from the API layer to UI components — fewer bugs, better developer experience

Zustand

Lightweight state management with built-in persistence — your graphs and settings are saved across sessions

CSS Modules

Scoped styling with zero runtime overhead and a consistent design token system throughout

Graph Pipeline

Every repository import goes through a 4-stage pipeline that transforms raw file data into an interactive 3D visualization.

FetchRetrieves file tree via GitHub API

ClassifyCategorizes files by type and role

ComputeResolves imports and computes metrics

LayoutPositions nodes in 3D space via golden-angle spiral

Layout Algorithm (Golden-Angle Spiral)

// Cluster centers use a golden-angle spiral in XZ plane
const goldenAngle = 2.4  // ~137.5 degrees
const theta = clusterIndex * goldenAngle
const radius = 4 + Math.sqrt(totalClusters) * 2.2

// Each node is placed on a Fibonacci sphere
// around its cluster center
const phi = Math.acos(1 - (2 * (i + 0.5)) / groupSize)
const theta = Math.PI * (1 + Math.sqrt(5)) * i

// Result: evenly distributed nodes with
// natural cluster separation

Architecture

Four-layer system design

A clean separation of concerns across four layers ensures each part of the system can evolve independently.

PresentationReact Components + CSS Modules

Landing PageDashboard ShellGraph ViewerModals & Overlays

StateZustand Store + Slices

UI SliceGraph SliceWorkspace SliceWallet Slice

DataGitHub API + Transformers

Repo FetcherFile ClassifierMetric ComputationLayout Engine

3D EngineThree.js + Post-Processing

InstancedMesh NodesLineSegments EdgesBloom + VignetteCamera Controller

Project Structure

animus/
  app/
    layout.tsx          # Root layout + fonts
    page.tsx            # Landing page
    dashboard/
      layout.tsx        # Dashboard shell
      page.tsx          # Graph list
      graph/[graphId]/  # 3D graph viewer
    docs/
      page.tsx          # This documentation
  components/
    landing/            # Hero, Features, HowItWorks
    dashboard/          # Sidebar, TopBar, GraphCard
    graph/              # GraphScene, Nodes, Edges, Controls
    ui/                 # Button, Modal, Spinner
    docs/               # Documentation components
  lib/
    store/              # Zustand slices
    github/             # API fetcher, classifier, metrics
    graph/              # Layout engine, transformer
    types/              # TypeScript interfaces
    constants.ts        # File types, colors, config

Ready to explore your code?

Paste any GitHub repository URL and watch your codebase come alive as an interactive 3D neural network.

Launch Animus