Фон
Снег на весь экран
Снег поверх страницы: canvas на весь экран, снежинки трёх глубин — дальние мелкие и бледные, ближние крупнее и с мягким ореолом — падают со своей скоростью, покачиваются и сносятся ветром. Кладётся один раз в корень страницы и идёт от первого экрана до подвала; выключается кнопкой из любой шапки.
Что можно поменять
- density, wind, speed, color, backdrop, zIndex
- fixed — на весь экран или внутри родителя; paused — выключить не размонтируя
- className и style
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/background-006?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «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
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…