# Changelog Scroll
URL: https://remocn.dev/docs/typography/changelog-scroll

A changelog list scrolls and one row enlarges into a highlighted headline entry

- Install: `npx shadcn@latest add @remocn/changelog-scroll`
- Vibe: tech
- Natural length: 108f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/changelog-scroll
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ChangelogScroll } from "@/components/remocn/changelog-scroll";

const ChangelogScrollScene = () => <ChangelogScroll title="Changelog" url="remocn.dev/changelog" focus={9} />;

export const RemotionRoot = () => (
  <Composition
    id="ChangelogScroll"
    component={ChangelogScrollScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A tall changelog list scrolls fast then eases to a stop on one row, which enlarges into a highlighted entry on a glowing panel while the title and URL chrome fade in. Pass `entries` (date, text and optional version), `focus` for the row index to enlarge, `title` and `url`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `entries` | `ChangelogEntry[]` | `DEFAULT_ENTRIES` | Changelog rows with date, text and an optional version. |
| `focus` | `number` | `9` | Index of the entry that enlarges into the headline. |
| `title` | `string` | `"Changelog"` | Heading shown once the entry expands. |
| `url` | `string` | `"remocn.dev/changelog"` | Address shown in the chrome after the expand. |
| `logo` | `React.ReactNode` | — | Custom logo node; defaults to the Remocn logo. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the focused entry panel. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |

## Use when
- A what's-new beat that shows a long history of releases and zooms into the latest one.
- A release-notes video where one entry deserves the headline treatment.
- A sense-of-momentum shot showing how often a product ships.

## Don't use when
- You want a live terminal-style log instead of a list — use `terminal-simulator`.
- You want a short numbered feature list — use `index-list`.
- You have three headline benefits, not a history — use `feature-trio`.