Changelog Entry
A release note reading itself out — version, a rule drawing under it, then each change behind its own coloured tag.
SceneScenes
$ 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. |