Text Type⁽⁰²⁹⁾

Realistic mechanical typing and backspacing animation with blinking cursor.

Scroll

Requires:gsap

Installation

$npx kibo add text-type

Usage

1import { TextType } from "@/components/kibo/text-type/component";
2 
3export default function Example() {
4  return (
5    <TextType />
6  );
7}

Props Reference

Prop	Type	Default	Description
`className`	`string`	''	Additional CSS classes for styling and layout.
`showCursor`	`boolean`	true	Controls the show cursor for the component animation.
`hideCursorWhileTyping`	`boolean`	false	Controls the hide cursor while typing for the component animation.
`cursorCharacter`	`string \| React.ReactNode`	'\|'	Controls the cursor character for the component animation.
`cursorBlinkDuration`	`number`	0.5	Controls the cursor blink duration for the component animation.
`cursorClassName`	`string`	''	Controls the cursor class name for the component animation.
`text`	`string \| string[]`	-	The text content to display and animate.
`as`	`ElementType`	-	Controls the as for the component animation.
`typingSpeed`	`number`	50	Controls the typing speed for the component animation.
`initialDelay`	`number`	0	Controls the initial delay for the component animation.
`pauseDuration`	`number`	2000	Controls the pause duration for the component animation.
`deletingSpeed`	`number`	30	Controls the deleting speed for the component animation.
`loop`	`boolean`	true	Controls the loop for the component animation.
`textColors`	`string[]`	[]	Controls the text colors for the component animation.
`variableSpeed`	`{ min: number; max: number }`	-	Controls the variable speed for the component animation.
`onSentenceComplete`	`(sentence: string, index: number) => void`	-	Controls the on sentence complete for the component animation.
`startOnVisible`	`boolean`	false	Controls the start on visible for the component animation.
`reverseMode`	`boolean`	false	Controls the reverse mode for the component animation.