git404hub

what is gitgrimoire fr?

tosxin-456/gitgrimoire — explained in plain English

Analysis updated 2026-05-18

15TypeScriptAudience · vibe coderComplexity · 2/5Setup · moderate

tl;dr

Turns any GitHub username into an animated, Black Clover themed profile card scored from real commits, streaks, and stars.

vibe map

mindmap
  root((repo))
    What it does
      Scores GitHub activity
      Generates themed card
      Runs duels
    Tech stack
      Next.js
      TypeScript
      Prisma
    Use cases
      Shareable profile cards
      Stat-based duels
    Audience
      Vibe coders
      GitHub enthusiasts

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 make with this?

VIBE 1

Generate a fun, shareable fantasy-themed profile card from any GitHub username.

VIBE 2

Compare two GitHub users in a stat-based duel decided by real activity numbers.

VIBE 3

Browse leaderboards ranking GitHub users by streaks, stars, and other stats.

what's the stack?

TypeScriptNext.jsTailwind CSSPrismaFramer Motion

how it stacks up fr

tosxin-456/gitgrimoireaestheticsuraj234/chai-gpt-buildappariciojunior/motion-studio-open
Stars151515
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderateeasymoderate
Complexity2/52/5
Audiencevibe coderdevelopervibe coder

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

how do i run it?

Difficulty · moderate time til it works · 30min

Requires a no-scope GitHub personal access token and running Prisma migrations before first use.

in plain english

GitGrimoire turns a GitHub username into a themed profile card inspired by the anime Black Clover, without requiring the visitor to sign in or authorize anything. You type a username, and the site pulls real activity from that account, including commits, streaks, pull requests, and stars, then turns it into a fantasy style character sheet. The result appears as a 3D book that opens with an animated ceremony, particles and all, revealing a two page spread showing an avatar, a rank, a squad, an element style attribute, and six stats scored from zero to ninety nine. Those stats are each built from a different mix of real GitHub numbers, so no single number decides the whole card. For example, one stat blends total commits, current streak, and active days, while another blends stars received and how dominant your most used programming language is. The combined score maps onto a ranked ladder of titles, and the card's rarity, from common up to a rare four leaf level, is based on that overall score. One single five leaf rarity exists and cannot be earned by any score, reserved as a joke for the project's own creator. The site also includes a duel mode where two GitHub profiles are compared and a winner is decided by their stats, always the same way for the same two people, plus leaderboards ranking users by different stats. You can export your card as an image to share. Behind the scenes, it reads public GitHub data through GitHub's GraphQL API using a token with no special permissions, scores it, and stores results in a SQLite database so that profile pages and leaderboards persist. It is built with Next.js, TypeScript, Tailwind CSS, Framer Motion for the animations, and Prisma for the database layer. Running it locally requires creating a GitHub token with no scopes and setting it as an environment variable before installing dependencies and starting the development server.

prompts (copy fr)

prompt 1
Help me set up a no-scope GitHub token and run this project locally.
prompt 2
Explain how the six card stats are each calculated from a GitHub profile's activity.
prompt 3
Show me how the duel mode decides a winner between two GitHub profiles deterministically.
prompt 4
Walk me through how the 3D book animation and card export to PNG are implemented.

Frequently asked questions

what is gitgrimoire fr?

Turns any GitHub username into an animated, Black Clover themed profile card scored from real commits, streaks, and stars.

What language is gitgrimoire written in?

Mainly TypeScript. The stack also includes TypeScript, Next.js, Tailwind CSS.

How hard is gitgrimoire to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is gitgrimoire for?

Mainly vibe coder.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.