Glitch Text
Текст рвётся, как сбойный сигнал: полосы прыгают вбок, два цветовых канала расходятся. Случайными вспышками, при наведении или постоянно; в паузах — чистый текст.
зависимости 0файлы tsx + css + tsпараметры 7react 18+
X 0000 Y 0000
Пульт07 параметров
01text
Текст со сбоем.
02trigger
Что запускает сбой.
03intensity
em
Как далеко прыгают полосы.
04slices
На сколько полос рвётся текст.
05interval
ms
Средняя пауза между вспышками (auto).
06duration
ms
Длительность вспышки.
07fps
Сколько раз в секунду меняется разрыв.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
text | string | "Сигнал потерян" | Текст со сбоем. |
trigger | 'auto' | 'hover' | 'always' | "auto" | Что запускает сбой. |
intensity | number | 0.08 | Как далеко прыгают полосы. |
slices | number | 7 | На сколько полос рвётся текст. |
interval | number | 2400 | Средняя пауза между вспышками (auto). |
duration | number | 420 | Длительность вспышки. |
fps | number | 18 | Сколько раз в секунду меняется разрыв. |
colors | [string, string] | ['#b6e24c', '#ff3d7f'] | Два цветовых канала. |
as | ElementType | 'span' | Какой элемент рендерить. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |