ChronoCode

3D Time Machine for Your Coding Journey

Stars
7
Language
JavaScript
License
MIT
Updated
View on GitHub

ChronoCode

ChronoCode is a production-grade 3D web application that transforms a user's GitHub history into an interactive navigable time corridor. It visualizes coding journey as a spatial 3D experience where time flows forward through a neon-lit tunnel.

Features

  • 3D Time Corridor: Navigate through a futuristic neon corridor representing your GitHub timeline
  • Repository Structures: Each repository becomes a 3D building with height based on stars and color based on language
  • Commit Particles: Floating particles represent commits with density indicating activity
  • Interactive Controls: WASD movement with smooth camera transitions
  • Time Scrubber: Jump to specific periods in your coding history
  • AI Insights Panel: View statistics about your coding activity including peak periods and top languages
  • Cinematic Mode: Auto-guided tour through your timeline
  • Post-Processing Effects: Bloom and vignette for cinematic feel

Tech Stack

  • React (Vite)
  • Three.js
  • React Three Fiber (R3F)
  • @react-three/drei
  • @react-three/postprocessing
  • Zustand (State Management)
  • GLSL Shaders

Setup Instructions

  1. Clone the repository
  2. Install dependencies: 
    npm install
  3. Start the development server: 
    npm run dev
  4. Open your browser at http://localhost:3000

Usage Guide

  1. Enter your GitHub username in the input field
  2. Click "Explore" to load your GitHub data
  3. Navigate through the 3D corridor using:
    • W/A/S/D: Move forward/left/backward/right
    • Space: Move up
    • Shift: Move down
  4. Click on repository structures to view details
  5. Use the time scrubber at the bottom to jump to specific times
  6. Toggle cinematic mode for an auto-guided tour

Folder Structure

chronocode/
├── src/
│   ├── components/
│   │   ├── Scene.jsx          # Main 3D scene
│   │   ├── Corridor.jsx      # Tunnel geometry with shaders
│   │   ├── RepoStructure.jsx  # Repository 3D buildings
│   │   ├── CommitParticles.jsx # Commit visualization
│   │   ├── CameraController.jsx # Camera movement
│   │   ├── TimeController.jsx  # Timeline management
│   │   └── UI.jsx             # UI overlay components
│   ├── store/
│   │   └── useStore.js        # Zustand state management
│   ├── utils/
│   │   ├── api.js             # GitHub API utilities
│   │   └── timeMapper.js      # Date mapping functions
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── public/
├── index.html
├── package.json
├── vite.config.js
└── README.md

API Integration

ChronoCode uses the GitHub REST API to fetch:

  • User profile data
  • Repository information (stars, forks, language, creation date)
  • User events (commits)

Performance Optimizations

  • Instanced rendering for particles
  • Frustum culling for off-screen objects
  • Shader-based animations for corridor
  • Level of detail based on distance
  • Efficient state management with Zustand

License

MIT License - Copyright (c) 2026 Manav Arya