Caret Collapse

A line of typed text crops down to its blinking caret, which glides over and opens into a prompt screen

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CaretCollapseDemo } from "@/components/remocn/caret-collapse";
 
const CaretCollapseDemoScene = () => (
  <CaretCollapseDemo
    url="remocn.dev/launch"
    question="What will you launch next?"
    prompt="Make a 30-second launch film for our 2.0 release"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CaretCollapseDemo"
    component={CaretCollapseDemoScene}
    durationInFrames={132}
    fps={30}
    width={1280}
    height={720}
  />
);

Scene A types a URL with a short label after it. The frame crops down to the caret, which blinks off, glides to the prompt position and opens into scene B, a composer with a question heading and a prompt typed in. Pass url, label, question and prompt; it ships light and dark.

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
theme	"dark" \| "light""dark" Light or dark palette for both scenes
accent	string— Caret color; defaults to the theme caret
url	string"remocn.dev/launch" URL typed in scene A
label	string"is live" Short label shown after the URL
question	string"What will you launch next?" Heading above the prompt in scene B
prompt	string"Make a 30-second launch film for our 2.0 release" Text typed into the scene B prompt box
ground	GshPresetId— Preset id for the scene A gradients.sh shader ground
groundParams	Partial<GradientParams>— Overrides for the scene A shader parameters
groundB	GshPresetId— Preset id for the scene B gradients.sh shader ground
groundParamsB	Partial<GradientParams>— Overrides for the scene B shader parameters

theme"dark" | "light"
Light or dark palette for both scenes
Default"dark"
accentstring
Caret color; defaults to the theme caret
urlstring
URL typed in scene A
Default"remocn.dev/launch"
labelstring
Short label shown after the URL
Default"is live"
questionstring
Heading above the prompt in scene B
Default"What will you launch next?"
promptstring
Text typed into the scene B prompt box
Default"Make a 30-second launch film for our 2.0 release"
groundGshPresetId
Preset id for the scene A gradients.sh shader ground
groundParamsPartial<GradientParams>
Overrides for the scene A shader parameters
groundBGshPresetId
Preset id for the scene B gradients.sh shader ground
groundParamsBPartial<GradientParams>
Overrides for the scene B shader parameters