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