A text effect that simulates a typewriter-like animation in a terminal or CLI's.
npx shadcn@latest add @refinery/terminal-text| Name | Type | Description |
|---|---|---|
| texts | string[] | List of strings to type through in sequence. |
| className | string | Additional CSS classes for the wrapper. |
The main idea is to create a typewriter effect where the text is revealed one character at a time, and then deleted before moving on to the next text. We keep track of the current text index, the length of the visible portion of the text, and whether we are currently deleting or typing. We use 'setTimeout' to control the speed of typing and deleting, as well as the hold time when the full text is visible. The component takes an array of strings as props and loops through them indefinitely. The blinking cursor is implemented using a Motion animation that toggles its opacity to create a blinking effect. The text is styled with a monospace font and a subtle tracking to enhance the terminal-like feel. The component is designed to be accessible, with 'aria-live' set to 'polite' so that screen readers will announce changes to the text content.