clacky

Your GitHub graph, as a mechanical keyboard.

Every day is a keycap. Press one to feel it travel, hear the switch, and see what you shipped. Drop it into your portfolio in one line.

Star on GitHub
clackySoundIdle
Loading contributions…

Use the arrow keys to move between days. Press Enter or Space to press a key.

Press any key, or just start typing your name.

Customise

Make it yours

Every option below is a prop. The snippet further down updates as you play.

Theme
Eight presets, light & dark
Level colours
Click a keycap to pick
Switch
Tactile
Volume
50
Mode
The graph’s colour scheme
Ghost typing
Idle keys press themselves; stops when you interact
Get the code

One line to drop in

Works in React, or anywhere HTML does: Astro, Vue, Svelte and plain pages.

$ npm install clacky motion
import { Clacky } from 'clacky/react';

export function Contributions() {
  return (
    <Clacky
      username="Rishabjs03"
      yearSelector
      ghostTyping
      onKeyPress={(day) => console.log(day.date, day.count)}
    />
  );
}