Contribution Skyline
newA GitHub contribution year as a 3D skyline of glowing bars that twinkle and burst into pixels.
Data@abhiramkrishna/contribution-skyline
Drag Progress to watch the bars rise.
Customize
Changes show live, update the code and the page URL.
Loading controls…
Installation
three is a peer dependency, so your app ships a single copy.
pnpm add @abhiramkrishna/contribution-skyline threenpm install @abhiramkrishna/contribution-skyline threeyarn add @abhiramkrishna/contribution-skyline threebun add @abhiramkrishna/contribution-skyline threeProps
Same names in every wrapper. Vue and the Web Component take them in kebab-case.
| Prop | Default | Description |
|---|---|---|
| Bars | ||
progressnumber · 0–1 | Default1 | How far the bars have risen (0 = flat, 1 = full). Pass a function in code to drive it from scroll. |
barScalenumber · 0–3 | Default1 | Multiplier for bar heights. |
barOpacitynumber · 0–1 | Default0.85 | Opacity of the bars. |
staggernumber · 0–2 | Default0.55 | How much later each week rises than the one before (0 = all at once). |
glowStrengthnumber · 0–2 | Default1 | How strongly active days light up the grid tiles underneath. |
| Colours | ||
colorcolor | Defaultinherits | Bar and particle colour. Leave empty to follow the grid's highlight colour. |
| Twinkle | ||
twinkleboolean | Defaulttrue | Each bar dims briefly on its own 13–21 s cycle. |
twinkleDepthnumber · 0–1 | Default0.8 | How far a bar dims during a twinkle. |
| Bursts | ||
burstsboolean | Defaulttrue | The busiest days flash and burst into falling pixels. |
burstLevelnumber · 1–4 | Default4 | Minimum contribution level (1–4) that bursts. |
burstMinIntervalnumber · 0.5–30 | Default3.5 | Shortest gap between bursts from one bar, in seconds. |
burstMaxIntervalnumber · 0.5–30 | Default8 | Longest gap between bursts from one bar, in seconds. |
sparkSizenumber · 1–12 | Default5 | Size of the rising sparks, in CSS pixels. |
shardSizenumber · 0.5–8 | Default2.6 | Size of the shards that scatter on landing, in CSS pixels. |
| Motion | ||
reducedMotionProgressnumber · 0–1 | Default1 | Progress shown when motion is reduced, instead of the animated value. |
reducedMotion"auto" | "always" | "never" · standalone only | Default"auto" | auto follows prefers-reduced-motion; always renders a still frame; never always animates. |
| Scene | ||
floorboolean · standalone only | Defaulttrue | Show the tile floor under the bars. |
cameraElevationnumber · 0.1–1.4 · standalone only | Default0.5 | How steeply the camera looks down, in radians. |