Week in Merges

Add it to your video

It runs for 16 seconds at 1080×1350. Paste this into your composition:

index.html

<div
  data-composition-id="week-in-merges"
  data-composition-src="compositions/week-in-merges.html"
  data-start="0"
  data-duration="16"
  data-track-index="1"
  data-width="1080"
  data-height="1350"
></div>

Move it in time with data-start. Put it on a different timeline row with data-track-index. See data attributes for the rest.

Change how it looks

Set these CSS variables on the block:

eyebrow — Eyebrow. Defaults to ACME / WEEK IN MERGES.
title — Title. Defaults to Pull requests merged this week.
period — Period. Defaults to 1 September - 7 September 2026 · America/Los_Angeles.
total — Total. Defaults to 12 PRs.
footer — Footer. Defaults to Speed proportional to merges · By PR author.
source — Source line. Defaults to Example org · 1 repo · Bots · 0.
rows — Rows (JSON array of name, merges, avatar). Defaults to [{"name":"Ada","merges":12,"avatar":""},{"name":"Bao","merges":7,"avatar":""},{"name":"Cam","merges":4,"avatar":""},{"name":"Dee","merges":2,"avatar":""},{"name":"Eli","merges":1,"avatar":""}].
rows_max — Maximum rows. Defaults to 12.
overflow — Overflow line. Defaults to “.

Variables

Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element:

Variable	Default	Accepts	What it does
`eyebrow`	`ACME / WEEK IN MERGES`	string
`title`	`Pull requests merged this week`	string
`period`	`1 September - 7 September 2026 · America/Los_Angeles`	string
`total`	`12 PRs`	string
`footer`	`Speed proportional to merges · By PR author`	string
`source`	`Example org · 1 repo · Bots · 0`	string
`rows`	`[{"name":"Ada","merges":12,"avatar":""},{"name":"Bao","merges":7,"avatar":""},{"name":"Cam","merges":4,"avatar":""},{"name":"Dee","merges":2,"avatar":""},{"name":"Eli","merges":1,"avatar":""}]`	string
`rows_max`	`12`	1 to 12, step 1	Authors drawn, highest merge count first.
`overflow`	“	string	Line for everyone past the cap. Empty writes it from the rows left out.

Set them with data-variable-values on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one:

<div
  data-composition-id="week-in-merges"
  data-composition-src="compositions/week-in-merges.html"
  data-variable-values='{"eyebrow":"ACME / WEEK IN MERGES","title":"Pull requests merged this week","period":"1 September - 7 September 2026 · America/Los_Angeles","total":"12 PRs","footer":"Speed proportional to merges · By PR author","source":"Example org · 1 repo · Bots · 0","rows":"[{\"name\":\"Ada\",\"merges\":12,\"avatar\":\"\"},{\"name\":\"Bao\",\"merges\":7,\"avatar\":\"\"},{\"name\":\"Cam\",\"merges\":4,\"avatar\":\"\"},{\"name\":\"Dee\",\"merges\":2,\"avatar\":\"\"},{\"name\":\"Eli\",\"merges\":1,\"avatar\":\"\"}]","rows_max":12,"overflow":""}'
></div>

Tagged data chart ranking leaderboard.

Catalog

Add it to your video

Change how it looks

Variables

Related topics