Card Push Line

A headline lands, then the camera pushes in on a prompt card that types a slash command and prompt.

Installation

$ pnpm dlx shadcn@latest add @remocn/card-push-line

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CardPushLine } from "@/components/remocn/card-push-line";
 
const CardPushLineScene = () => (
  <CardPushLine
    line="You can just write it"
    command="/launch-video"
    prompt="a teaser for the 2.0 release"
    attachName="release-notes-2.0.md"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CardPushLine"
    component={CardPushLineScene}
    durationInFrames={144}
    fps={30}
    width={1280}
    height={720}
  />
);

The line headline lands word by word, then a prompt card pushes in. It types the command as a chip, attaches a file tile and types the prompt until the send button arms. Pass your own line, command, prompt and attachName; it ships light and dark 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.

Props14

Prop	Type	Default
line	string"You can just write it" Headline shown above the card.
command	string"/launch-video" Slash command typed as a chip.
prompt	string"a teaser for the 2.0 release" Request typed after the command.
placeholder	string"Describe your launch…" Placeholder text shown before typing starts.
modelLabel	string"Remocn 1" Label of the model selector in the card toolbar.
chipLabel	string"Brand kit" Label of the chip in the card toolbar.
attachName	string"release-notes-2.0.md" File name shown on the attachment tile.
attachMeta	string"Markdown · 18 KB" Meta text under the attachment name.
accent	string— Accent color. Defaults depend on theme.
ink	string— Text color override.
background	string— Background color override for the stage.
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.

linestring
Headline shown above the card.
Default"You can just write it"
commandstring
Slash command typed as a chip.
Default"/launch-video"
promptstring
Request typed after the command.
Default"a teaser for the 2.0 release"
placeholderstring
Placeholder text shown before typing starts.
Default"Describe your launch…"
modelLabelstring
Label of the model selector in the card toolbar.
Default"Remocn 1"
chipLabelstring
Label of the chip in the card toolbar.
Default"Brand kit"
attachNamestring
File name shown on the attachment tile.
Default"release-notes-2.0.md"
attachMetastring
Meta text under the attachment name.
Default"Markdown · 18 KB"
accentstring
Accent color. Defaults depend on theme.
inkstring
Text color override.
backgroundstring
Background color override for the stage.
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.