Changelog Scroll
A changelog list scrolls and one row enlarges into a highlighted headline entry
$ pnpm dlx shadcn@latest add @remocn/changelog-scrollUsage
// 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.
Props8
| Prop | Type | Default |
|---|---|---|
| entries | ChangelogEntry[]DEFAULT_ENTRIES Changelog rows with date, text and an optional version. | |
| focus | number9 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 | number1 Playback multiplier for the whole timeline. | |
- entriesChangelogEntry[]
Changelog rows with date, text and an optional version.
Default
DEFAULT_ENTRIES - focusnumber
Index of the entry that enlarges into the headline.
Default
9 - titlestring
Heading shown once the entry expands.
Default
"Changelog" - urlstring
Address shown in the chrome after the expand.
Default
"remocn.dev/changelog" - logoReact.ReactNode
Custom logo node; defaults to the Remocn logo.
- accentstring
Accent color of the focused entry panel.
Default
"#3B5BFD" - theme"dark" | "light"
Color scheme; ships dark and light.
Default
"dark" - speednumber
Playback multiplier for the whole timeline.
Default
1