Tilt Settle List

A tilted player card settles beside a ranked list of top scenes

Installation

$ pnpm dlx shadcn@latest add @remocn/tilt-settle-list

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TiltSettleList } from "@/components/remocn/tilt-settle-list";
 
const TiltSettleListScene = () => (
  <TiltSettleList title="Your top scenes" heroTitle="Zoom Blur" heroMeta="Transition · 2.4k renders" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TiltSettleList"
    component={TiltSettleListScene}
    durationInFrames={126}
    fps={30}
    width={1280}
    height={720}
  />
);

A title appears, a tilted player card swings in and settles while a checklist of lines steps forward one by one, then ranked rows with thumbnails slide in. Pass title, heroTitle, heroMeta, lines and rows to make it yours, and heroSrc plus src on each row with your own images (the default files only exist in the Remocn repo). It ships dark and light through theme.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props12

Prop	Type	Default
title	string"Your top scenes" Heading above the list.
accentWord	number1 Index of the title word drawn in the accent color.
heroTitle	string"Zoom Blur" Title on the tilted player card.
heroMeta	string"Transition · 2.4k renders" Secondary line under the hero title.
heroSrc	string— Cover image URL for the player card; the default ships with Remocn only.
lines	string[]DEFAULT_LINES Checklist lines that step forward one after another.
rows	ListRow[]— Ranked rows with title, meta and optional thumbnail src.
theme	"dark" \| "light""dark" Visual theme; ships dark and light.
accent	string— Accent color; defaults per theme.
ink	string— Main text color; defaults per theme.
ground	GshPresetId— Preset id for the gradients.sh background shader.
groundParams	Partial<GradientParams>— Overrides for the shader parameters of the chosen ground.

titlestring
Heading above the list.
Default"Your top scenes"
accentWordnumber
Index of the title word drawn in the accent color.
Default1
heroTitlestring
Title on the tilted player card.
Default"Zoom Blur"
heroMetastring
Secondary line under the hero title.
Default"Transition · 2.4k renders"
heroSrcstring
Cover image URL for the player card; the default ships with Remocn only.
linesstring[]
Checklist lines that step forward one after another.
DefaultDEFAULT_LINES
rowsListRow[]
Ranked rows with title, meta and optional thumbnail src.
theme"dark" | "light"
Visual theme; ships dark and light.
Default"dark"
accentstring
Accent color; defaults per theme.
inkstring
Main text color; defaults per theme.
groundGshPresetId
Preset id for the gradients.sh background shader.
groundParamsPartial<GradientParams>
Overrides for the shader parameters of the chosen ground.