Photo Caret
A multi-line headline types word by word with a hopping caret while product photos float around it.
$ pnpm dlx shadcn@latest add @remocn/photo-caretUsage
// src/Root.tsx
import { Composition } from "remotion";
import { PhotoCaret } from "@/components/remocn/photo-caret";
const PhotoCaretScene = () => (
<PhotoCaret
text="Your launch, / your name / on it."
accentWord="it."
src={staticFile("shots/hero.jpg")}
images={[staticFile("shots/one.jpg"), staticFile("shots/two.jpg")]}
/>
);
export const RemotionRoot = () => (
<Composition
id="PhotoCaret"
component={PhotoCaretScene}
durationInFrames={126}
fps={30}
width={1280}
height={720}
/>
);A caret hops from word to word as the headline types, with an image tile and floating photos popping in around it, and the accent word lands last. Pass text (use ' / ' for line breaks), accentWord, and your own src and images since the default photos only exist in the Remocn repo; 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 |
|---|---|---|
| text | string"Your launch, / your name / on it." Headline; ' / ' marks line breaks | |
| accentWord | string"it." Word shown in the accent color; defaults to the last | |
| src | string— Main image tile next to the text; pass your own | |
| images | string[]— Floating photo URLs around the text; pass your own | |
| accent | string— Color of the accent word and caret | |
| ink | string— Text color override | |
| theme | "dark" | "light""dark" Ships light and dark palettes | |
| ground | GshPresetId— Gradient ground preset id | |
| groundParams | Partial<GradientParams>— Partial gradient parameters to tune the ground | |
| firstStep | number12 Frames before the second word; later steps speed up | |
- textstring
Headline; ' / ' marks line breaks
Default
"Your launch, / your name / on it." - accentWordstring
Word shown in the accent color; defaults to the last
Default
"it." - srcstring
Main image tile next to the text; pass your own
- imagesstring[]
Floating photo URLs around the text; pass your own
- accentstring
Color of the accent word and caret
- inkstring
Text color override
- theme"dark" | "light"
Ships light and dark palettes
Default
"dark" - groundGshPresetId
Gradient ground preset id
- groundParamsPartial<GradientParams>
Partial gradient parameters to tune the ground
- firstStepnumber
Frames before the second word; later steps speed up
Default
12