Path Text
Text starts along a loose hand-drawn path, then straightens into a clean line with an italic tail.
$ pnpm dlx shadcn@latest add @remocn/path-textUsage
// src/Root.tsx
import { Composition } from "remotion";
import { PathText } from "@/components/remocn/path-text";
const PathTextScene = () => (
<PathText text="From rough to ready." italicWords={1} looseness={0.15} />
);
export const RemotionRoot = () => (
<Composition
id="PathText"
component={PathTextScene}
durationInFrames={130}
fps={30}
width={1280}
height={720}
/>
);The text is drawn along a wobbly path, then the path flattens and thins as the letters straighten into a clean line, with the last words in italic. Pass text, italicWords and looseness; it ships light and dark through theme.
Props6
| Prop | Type | Default |
|---|---|---|
| text | string"From rough to ready." Text laid along the path | |
| italicWords | number1 Number of trailing words set in italic | |
| looseness | number0.15 How wobbly the starting path is; 0 is flat | |
| theme | "dark" | "light""dark" Ships light and dark palettes | |
| speed | number1 Playback speed multiplier | |
| accent | string— Accent color for the stroke gradient | |
- textstring
Text laid along the path
Default
"From rough to ready." - italicWordsnumber
Number of trailing words set in italic
Default
1 - loosenessnumber
How wobbly the starting path is; 0 is flat
Default
0.15 - theme"dark" | "light"
Ships light and dark palettes
Default
"dark" - speednumber
Playback speed multiplier
Default
1 - accentstring
Accent color for the stroke gradient