Фон
Снег на весь экран
Снег поверх страницы: canvas на весь экран, снежинки трёх глубин — дальние мелкие и бледные, ближние крупнее и с мягким ореолом — падают со своей скоростью, покачиваются и сносятся ветром. Кладётся один раз в корень страницы и идёт от первого экрана до подвала; выключается кнопкой из любой шапки.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- density, wind, speed, scale, color, backdrop, zIndex
- fixed — на весь экран или внутри родителя; paused — выключить не размонтируя
- className и style
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/background-006?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
{/* один раз в корне страницы, поверх всего */}
<Background006 density={1} wind={0.25} zIndex={50} />
{/* внутри секции, не на весь экран */}
<section style={{ position: "relative" }}>
<Background006 fixed={false} backdrop="#0b1220" />
…
</section>Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Плотность
density· по умолчанию: 1- Ветер
wind· по умолчанию: 0.25- Скорость
speed· по умолчанию: 1- Цвет
color· по умолчанию: #ffffff- Подложка
backdrop· по умолчанию: цвет темы
Используется в сценариях
Ещё в разделе «Фон»
Частые вопросы
- Как установить компонент «Снег на весь экран» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Снег на весь экран»?
- Никаких npm-пакетов, кроме React и Tailwind CSS.
- Что можно поменять в компоненте «Снег на весь экран»?
- Можно менять: density, wind, speed, scale, color, backdrop, zIndex; fixed — на весь экран или внутри родителя; paused — выключить не размонтируя; className и style. Сохранить как есть: три глубины снежинок — разный размер, скорость, прозрачность и ореол у ближних; паузу в скрытой вкладке и вне кадра, статичный кадр при prefers-reduced-motion; pointer-events:none — слой не перехватывает клики страницы.
- Компонент «Снег на весь экран» бесплатный?
- Превью открыто всем, исходник доступен по подписке PRO.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/background-006.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Один файл, ноль зависимостей, «use client». Слой — <div> position:fixed inset:0 pointer-events:none (fixed=false — absolute внутри родителя, для превью и секций), внутри <canvas>. Снежинки сеются по площади (density=1 — около 140 на 1440×900), у каждой глубина: радиус, скорость, прозрачность и ореол зависят от неё. Ветер — общий сдвиг плюс медленное «дыхание» синусом; сход за край переносит снежинку на другую сторону. Цикл requestAnimationFrame с дельтой времени; стоит в скрытой вкладке (visibilitychange), когда слой не в кадре (IntersectionObserver) и при paused. Ретина — devicePixelRatio до 2, размер — ResizeObserver. Внешний выключатель: data-vibeui-snow="off" на <html> и событие vibeui-snow на window — слой перечитывает атрибут и гасит или запускает цикл. prefers-reduced-motion — один статичный кадр редких снежинок. Цвет, плотность, ветер, скорость, подложка и z-index — пропсами.
Теги
- snow
- winter
- particles
- canvas
- overlay
- fullscreen
- ambient
- christmas
- wedding
- decorative
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…