Typing Text
A Remotion video component that animates text with a typewriter effect.
Installation
CLI
Manual
Create a new file, for example, at src/components/clippkit/typing-text.tsx
(or your preferred location) and paste the following code into it.
Usage
Once the TypingText
component is added to your project (either via CLI or Manually), you can integrate it into your Remotion project by importing it and defining a Composition
.
Prerequisite
Ensure you have a Remotion project set up. If not, please refer to the Remotion documentation to get started.
Project Structure Example
Here’s an example folder layout showing where to place the component and how it fits into a typical Remotion project
Define a Composition
In your Remotion project's entry file (commonly src/Root.tsx
, src/index.tsx
, app/main.tsx
), import TypingText
and define a Composition
.
API Reference
The component exported as TypingText
(e.g., from apps/docs/ui/typing-text.tsx
or your project's component path) accepts the following props to customize its animation and appearance:
Prop | Type | Default Value | Description |
---|---|---|---|
text | string | "TYPE ME..." | The text content to display. |
textColor | string | "white" | The color of the text. Accepts any valid CSS color value. |
cursorColor | string | "white" | The color of the cursor. Accepts any valid CSS color value. |
fontSize | string | "3rem" | The font size of the text. Accepts any valid CSS font-size value. |
fontFamily | string | "'Courier New', monospace" | The font family of the text. Accepts any valid CSS font-family value. |
fontWeight | string | "bold" | The font weight of the text. Accepts any valid CSS font-weight value. |
durationInFramesToType | number | text.length * 5 | Total frames to type out the entire text. Defaults to 5 frames per character. |
cursorBlinkSpeed | number | 15 | Frames for one blink cycle of the cursor (e.g., 15 for a blink every 15 frames). |