Story Text
Story-style text types in word by word on rounded gradient highlight bubbles that change style
$ pnpm dlx shadcn@latest add @remocn/story-textUsage
// src/Root.tsx
import { Composition } from "remotion";
import { StoryText } from "@/components/remocn/story-text";
const StoryTextScene = () => (
<StoryText text="okay, it's live — the update you kept asking for is finally here" />
);
export const RemotionRoot = () => (
<Composition
id="StoryText"
component={StoryTextScene}
durationInFrames={165}
fps={30}
width={1280}
height={720}
/>
);Words pop in one at a time with a caret, each sitting on a merged rounded highlight bubble that wraps across lines. After the last word the highlight cycles through outline, plain and filled again. Pass your sentence as text; measure sets the line width as a fraction of the frame. Ships dark and light via 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.
Props7
| Prop | Type | Default |
|---|---|---|
| text | string"okay, it’s live — the update you kept asking for is finally here" The sentence to type. Wraps onto lines inside the measure. | |
| measure | number— Line width as a fraction of the frame, before wrapping. | |
| accent | string"#3B5BFD" Color of the caret. | |
| theme | "dark" | "light""dark" Color scheme. Ships dark and light. | |
| ground | GshPresetId— gradients.sh preset id for the animated ground. | |
| groundParams | Partial<GradientParams>— Overrides for the ground shader parameters. | |
| speed | number1 Playback speed multiplier for the whole timeline. | |
- textstring
The sentence to type. Wraps onto lines inside the measure.
Default
"okay, it’s live — the update you kept asking for is finally here" - measurenumber
Line width as a fraction of the frame, before wrapping.
- accentstring
Color of the caret.
Default
"#3B5BFD" - theme"dark" | "light"
Color scheme. Ships dark and light.
Default
"dark" - groundGshPresetId
gradients.sh preset id for the animated ground.
- groundParamsPartial<GradientParams>
Overrides for the ground shader parameters.
- speednumber
Playback speed multiplier for the whole timeline.
Default
1