CodeNebula

A Real-Time 3D Developer Universe Engine

Stars
7
Language
JavaScript
License
MIT
Updated
View on GitHub

CodeNebula

An advanced interactive GitHub visualization system that transforms repositories, commits, and activity into a real-time explorable 3D universe.

Description

CodeNebula visualizes a GitHub profile as a dynamic 3D galaxy where:

  • Repositories become planets orbiting in space
  • Commits manifest as glowing particles orbiting each planet
  • Stars (GitHub stars) determine planet size
  • Languages are represented by unique planet colors
  • Contributions create pulsing energy waves throughout the galaxy

Features

Core Visualization

  • Interactive 3D galaxy with procedurally generated planets
  • Each repository rendered as a unique planet with language-based coloring
  • Orbiting commit particles that animate around planets
  • Moons represent forked repositories
  • Rings indicate highly popular repositories (100+ stars)

Visual Effects

  • Procedural nebula background using Perlin noise shaders
  • Animated starfield with 3000+ stars
  • Bloom and depth of field post-processing
  • Contribution energy waves emanating from the galaxy center
  • Glassmorphism UI panels with neon glow accents

Interaction

  • Hover over planets to see repository names and languages
  • Click planets to zoom in and view detailed information
  • Smooth camera transitions between viewpoints
  • Auto-tour mode for cinematic exploration
  • Full orbit controls (pan, zoom, rotate)

Filtering & Search

  • Filter repositories by programming language
  • Search repositories by name or description
  • Timeline slider to visualize repository growth over time

Tech Stack

Frontend

  • React 18 with Vite
  • Three.js for 3D rendering
  • React Three Fiber (R3F) for declarative 3D scenes
  • @react-three/drei for helpers and abstractions
  • @react-three/postprocessing for visual effects
  • Zustand for state management
  • GLSL shaders for custom effects

Graphics

  • Custom GLSL vertex and fragment shaders
  • Postprocessing pipeline (Bloom, DOF, Vignette)
  • GPU-accelerated particle systems
  • Instanced rendering for optimal performance

Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn

Installation

# Clone the repository
git clone https://github.com/Manavarya09/CodeNebula.git
cd CodeNebula

# Install dependencies
npm install

# Start development server
npm run dev

Building for Production

npm run build

The build output will be in the dist/ directory.

Usage

  1. Open the application in your browser
  2. Enter a GitHub username in the search box
  3. Press Enter or click "Explore" to fetch data
  4. Navigate the 3D galaxy:
    • Click and drag to rotate the view
    • Scroll to zoom in/out
    • Hover over planets to see repository names
    • Click on planets to view detailed information
  5. Use filters to focus on specific languages
  6. Use the timeline slider to see repository history
  7. Click "Auto Tour" for a cinematic experience

Project Structure

codnebula/
├── src/
│   ├── components/
│   │   ├── Scene.jsx          # Main 3D scene setup
│   │   ├── Galaxy.jsx        # Galaxy container
│   │   ├── Planet.jsx        # Individual planet component
│   │   ├── OrbitParticles.jsx # Commit particles
│   │   ├── Starfield.jsx     # Background stars
│   │   ├── Nebula.jsx        # Procedural nebula
│   │   ├── ContributionWaves.jsx # Energy waves
│   │   └── CameraController.jsx # Camera management
│   ├── hooks/
│   │   └── useGithubData.js  # GitHub data fetching hook
│   ├── utils/
│   │   ├── api.js            # GitHub API utilities
│   │   └── dataMapper.js     # Data transformation
│   ├── store/
│   │   └── useStore.js       # Zustand state store
│   ├── App.jsx               # Main application
│   ├── main.jsx              # Entry point
│   └── index.css             # Global styles
├── public/
├── index.html
├── package.json
├── vite.config.js
└── README.md

API

The application uses the GitHub REST API to fetch:

  • User profile information
  • Repository list with metadata
  • User events for contribution data

No authentication required for public data.

License

MIT License - Copyright (c) 2026 Manav Arya

Acknowledgments

Built with React Three Fiber and Three.js communities.