Белая шторка на весь экран, на которой одно за другим мелькают приветствия на разных языках. Первое слово задерживается дольше, остальные сменяются быстро, а затем шторка уезжает вверх.
Нижний край шторки на уходе изгибается дугой и выпрямляется, открывая страницу под ней. Список слов, темп и цвета задаются пропсами.
Скопируйте эти файлы в components/words-preloader/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { WordsPreloaderIntro } from "@/components/words-preloader/words-preloader";
export default function Page() {
return (
<div className="h-screen w-full">
<WordsPreloaderIntro words={["Привет", "Hello", "Hola"]}>
<section className="flex h-full items-center justify-center">Ваш лендинг</section>
</WordsPreloaderIntro>
</div>
);
}duration?Сколько миллисекунд держится шторка
Тип number·По умолчанию 2000
words?Слова, которые сменяют друг друга
Тип string[]·По умолчанию PRELOADER_WORDS
firstWordDelay?Пауза на первом слове в миллисекундах
Тип number·По умолчанию 1000
wordInterval?Интервал смены остальных слов в миллисекундах
Тип number·По умолчанию 150
background?Цвет шторки
Тип string·По умолчанию #ffffff
textColor?Цвет слов
Тип string·По умолчанию #000000
children?Содержимое страницы под шторкой
Тип ReactNode·По умолчанию заглушка лендинга
className?Дополнительные классы корневого блока
Тип string