TypingAnimation

A dynamic typing animation that cycles through multiple text strings, creating an eye‑catching typewriter effect for headlines and other prominent text areas.

Use Cases

• Hero headlines (rotating value propositions, dynamic taglines, attention‑grabbing headers)
• Feature highlights (cycling through key benefits, product features, service offerings)
• Landing page headers (multiple messages for different audiences, A/B testing headlines)
• About page intros (rotating team descriptions, company values, mission statements)
• Portfolio showcases (cycling skills, project types, service categories)
• Call‑to‑action sections (rotating offers, urgency messages, value props)
• Homepage banners (seasonal messages, current promotions, key announcements)
• Service descriptions (different service offerings, rotating specialties)
• Testimonial intros (rotating customer types, use cases, industries served)
• Product showcases (different product names, feature categories, use cases)

Properties

strings

Array of text strings that will be typed and rotated. Each string types out, pauses, backspaces, then next string appears. Type: array. Required: true.

Tip: Quantity: Use 2‑4 strings for good variety without overwhelming. Length: Keep strings similar length (within ~20 characters of each other). Parallel: Make strings parallel (all nouns, all verbs, all adjectives). Related: Strings should share a theme (all benefits, all services, all features). Grammar: Each string must work grammatically with prefix if used.

typeSpeed

Typing speed in milliseconds per character. Lower = faster typing. Type: number. Default: 50.

Tip: natural: 40‑60ms feels like natural typing speed. fast: 20‑40ms for quick, energetic feel. slow: 70‑100ms for deliberate, emphasis effect. default: 50ms works for most cases - balanced and readable.

backSpeed

Backspace speed in milliseconds per character. Usually faster than typeSpeed for natural feel. Type: number. Default: 30.

Tip: faster: Make backSpeed faster than typeSpeed (20‑40ms typical). natural: 30‑40ms feels natural for backspacing. default: 30ms works well - slightly faster than typing.

loop

Whether to loop animation continuously or stop after one cycle through all strings. Type: boolean. Default: true.

Visual Impact: true – Animation cycles forever: types string 1, erases, types string 2, erases, back to string 1, repeat indefinitely. false – Animation plays once: types all strings in sequence, then stops on last string.

Tip: default: Use true for continuous dynamic effect (keeps page alive). hero: Use true for hero sections – maintains attention. onetime: Use false only if you want animation to settle on final string.

startDelay

Delay in milliseconds before typing animation starts when component loads. Type: number. Default: 500.

Tip: instant: 0ms for immediate start. subtle: 300‑500ms gives page moment to render before animation. delayed: 1000ms+ for staggered effect with other animations.

backDelay

Delay in milliseconds after typing completes before backspacing starts. Gives users time to read. Type: number. Default: 1500.

Tip: critical: IMPORTANT – Set long enough for users to read the text! short: 1000‑1500ms for short strings (1‑3 words). medium: 1500‑2000ms for medium strings (3‑5 words). long: 2000‑3000ms for longer strings or important messages. default: 1500ms works for most cases.

showCursor

Show blinking cursor (|) after text for typewriter effect. Type: boolean. Default: true.

Visual Impact: true – Blinking cursor appears after text like a typewriter. More authentic typing effect. false – No cursor. Cleaner but less obvious it’s a typing animation.

Tip: default: Use true for authentic typewriter effect. clean: Use false only if cursor doesn’t match design aesthetic.

fontSize

Preset font sizes optimized for different contexts. Responsive across devices. Type: string. Options: small, medium, large, xlarge, xxlarge. Default: xlarge.

Tip: hero: Use xlarge or xxlarge for hero sections. section: Use large for section headers. subheading: Use medium for subheadings or secondary messages. inline: Use small for inline text emphasis (rare use case).

textAlign

Horizontal text alignment. Type: string. Options: left, center, right. Default: center.

Tip: hero: Use center for hero sections (standard for headlines). body: Use left for body content or paragraph‑style text. design: Match alignment with surrounding content for visual flow.

prefix

Static text that appears before the typing animation. Provides context for rotating strings. Type: string.

Tip: context: Use prefix to provide grammatical context for strings. clarity: Prefix should make each string understandable in isolation. grammar: Ensure prefix + each string forms complete, grammatical phrase. space: Include trailing space in prefix (‘We are ’ not ‘We are’).

customCss

Custom CSS styles for advanced styling. Parsed as CSS property‑value pairs. Applies to outermost Section container. Type: string.

Security Note: Parsed by cssParser utility. Tenants only affect their own pages (multi‑tenant isolation enforced).

Best Practices

• Use 2‑4 strings – enough variety without being overwhelming
• Keep strings similar length for smooth visual flow
• Front‑load important words (what changes should come first)
• Use prefix for context: ‘We are ’ before ‘innovative’, ‘reliable’, ‘trusted’
• Set loop: true for continuous animation (keeps page dynamic)
• Use xlarge or xxlarge font size for hero sections (maximum impact)
• Center align for hero sections, left align for body content
• Keep typeSpeed 40‑60ms for natural typing feel (not too fast or slow)
• Set backDelay 1500‑2000ms – gives users time to read before erasing
• Show cursor for authentic typewriter effect
• Strings should be related/parallel (all benefits, all services, all features)
• Each string should work grammatically with prefix
• Use for primary messaging only – too many animations overwhelm
• Place in prominent position (hero, above fold, main headline)

Common Mistakes

Using 10+ strings

Why it's a problem: Animation takes too long to cycle, users never see all messages, overwhelming variety.

Fix: Limit to 2‑4 strings – focused messaging with good variety

Strings with wildly different lengths

Why it's a problem: ‘Hi’ vs ‘We provide comprehensive enterprise solutions’ – jarring visual jump, layout shift.

Fix: Keep strings similar length (within ~20 characters). Pad shorter strings if needed.

backDelay too short (500ms or less)

Why it's a problem: Users can’t finish reading before text erases – frustrating, message lost.

Fix: Set 1500‑2000ms minimum – users need time to read and comprehend

Unrelated strings

Why it's a problem: ['fast', 'blue', 'Tuesday', 'coffee'] – confusing, no clear message.

Fix: Use related, parallel strings: all benefits, all services, all features

Prefix doesn’t work with all strings

Why it's a problem: Prefix: ‘We are’, Strings: ['fast', 'building apps'] → ‘We are building apps’ (grammar breaks).

Fix: Test prefix + each string. All must be grammatically correct.

Using small fontSize for hero section

Why it's a problem: Too subtle, doesn’t grab attention, wasted animation.

Fix: Use xlarge or xxlarge for hero – animation should command attention

Multiple typing animations on same page

Why it's a problem: Competing animations, user doesn’t know where to look, overwhelming.

Fix: Use ONE typing animation per page – make it count, primary headline only

typeSpeed too fast (<20ms)

Why it's a problem: Text appears to flash/jump rather than type – loses typewriter effect.

Fix: Keep typeSpeed 40‑60ms for natural typing feel