CommitCosmos

Your GitHub commits become a living galaxy — every push lights a star, every streak draws a constellation.

Comment

🌌 Inspiration

Every developer has stared at GitHub’s contribution graph—a sterile, flat grid of green 2D squares. While functional, it fails to capture the raw creative energy, late-night breakthroughs, and architectural milestones that go into building software.

We asked ourselves: What if your codebase wasn't just a list of Git commits, but a living, breathing celestial universe?

What if pushing code literally ignited thermonuclear stars in real time? What if maintaining a daily coding streak wove glowing constellation filaments across deep space? What if releasing a new version triggered a radiant supernova shockwave, and merging a pull request formed a dual-star accretion system?

That vision became CommitCosmos: an immersive, real-time 3D WebGL observatory that transforms raw Git telemetry into an interactive, mathematically uniform galaxy.

✦ What It Does

CommitCosmos connects to your GitHub repositories via an automated, cryptographically verified pipeline to render your coding history as an astronomical cosmos:

  • Stellar Ignition Engine: Every Git commit ignites a star. Stars are spectrally color-coded based on programming language (e.g., TypeScript burns in radiant blue-violet, Rust in incandescent amber, Python in celestial cyan, and Go in electric sky-blue).
  • Magnitude & Blast Radius: Major refactors and large commits expand with increased luminosity and size, while PR merges form binary star pairs.
  • Continuous Constellation Filaments: Daily commit streaks weave radiant starlight filaments between consecutive-day stars. A 7+ day streak completes a constellation with an incandescent celestial pulse.
  • Autonomous Cinematic Tour: A 1-click auto-flight choreography mode that pilots the camera through the galaxy, dipping into high-density clusters and pulling back for panoramic wide-angle views.
  • Galaxy Evolution Time-Lapse Scrubber: A chronological timeline scrubber that lets judges and visitors hit Play (▶) to watch the developer's universe ignite star-by-star from day one to the present day.
  • "Cosmic Persona" Archetype Generator: An algorithmic analyzer that evaluates commit timestamp distributions and velocities to calculate developer archetypes (Midnight Pulsar, Dawn Protostar, Solar Dynamo, Twilight Supernova) with 1-click social sharing.
  • Dynamic README Badges & 4K Wallpaper Export: Live embeddable SVG badges for GitHub README.md profiles that update in real time with streak counters, plus 1-click high-resolution wallpaper downloads.
  • Observatory Command Center & Settings: Complete webhook telemetry configuration, one-click repository synchronization, graphic fidelity toggles (reduced motion, bloom), and public shareable URLs.

🛠️ How We Built It

CommitCosmos was engineered from the ground up with a production-grade, full-stack architecture prioritizing 60 FPS rendering, strict security, and zero-compromise type safety.

1. Mathematical Fibonacci Sphere Celestial Coordinate Projection

To avoid clustering stars at the poles or causing unsightly radial banding, we derived and implemented a Fibonacci Sphere / Golden-Angle Spiral algorithm.

The surface area of a spherical zone between two parallel planes is proportional to the vertical distance:

$$dA = 2\pi R \, dy$$

To achieve an isotropic, clump-free distribution across the celestial sphere of radius (R), each commit (i) out of total (N) commits is partitioned uniformly along the vertical interval ([-1, 1]):

$$y_i = 1 - \frac{2i + 1}{N}, \quad \text{for } i \in {0, 1, \dots, N-1}$$

The horizontal planar radius at height (y_i) is given by the Pythagorean theorem:

$$r_i = \sqrt{1 - y_i^2}$$

We increment the azimuthal angle (\theta) at each index by the Golden Angle (\theta_{\text{gold}}), derived from the golden ratio (\phi = \frac{1 + \sqrt{5}}{2}):

$$\theta_{\text{gold}} = 2\pi \left(1 - \frac{1}{\phi}\right) = \pi (3 - \sqrt{5}) \approx 2.399963 \text{ rad} \quad (\approx 137.508^\circ)$$

$$\theta_i = i \cdot \theta_{\text{gold}}$$

Converting from spherical to 3D Cartesian coordinates:

$$x_i = r_i \cos(\theta_i) \cdot R$$ $$y_i = y_i \cdot R$$ $$z_i = r_i \sin(\theta_i) \cdot R$$

Because (\theta_{\text{gold}}) is an irrational fraction of a circle, successive points never resonate along any rational divisor, guaranteeing an isotropic, mathematically optimal starfield.

2. Full-Stack Architecture & Defense-in-Depth

  • Presentation Tier: Next.js 14 App Router, React Three Fiber (R3F), Three.js, and Tailwind CSS. Custom post-processing bloom shaders render star glow with automatic GPU degradation scaling for mobile devices.
  • Persistence & Database: Neon Lakebase Serverless Postgres orchestrated via Drizzle ORM. All database operations follow the strict Repository Pattern (userRepository, commitRepository, projectRepository, constellationRepository) with zero raw SQL leaks.
  • Real-Time Webhook Pipeline: GitHub webhooks are ingested through an edge route authenticated via HMAC-SHA256 signature verification (X-Hub-Signature-256) using timing-safe comparisons to prevent timing attacks.
  • API Rate Limiting: Sliding-window rate limiters powered by Upstash Redis protect public endpoints and badge generation from denial-of-service degradation.

⚡ Challenges We Faced

  1. Three.js WebGL Line Geometry Singularities: During early constellation rendering, passing identical start and end vectors to line geometries caused zero-length vector normalizations, yielding NaN normals that silently discarded WebGL line meshes. We re-engineered the connector pipeline to pass distinct immutable coordinate pairs with static buffer attributes.
  2. Real-Time Webhook Ingestion Without Push Events: When users connect a GitHub webhook, GitHub initially fires a ping event rather than a push. Early builds didn't register repositories until the first subsequent push occurred. We overhauled the webhook route to inspect ping payloads and auto-provision repositories and branches immediately upon webhook installation.
  3. Cross-Timezone React Hydration Inconsistencies: Formatting UTC commit timestamps on a server in Washington, D.C. generated client-side hydration mismatches when viewed by users in different time zones. We resolved this by isolating localized formatters with hydration suppressors and skeleton loading states (— days).
  4. Bottom HUD Collision & Spatial Layout: With multiple controls (Autonomous Cinematic Tour, Reset View, Focus Latest Star, Wallpaper Export, and the Timeline Scrubber), horizontal button sprawl initially caused overlap on laptop screens. We solved this by vertically layering the camera dock cleanly above the scrubber bar with responsive breakpoints.

🏆 Accomplishments That We're Proud Of

  • Zero-Mock Architecture: Unlike common hackathon visualizers that rely on hardcoded static JSON arrays, CommitCosmos runs live on Neon Serverless Postgres with real GitHub webhooks and auto-syncing repositories.
  • Accessibility First: Designed an accessible 2D Table Modality with keyboard navigation (Tab / Arrow keys) and strict OS prefers-reduced-motion compliance that gracefully disables camera eases.
  • Autonomous Cinematic Tour: Gives judges and visitors a 1-click hands-free fly-through of the entire galaxy.
  • Embeddable README SVG Badges: Generates live, lightweight vector badges directly consumable by GitHub README.md files.

💡 What We Learned

  • The mathematics of spherical phyllotaxis and isotropic particle distributions.
  • Three.js draw-call budgeting and how to manage hundreds of emissive meshes without dropping below 60 FPS.
  • Defense-in-depth architecture in modern serverless full-stack web applications, combining HMAC cryptography, Neon database connection pooling, and strict TypeScript domain modeling.

🚀 What's Next for CommitCosmos

  • Multi-Galaxy Gravitational Mergers: Allowing developer teams and organizations to visualize team members' galaxies orbiting and colliding in a shared cosmic cluster.
  • AI Galaxy Astrologer: Using Neon AI Gateway / LLM integration to analyze commit message semantics and generate deep cosmic retrospectives on developer habits.
  • Augmented Reality (AR) Sky View: Projecting your 3D Git universe onto your ceiling using WebXR so you can fall asleep under your own constellations of code.

Built With

Share this project:

Updates

Submission history