Letter Gate

The camera pushes into a giant letter pair and the gap opens like a gate onto the next scene

Installation

$ pnpm dlx shadcn@latest add @remocn/letter-gate

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LetterGateDemo } from "@/components/remocn/letter-gate";
 
const LetterGateDemoScene = () => (
  <LetterGateDemo
    text="Start building"
    gate="bu"
    prompt="A launch film for v2"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LetterGateDemo"
    component={LetterGateDemoScene}
    durationInFrames={118}
    fps={30}
    width={1280}
    height={720}
  />
);

Scene A shows a short headline while the camera punches in twice. It then pushes into the letter pair named by gate, and the pair opens like a gate onto scene B, a prompt box with a label and a next step. Set text and make sure gate is a two-letter run inside it, then pass prompt, placeholder, label and nextLabel for scene B; 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.

Props13

Prop	Type	Default
theme	"dark" \| "light""dark" Light or dark palette for both scenes
accent	string— Accent color; defaults to the theme accent
text	string"Start building" Headline shown in scene A; the gate letters are taken from it
gate	string"bu" Two-letter run inside text that the camera pushes into
prompt	string"A launch film for v2" Text typed into the scene B prompt box
placeholder	string"Describe your launch" Placeholder shown in the prompt box before typing
label	string"Prompt" Label above the prompt box in scene B
nextLabel	string"Script" Label typed into the next-step node after the press
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
transition	LetterGateProps— Overrides for the transition presentation props

theme"dark" | "light"
Light or dark palette for both scenes
Default"dark"
accentstring
Accent color; defaults to the theme accent
textstring
Headline shown in scene A; the gate letters are taken from it
Default"Start building"
gatestring
Two-letter run inside text that the camera pushes into
Default"bu"
promptstring
Text typed into the scene B prompt box
Default"A launch film for v2"
placeholderstring
Placeholder shown in the prompt box before typing
Default"Describe your launch"
labelstring
Label above the prompt box in scene B
Default"Prompt"
nextLabelstring
Label typed into the next-step node after the press
Default"Script"
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
transitionLetterGateProps
Overrides for the transition presentation props