Caret Dolly

A prompt box types a request while the camera dollies along the caret and punches in on one phrase.

Installation

$ pnpm dlx shadcn@latest add @remocn/caret-dolly

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CaretDolly } from "@/components/remocn/caret-dolly";
 
const CaretDollyScene = () => (
  <CaretDolly
    prompt="Make a launch video for our new app with a bold title and a calm ending"
    focus="launch video"
    modelLabel="Remocn 1"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CaretDolly"
    component={CaretDollyScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

The camera rides the caret as the prompt types, then punches in huge on the focus phrase, pulls back to show the full box and types the rest. A cursor then presses the send button. Pass your own prompt and a focus phrase that occurs inside it; 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.

Props10

Prop	Type	Default
prompt	string"Make a launch video for our new app with a bold title, product shots and a calm ending" Full sentence typed into the prompt box.
focus	string"launch video" Phrase inside the prompt that gets the giant close-up.
chipLabel	string"Video" Label of the chip in the box toolbar.
modelLabel	string"Remocn 1" Label of the model selector in the box toolbar.
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.

promptstring
Full sentence typed into the prompt box.
Default"Make a launch video for our new app with a bold title, product shots and a calm ending"
focusstring
Phrase inside the prompt that gets the giant close-up.
Default"launch video"
chipLabelstring
Label of the chip in the box toolbar.
Default"Video"
modelLabelstring
Label of the model selector in the box toolbar.
Default"Remocn 1"
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.