@lobehub/ui/es/awesome/TypewriterEffect/type.d.ts

Lobe UI is an open-source UI component library for building AIGC web apps

import type { ElementType, ReactNode } from 'react';
export type CursorStyle = 'pipe' | 'underscore' | 'dot' | 'block';
export type SegmentMode = 'grapheme' | 'word';
export interface TypewriterEffectProps {
    /**
     * Custom element type for the container
     * @default 'div'
     */
    as?: ElementType;
    /**
     * Additional class name for the container
     */
    className?: string;
    /**
     * Text color
     */
    color?: string;
    /**
     * Cursor blink duration in seconds
     * @default 0.8
     */
    cursorBlinkDuration?: number;
    /**
     * Custom cursor character or ReactNode
     * @default undefined (uses cursorStyle)
     */
    cursorCharacter?: string | ReactNode;
    /**
     * Additional class name for the cursor
     */
    cursorClassName?: string;
    /**
     * Cursor color (defaults to color if not provided)
     */
    cursorColor?: string;
    /**
     * Cursor fade animation
     * @default true
     */
    cursorFade?: boolean;
    /**
     * Style of the cursor (ignored if cursorCharacter is provided)
     * @default 'pipe'
     */
    cursorStyle?: CursorStyle;
    /**
     * Pause duration after deleting complete before next sentence (milliseconds)
     * @default 0
     */
    deletePauseDuration?: number;
    /**
     * Speed of deleting characters (milliseconds per character)
     * @default 50
     */
    deletingSpeed?: number;
    /**
     * Hide cursor behavior
     * - false: always show cursor
     * - 'typing': hide cursor while typing
     * - 'afterTyping': hide cursor after typing complete (during pause)
     * - true: completely hide cursor
     * @default false
     */
    hideCursorWhileTyping?: boolean | 'typing' | 'afterTyping';
    /**
     * Initial delay before starting animation (milliseconds)
     * @default 0
     */
    initialDelay?: number;
    /**
     * Whether to loop through sentences
     * @default true
     */
    loop?: boolean;
    /**
     * Callback when a sentence is completed
     */
    onSentenceComplete?: (sentence: string, index: number) => void;
    /**
     * Pause duration after typing complete before deleting (milliseconds)
     * @default 2000
     */
    pauseDuration?: number;
    /**
     * Reverse mode: type from end to start
     * @default false
     */
    reverseMode?: boolean;
    /**
     * Segment mode for text splitting
     * - 'grapheme': split by character (emoji-safe)
     * - 'word': split by word
     * @default 'grapheme'
     */
    segmentMode?: SegmentMode;
    /**
     * Array of sentences to display
     */
    sentences: string[];
    /**
     * Whether to show cursor
     * @default true
     */
    showCursor?: boolean;
    /**
     * Start animation when element becomes visible
     * @default false
     */
    startOnVisible?: boolean;
    /**
     * Colors for each sentence (cycles through array)
     */
    textColors?: string[];
    /**
     * Speed of typing characters (milliseconds per character)
     * @default 100
     */
    typingSpeed?: number;
    /**
     * Variable typing speed range
     */
    variableSpeed?: {
        max: number;
        min: number;
    };
}