Светлая заставка с тремя строками слогана и линией-росчерком, которая прорисовывается под второй строкой. Когда время выходит, текст гаснет, а экран рассыпается на квадратные пиксели, которые исчезают в случайном порядке.
Размер пикселей подстраивается под ширину контейнера, а их количество в ряду, цвета и строки текста задаются пропсами.
Скопируйте эти файлы в components/pixel-preloader/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { PixelPreloaderIntro } from "@/components/pixel-preloader/pixel-preloader";
export default function Page() {
return (
<div className="h-screen w-full">
<PixelPreloaderIntro lines={["ИИ превратит ", "ваш профиль в портфолио", "за считанные минуты"]}>
<section className="flex h-full items-center justify-center">Ваш лендинг</section>
</PixelPreloaderIntro>
</div>
);
}duration?Сколько миллисекунд держится заставка
Тип number·По умолчанию 2500
lines?Три строки текста на заставке
Тип [string, string, string]·По умолчанию строки слогана
columns?Сколько пикселей помещается в ряд
Тип number·По умолчанию 20
pixelColor?Цвет пикселей
Тип string·По умолчанию #f5f5f5
strokeColor?Цвет линии-росчерка под текстом
Тип string·По умолчанию #0b7a96
children?Содержимое страницы под заставкой
Тип ReactNode·По умолчанию заглушка лендинга
className?Дополнительные классы корневого блока
Тип string