Terminal Text

A text effect that simulates a typewriter-like animation in a terminal or CLI's.

Preview

Installation

1. Run the following command in your terminal:
npx shadcn@latest add @refinery/terminal-text

API Reference

Component props
NameTypeDescription
textsstring[]List of strings to type through in sequence.
classNamestringAdditional CSS classes for the wrapper.

Usage Recommendations

For the best experience, use the 'Geist' theme...
Always ensure the component is properly styled and accessible.
Design Notes

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.