Экран закрыт чёрными колоннами, на которых по словам проявляется слоган. Через пару секунд текст гаснет, а колонны одна за другой уходят вверх лесенкой справа налево и открывают страницу.
Число колонн, их цвет, цвет текста и длительность заставки задаются пропсами.
Скопируйте эти файлы в components/stairs-preloader/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { StairsPreloaderIntro } from "@/components/stairs-preloader/stairs-preloader";
export default function Page() {
return (
<div className="h-screen w-full">
<StairsPreloaderIntro text="Первый в мире ИИ. Точка." columns={5}>
<section className="flex h-full items-center justify-center">Ваш лендинг</section>
</StairsPreloaderIntro>
</div>
);
}duration?Сколько миллисекунд держится заставка
Тип number·По умолчанию 2500
text?Слоган на заставке
Тип string·По умолчанию "Первый в мире ИИ. Точка."
columns?Количество колонн
Тип number·По умолчанию 5
color?Цвет колонн
Тип string·По умолчанию #000000
textColor?Цвет слогана
Тип string·По умолчанию #ffffff
children?Содержимое страницы под заставкой
Тип ReactNode·По умолчанию заглушка лендинга
className?Дополнительные классы корневого блока
Тип string