Moves Up

A roadmap list under Now, Next and Later where each shipped item exits and the rest move up and grow.

Installation

$ pnpm dlx shadcn@latest add @remocn/moves-up

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { MovesUp } from "@/components/remocn/moves-up";
 
const MovesUpScene = () => (
  <MovesUp
    items={["Captions", "Voiceover", "Vertical cuts", "Brand kits", "Templates"]}
    shipped="live"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="MovesUp"
    component={MovesUpScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

The first three items settle under the Now, Next and Later labels at descending sizes. Every item past the third then advances the queue: the current Now item gets a shipped tag and exits upward while the others move up and enlarge. Pass five or more items to see movement; timing adapts to the composition length, and 152 frames is the uncompressed length for five items. It ships light and dark.

Props7

Prop	Type	Default
items	string[]DEFAULT_ITEMS Roadmap items in order; the first three show, the rest queue behind them.
labels	[string, string, string]["Now", "Next", "Later"] Three row labels, for the current, next and later rows.
shipped	string"shipped" Tag shown beside an item as it ships.
accent	string— Color of the Now label and the shipped tag.
background	string— Background fill; pass "transparent" to drop it.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Light or dark palette.

itemsstring[]
Roadmap items in order; the first three show, the rest queue behind them.
DefaultDEFAULT_ITEMS
labels[string, string, string]
Three row labels, for the current, next and later rows.
Default["Now", "Next", "Later"]
shippedstring
Tag shown beside an item as it ships.
Default"shipped"
accentstring
Color of the Now label and the shipped tag.
backgroundstring
Background fill; pass "transparent" to drop it.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"