Абзац закреплён на экране, пока пользователь прокручивает секцию, и проявляется слово за словом. Сначала на месте слова возникает сплошная плашка, затем она растворяется, и под ней остаётся текст — получается эффект рассекречивания документа.
Порядок раскрытия строго привязан к прокрутке: если листать назад, слова снова прячутся. Одно слово можно выделить своим цветом, а длина секции задаёт, сколько экранов нужно прокрутить до полного раскрытия.
Скопируйте эти файлы в components/text-box-reveal/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { TextBoxReveal } from "@/components/text-box-reveal/text-box-reveal";
export function Manifesto() {
return (
<TextBoxReveal highlight="контроль" highlightColor="#66d9e8">
Мы возвращаем контроль над данными их владельцам.
<br />
Каждый получает вознаграждение за то, чем делится.
</TextBoxReveal>
);
}childrenТекст, абзацы разделяются <br />
Тип ReactNode
highlight?Слово, которое выделяется цветом
Тип string
highlightColor?Цвет выделенного слова и его плашки
Тип string
highlightTextClass?Классы выделенного слова
Тип string
highlightBgClass?Классы плашки выделенного слова
Тип string
boxColor?Цвет плашек, по умолчанию контрастный к теме
Тип string
fontSize?Размер текста в пикселях
Тип number
container?Свой прокручиваемый контейнер вместо окна
Тип RefObject<HTMLElement | null>
viewportHeight?Высота закреплённой области
Тип number | string·По умолчанию "100vh"
scrollLength?Сколько высот области занимает прокрутка секции
Тип number·По умолчанию 4
className?Классы блока с текстом
Тип string