Changelog Entry
A release note reading itself out. Version, a rule drawing under it, then each change behind its own coloured tag.
Scene
$ npx remotion-ui@latest add changelog-entryThe version lands first at display size, a rule draws out from the left beneath it, and the changes follow one at a time. Each row's tag arrives a fraction before its sentence, because the kind of change is what a viewer scans for: by the time they read the sentence they already know whether it is an addition or a fix.
Tags are fixed width rather than sized to their label. That is what lets every sentence share a left edge; a column of ragged text beside ragged tags is the fastest way to make a changelog look unmaintained.
Kinds are added, fixed, changed and removed, each with its own colour
(green, blue, amber, red), and kindColors overrides any of them without you
having to supply the rest.
The rule draws rather than fades. It reads as the header being underlined, which is a beat in the scene; a fading line reads as a transition and pulls attention away from the version it belongs to.
Five or six rows is the ceiling before the card outgrows a 1080p frame. Split a larger release across two entries rather than shrinking the type.
Tags are fixed width so every sentence shares a left edge: ragged text beside ragged tags is what makes a changelog look unmaintained. The tag lands before its sentence because the kind of change is what a viewer scans for. Five or six rows is the ceiling before the card outgrows a 1080p frame; split a larger release into two entries.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/changelog-entry- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: changes, version, date, summary, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { ChangelogEntry } from "@/remotion/scenes/changelog-entry";
<ChangelogEntry
version="v2.4.0"
date="16 August"
summary="Captions, webhooks, and a queue that stops sulking."
changes={[
{ kind: "added", text: "Caption presets for nine languages" },
{ kind: "fixed", text: "Retry backoff no longer stalls the queue" },
{ kind: "removed", text: "Legacy waveform atom" },
]}
holdSeconds={3.4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| changes | ChangeRow[] | 5 sample changes | A kind (added, fixed, changed or removed) and the sentence beside it. |
| version | string | "v2.4.0" | Version string, set at display size. |
| date | string | "16 August" | Date beside the version. |
| summary | string | "Captions, webhooks, and a queue that stops sulking." | Headline under the version. Omit for releases without one. |
| kindColors | Partial<Record<ChangeKind, string>> | green / blue / amber / red | Override any tag colour without supplying the rest. |
| startAtSeconds | number | 0.66 | Second the first change row arrives. |
| staggerSeconds | number | 0.28 | Seconds between rows. Each sentence trails its own tag by 0.08s. |
| holdSeconds | number | - | Seconds the finished entry holds before it retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Fallback tag colour for kinds with no colour set. |
| backgroundColor | string | - | Page behind the card. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |