Cooling Type
A sentence types out glowing hot and cools to ink, ending on an italic serif word and a caret.
$ pnpm dlx shadcn@latest add @remocn/cooling-typeUsage
// src/Root.tsx
import { Composition } from "remotion";
import { CoolingType } from "@/components/remocn/cooling-type";
const CoolingTypeScene = () => (
<CoolingType
text="What if your launch video could write itself?"
accentWord="itself?"
charFrames={1.6}
/>
);
export const RemotionRoot = () => (
<Composition
id="CoolingType"
component={CoolingTypeScene}
durationInFrames={150}
fps={30}
width={1280}
height={720}
/>
);Characters type in with a slightly irregular rhythm, each one starting in a hot color and cooling to the ink color; the accent word breathes in as serif italic and a caret finishes the line. Pass text and accentWord, and tune charFrames and coolFrames for pace; 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.
Props12
| Prop | Type | Default |
|---|---|---|
| text | string"What if your launch video could write itself?" Sentence to type out | |
| accentWord | string"itself?" Word in the text set in serif italic | |
| hot | string— Color of freshly typed characters | |
| accent | string— Color of the accent word and caret | |
| ink | string— Settled text color | |
| 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 | |
| startAt | numberBEAT.start Frame the first character appears | |
| charFrames | number1.6 Frames per character before pacing variation | |
| coolFrames | number20 Frames for a character to cool from hot to ink | |
| seed | number5 Seed for the typing rhythm jitter | |
- textstring
Sentence to type out
Default
"What if your launch video could write itself?" - accentWordstring
Word in the text set in serif italic
Default
"itself?" - hotstring
Color of freshly typed characters
- accentstring
Color of the accent word and caret
- inkstring
Settled text color
- theme"dark" | "light"
Ships light and dark palettes
Default
"dark" - groundGshPresetId
Gradient ground preset id
- groundParamsPartial<GradientParams>
Partial gradient parameters to tune the ground
- startAtnumber
Frame the first character appears
Default
BEAT.start - charFramesnumber
Frames per character before pacing variation
Default
1.6 - coolFramesnumber
Frames for a character to cool from hot to ink
Default
20 - seednumber
Seed for the typing rhythm jitter
Default
5