whatisgithub

What is isometric-github-contributions?

radiumcoders/isometric-github-contributions — explained in plain English

Analysis updated 2026-05-18

26TypeScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

Turns any public GitHub contribution calendar into an interactive 3D block landscape you can rotate, zoom, and export as an image.

Mindmap

mindmap
  root((Isometric GitHub Contributions))
    What it does
      Renders contributions as 3D blocks
      Shareable profile URLs
      Exports PNG snapshots
    Tech stack
      Next.js
      React
      Three.js
      TypeScript
    Use cases
      Visualizing GitHub activity
      Sharing contribution art
      Reusable UI component
    Audience
      Developers
      Vibe coders

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Turn any GitHub username into a shareable 3D visualization of their contribution history.

USE CASE 2

Export a contribution landscape as a PNG image with optional stats overlay to share online.

USE CASE 3

Drop the reusable 3D contribution graph component into your own React project via shadcn.

USE CASE 4

Explore streaks, peak days, and most active months for a GitHub profile in a sidebar.

What is it built with?

Next.jsReactTypeScriptThree.jsTailwind CSS

How does it compare?

radiumcoders/isometric-github-contributionsantonp29/sylvasignerdevagrawal09/specter
Stars262626
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderatemoderate
Complexity2/53/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

GitHub token is optional, without it the app scrapes the public profile page.

No clear license text was found in the README.

So what is it?

Isometric GitHub Contributions turns a GitHub profile's contribution calendar into an interactive 3D landscape you can view in a web browser. Each day of activity becomes a block, with taller blocks meaning more contributions that day, colored using the same shades GitHub itself uses for its contribution graph. You can drag to rotate the scene and scroll to zoom in and explore it from any angle. Using the tool is simple: type in a GitHub username or paste a profile link, and the app builds a shareable page at a clean web address like yoursite.com/username. A sidebar shows extra details such as total contributions, current and longest streaks, the busiest single day, and the most active month and weekday. The finished 3D scene can be exported as a PNG image, with an option to include those statistics directly in the exported picture. Behind the scenes it is a Next.js web application built with React and TypeScript, using Three.js to render the 3D terrain and shadcn UI components with Tailwind CSS for the interface styling. Contribution data is normally pulled through GitHub's official API, but it falls back to reading the public profile page directly if no access token is provided, so it works out of the box without any account setup. The 3D contribution graph itself is also published as a reusable component through the shadcn UI registry, so a developer building their own project can install just that piece and drop it into their own React app with a single command, rather than needing to run the whole site.

Copy-paste prompts

Prompt 1
Help me clone and run this project locally with pnpm install and pnpm dev.
Prompt 2
Show me how to add a GITHUB_TOKEN so contribution data uses the GraphQL API instead of scraping.
Prompt 3
Walk me through installing the isometric-contribution-graph component into my own shadcn project.
Prompt 4
Explain how the profile-analysis.ts file calculates streaks and peak activity days.

Frequently asked questions

What is isometric-github-contributions?

Turns any public GitHub contribution calendar into an interactive 3D block landscape you can rotate, zoom, and export as an image.

What language is isometric-github-contributions written in?

Mainly TypeScript. The stack also includes Next.js, React, TypeScript.

What license does isometric-github-contributions use?

No clear license text was found in the README.

How hard is isometric-github-contributions to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is isometric-github-contributions for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.