Phrase List Bridge

A phrase splits as a floating list deals in, a highlight picks one row, and it closes back in.

Installation

$ pnpm dlx shadcn@latest add @remocn/phrase-list-bridge

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PhraseListBridge } from "@/components/remocn/phrase-list-bridge";
 
const PhraseListBridgeScene = () => (
  <PhraseListBridge
    left="Pick from"
    right="ready-made scenes"
    items={["Hero intro", "Feature tour", "Pricing beat", "Closing card"]}
    pickedIndex={1}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PhraseListBridge"
    component={PhraseListBridgeScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

The left and right phrases appear as one line, then split apart as a floating panel deals in your items between them. A highlight steps down to the row at pickedIndex, which turns accent-colored with a check while the other rows fall away, and the panel closes into a chip that bridges the two phrases. Pass left, right, up to eight items, and pickedIndex; the default items are Remocn component names. It ships light and dark, each over a gradient ground.

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

Props10

Prop	Type	Default
left	string"Browse through" Text on the left of the final line.
right	string"ready-made scenes" Text on the right of the final line.
items	string[]— List rows shown in the panel; only the first eight are used.
pickedIndex	number2 Zero-based index of the row that gets picked.
accent	string— Color of the picked row and the final chip.
ink	string— Text color; overrides the theme ink.
background	string— Base background color behind the gradient ground.
theme	"dark" \| "light""dark" Light or dark palette.
ground	GshPresetId— Gradient shader preset id for the background.
groundParams	Partial<GradientParams>— Overrides for the gradient shader parameters.

leftstring
Text on the left of the final line.
Default"Browse through"
rightstring
Text on the right of the final line.
Default"ready-made scenes"
itemsstring[]
List rows shown in the panel; only the first eight are used.
pickedIndexnumber
Zero-based index of the row that gets picked.
Default2
accentstring
Color of the picked row and the final chip.
inkstring
Text color; overrides the theme ink.
backgroundstring
Base background color behind the gradient ground.
theme"dark" | "light"
Light or dark palette.
Default"dark"
groundGshPresetId
Gradient shader preset id for the background.
groundParamsPartial<GradientParams>
Overrides for the gradient shader parameters.