TypingAnimation
typing-animationReveals text character by character with configurable timing and cursor behavior.
Usage
Basic usage
Type the text word by word with a blinking cursor, and automatically hide the cursor after typing.
<TypingAnimation
text="Hulian — Composable design system"
className="text-2xl font-semibold text-foreground"
/>Typing speed
duration controls milliseconds per word (default 80), the smaller the faster.
<TypingAnimation
text="Faster typing speed"
duration={40}
className="text-xl font-medium text-foreground"
/>Hide cursor
When showCursor=false, the blinking cursor is not rendered and only the typing process is retained.
<TypingAnimation
text="Typing effect without cursor"
showCursor={false}
className="text-xl font-medium text-foreground"
/>Enter viewport trigger
startOnView=true (default), scroll into the viewport before starting typing, suitable for long pages.
<TypingAnimation
text="Scroll here to start typing"
startOnView
className="text-xl font-medium text-foreground"
/>When to use
Use TypingAnimation to reveal a string character by character with a blinking cursor, starting on viewport entry by default. It suits hero slogans and first-screen copy. Use WordRotate to cycle words in a fixed sentence, or Text for static content. State and IntersectionObserver make this a client component.
Import
import { TypingAnimation } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| text* | string | — | Text to be typed verbatim |
| duration | number | 80 | milliseconds per word |
| delay | number | 0 | Delay in milliseconds before start |
| startOnView | boolean | true | Start after entering the viewport; set false to start immediately |
| showCursor | boolean | true | Show flashing cursor |
Inherit ComponentPropsWithoutRef<"span"> (except children), such as className / style.
Example
<TypingAnimation
text="HulianUI — a composable design system"
className="text-2xl font-semibold text-foreground"
/>Start immediately (without entering the viewport, often used in the first screen):
<TypingAnimation text="Hulian" startOnView={false} duration={60} />Usage guidelines
startOnViewdefaults to true. If the component begins outside the viewport and the page never scrolls—such as a screenshot or headless check—it remains blank. SetstartOnView={false}for immediate first-screen or test rendering.- The
"use client"component may be nested under a server component but is not itself a pure RSC.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<TypingAnimation text="Hulian" duration={80} showCursor={true} />