NexoreUI
2.0
InstallationComponentsIconsTemplatesNewNexore MakePricing
Create Project
GitHub
NexoreUI
2.0
Navigation
InstallationComponentsIconsTemplatesNexore MakeCreate Project
InstallationComponents OverviewIcons
Categories (65)
ButtonInputCheckboxSelectSwitchSliderRatingFile Upload
CardAccordionTabsTableStepperScroll AreaNavigationDockData DisplayChartsCommerce
Modal (Dialog)AlertBadgeAvatarTooltipProgressSkeletonLoadersToasterSocial
Aurora Border CardAurora Search PillAI Prompt InputCommandInteractive Code BlockPro AI
Media ShowcaseOverlays & DrawersPro ButtonsPro DashboardsPro E-CommercePro FeedbackPro FormsPro InputsPro LayoutsPro ListsPro MarketingPro NavigationPro TablesSpecial FormsUltra Components
OverviewPro CardsPro ObjectsSoundPulseSilkUnveilNode Flow Graph
NexoreUI v2.0Studio
DocsTyping Animation

Typing Animation

Typewriter-style text animations.

PreviousAnimated Number
NextBlur Fade
On This Page
Quick ActionsProject StudioNewNexore Make (AI)Source on GitHub

Typing Animation

Animates typing and deleting effects for a sequence of texts.

Interactive Playground

Live CanvasInteractive
|
Controls(6)
texts
text

Comma-separated list of texts to cycle through

speed
number

Typing speed in milliseconds per character

deleteSpeed
number

Deleting speed in milliseconds per character

pauseDuration
number

Pause duration in milliseconds after typing a full text

loop
boolean
Toggle state:

Whether to loop the texts indefinitely

cursor
boolean
Toggle state:

Whether to display the blinking cursor

Generated JSX
Source
import { TypingAnimation } from "nexoreui"

<TypingAnimation />

Default Typing Cycle

|
component.tsx
1

Fast Typing Speed

|
component.tsx
1

No Loop / Run Once

|
component.tsx
1

Without Cursor

component.tsx
1

Gradient Custom Styling

|
component.tsx
1

API Reference

PropertyTypeDefaultDescription
textsstring[]-Array of text strings to type out sequentially.
speednumber100Typing speed in milliseconds per character.
deleteSpeednumber50Deleting speed in milliseconds per character.
pauseDurationnumber2000Pause duration in milliseconds after typing a full text.
loopbooleantrueWhether to loop the sequence of texts indefinitely.
cursorbooleantrueWhether to display the blinking cursor.