Contribution skyline
Options
Every option of @abhiramkrishna/contribution-skyline, generated from the package's schema.
All options are live: change them with setOptions() on the standalone skyline or on the layer, or pass them to a wrapper as props. Options marked “standalone only” only apply to the standalone skyline; as a layer, it follows the grid’s own motion and floor.
const skyline = new ContributionSkyline(el, data, { barScale: 1.4, bursts: false });
skyline.setOptions({ twinkleDepth: 0.5, floor: false });progress can also be a function in code. It’s read every frame, which is how you drive the rise from scroll. These tables are generated from CONTRIBUTION_SKYLINE_SCHEMA.
| 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. |