Абзац закреплён по центру экрана, а его слова привязаны к прокрутке: каждое следующее стартует чуть позже предыдущего, въезжает справа издалека и постепенно проявляется. В итоге текст собирается в плотный крупный абзац слово за словом.
Движение полностью следует за колесом или тачпадом: при прокрутке назад слова уезжают обратно вправо в обратном порядке.
Скопируйте эти файлы в components/horizontal-text-reveal/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { HorizontalTextReveal } from "@/components/horizontal-text-reveal/horizontal-text-reveal";
export function Intro() {
return (
<HorizontalTextReveal scrollLength={4} width={70}>
Мы делаем интерфейсы, которые хочется трогать руками.
</HorizontalTextReveal>
);
}childrenТекст абзаца; слова разбиваются по пробелам
Тип string
container?Прокручиваемый контейнер
Тип RefObject<HTMLElement | null>·По умолчанию окно
viewportHeight?Высота закреплённой сцены
Тип number | string·По умолчанию "100vh"
scrollLength?Длина прокрутки в высотах сцены
Тип number·По умолчанию 5
fontSize?Размер шрифта абзаца
Тип number | string·По умолчанию "3.9vw"
width?Ширина абзаца в процентах
Тип number·По умолчанию 60
distance?С какого расстояния справа въезжает слово, px
Тип number·По умолчанию 1200
stagger?Сдвиг старта каждого следующего слова (доля прокрутки)
Тип number·По умолчанию 0.015
color?Цвет текста; по умолчанию наследуется
Тип string
className?Классы абзаца
Тип string