Typewriter
Печатает фразы и стирает их обратно — с мигающим курсором и чуть неровным, человеческим ритмом.
зависимости 0файлы tsx + cssпараметры 8react 18+
Делаю
X 0000 Y 0000
Пульт08 параметров
01texts
Фразы для печати.
02typingSpeed
ms
На каждый напечатанный символ.
03deletingSpeed
ms
На каждый стёртый символ.
04pause
ms
Пауза после набранной фразы.
05loop
Начинать сначала после последней фразы.
06humanize
Неровный, человеческий ритм нажатий.
07cursor
Символ курсора.
08cursorColor
Цвет курсора.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
texts | string[] | ["приложения, которые любят.","интерфейсы в движении.","продукты под ключ."] | Фразы для печати. |
typingSpeed | number | 70 | На каждый напечатанный символ. |
deletingSpeed | number | 35 | На каждый стёртый символ. |
pause | number | 1600 | Пауза после набранной фразы. |
loop | boolean | true | Начинать сначала после последней фразы. |
humanize | boolean | true | Неровный, человеческий ритм нажатий. |
cursor | string | "|" | Символ курсора. |
cursorColor | string | "#b6e24c" | Цвет курсора. |
startOnView | boolean | true | Ждать появления на экране. |
onPhraseTyped | (index: number) => void | — | Вызывается, когда фраза набрана целиком. |
as | ElementType | 'span' | Какой элемент рендерить. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |