Contribution music easter egg

What does this MR do and why?

This turns a user's contribution graph into a song. It's a PlayLabs project, a design-team effort that ships small delightful touches and easter eggs into GitLab, and this is one of them.

It plays the same 12 months the profile's contribution calendar shows. Each week becomes a column, or a beat, and each weekday row is a pitch in a scale. The key, scale, and tempo all come from the user's own activity, so different profiles get different songs. It's a Web Audio synth running entirely in the browser, no backend involved.

There are three ways in:

1. A small play button next to the legend on the legacy profile activity calendar. It plays the song on the calendar itself, recolors the passed days in GitLab brand colors that fade back out, then shows a pulsing button that opens the full player modal.
2. Clicking any day in the calendar plays that day's note. Click the same day five times quickly and the modal opens.
3. A profile URL with ?play appended (for example, https://gitlab.com/<username>?play) opens the modal directly. This is the link meant for sharing.

The modal is full-viewport and dark. It opens on an intro with personalized copy (date range, total contributions, key, scale, BPM) and a line about GitLab Transcend, whose text changes before, during, and after the event and disappears entirely after November 1, 2026. From there it moves into the player: the grid, a playhead, a visualizer, and a keyboard-navigable grid with a single tab stop and arrow-key navigation, plus screen reader labels per day.

On your own profile you get copy-link and download-video actions. The video is recorded in the browser from a canvas using MediaRecorder, and it ends on a card with a QR code (I wrote the encoder for this MR rather than pulling in a dependency) that points back to the share link. On someone else's profile you get a "play your own song" prompt or a sign-in link instead. There's an empty state for anyone with fewer than four active days, an unsupported state for browsers without Web Audio, and the visualizer respects prefers-reduced-motion.

The other half of the reason this exists: it's meant to be a shareable moment tied to GitLab Transcend, the event on October 6, 2026 (https://about.gitlab.com/events/transcend/virtual/). Because the point is for people to actually share it, it's on by default. It's behind the contribution_music_easter_egg feature flag, an ops flag with default_enabled: true, so it can be turned off on GitLab.com with ChatOps during the event instead of a revert and a deploy. It's ops rather than gitlab_com_derisk because gitlab_com_derisk flags can't default to on.

Containment and risk

• Runs only on GitLab.com. The whole thing is gated on gon.dot_com, so on self-managed and Dedicated it returns before doing anything. The code still ships in the profile page bundle there.
• Only runs on user profile pages.
• The only change to existing frontend code is in app/assets/javascripts/pages/users/index.js: an import and a call to initContributionMusic(). It runs before initUserProfile on purpose, since the Vue activity calendar replaces the element this code reads the username from. Everything else lives in new files under app/assets/javascripts/easter_eggs/contribution_music/.
• No database, API, or GraphQL changes. The only backend change is UsersController pushing the flag to the frontend on show. It reads the same calendar JSON the profile calendar already fetches, through AjaxCache, so there's no extra request.
• No new npm dependencies, including for the QR code encoder.
• New translatable strings are in locale/gitlab.pot.
• The in-place player (the button next to the legend) only attaches to the legacy calendar, since the Vue activity calendar isn't in production yet. The modal and the click-to-play trigger work with both.
• The one change visible to every GitLab.com profile visitor without them doing anything special is the small play button next to the legend. Everything past that point (the modal, the video, the recoloring) is triggered by a deliberate action: clicking the button, clicking a day five times, or visiting a ?play link.

To turn it off on GitLab.com, disable the flag with /chatops gitlab run feature set contribution_music_easter_egg false. To remove it entirely, revert the MR.

How the commits are organized

Each commit builds on the previous one, so I'd suggest reviewing them in order:

1. Song model and synth engine (constants.js, synth.js, utils.js, strings in gitlab.pot)
2. Video export and the drawing helpers it shares with the player (video.js, qr.js, visualizer.js, shimmer.js, empty_wave.js, logo SVGs)
3. The player modal component
4. Wiring it into GitLab.com profile pages, the in-place player, and the click trigger
5. The contribution_music_easter_egg ops flag: its YAML definition, the push in UsersController#show, and the early return in initContributionMusic()

Nothing is visible to users until the fourth commit.

Screenshots or screen recordings

Where	What
Legacy calendar legend, before (current)
Legacy calendar legend, after
In-place playback
Modal intro, own profile
Modal intro, other profile
Modal playing (still)
Modal playing (narrow viewport)
inline then modal playing (Video)
Empty state
Download video
Light mode
Dark mode
Narrow viewport

How to set up and validate locally

1. Enable GitLab.com simulation mode in your GDK: set GITLAB_SIMULATE_SAAS=1 (for example in env.runit) and restart GDK. Without this, nothing on the profile page should change.
2. Visit a profile with some contribution history, for example http://gdk.test:3000/root.
3. Use the play button next to the calendar legend and confirm the in-place playback, recolor, and pulsing button all work.
4. Click a single day in the calendar five times quickly and confirm the modal opens.
5. Visit http://gdk.test:3000/root?play directly and confirm the modal opens on load.
6. Check another user's profile and confirm you get the "play your own song" or sign-in prompt instead of the download/copy-link actions.
7. Check a profile with fewer than four active days and confirm the empty state.

References

• PlayLabs tracking issue: gitlab-org/gitlab-services/design.gitlab.com#3673
• GitLab Transcend: https://about.gitlab.com/events/transcend/virtual/

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.