Анимированная рамка с цветным лучом (border beam) на CSS

Что это за эффект

На рамке поля ввода и кнопок горит короткий цветной луч, а снаружи от него расходится мягкое свечение того же цвета. Луч поворачивается вслед за курсором и разгорается, когда курсор подходит ближе, а когда курсор уходит, гаснет. Есть и режим «Пятно света»: рамки загораются прямо под курсором, будто над ними проходит фонарик, и свет плавно переходит с одного элемента на соседний. А можно пустить луч бегать по кругу, как в интерфейсах ИИ-сервисов, где так показывают, что модель работает: всегда или только при наведении.

Луч — это конический градиент (conic-gradient), начало которого задаёт угол через @property: скрипт наводит его на курсор, а в режиме «по кругу» угол крутит CSS-анимация. CSS-маска обрезает его до тонкой рамки. Свечение — тот же градиент, размытый и положенный позади элемента: собственный фон элемента закрывает середину, поэтому свет виден только по краям. Скрипт добавляет стили, передаёт настройки в CSS-переменные и следит за курсором. Пятно света — один радиальный градиент, привязанный к окну (background-attachment: fixed). Эффект сделан по мотивам «Border beam» с libraries.dev и «Spotlight Border» от pixelgridui, но без React.

Где использовать

• Поле запроса в ИИ-продукте: луч показывает, что можно писать или что идёт генерация.
• Главная кнопка на лендинге, чтобы притянуть взгляд.
• Карточка выбранного тарифа или новой функции.

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Ваши настройки сохранятся.

Вручную. «Скачать код» даёт готовую HTML-страницу с вашими настройками. «Скопировать код» копирует только стили, разметку и скрипт. Скрипт без зависимостей.

Добавьте класс border-beam любому элементу со скруглёнными углами и своим фоном:

<div class="prompt border-beam">…</div>

createBorderBeam(document.body, { palette: 'colorful', mode: 'pointer' });

Настройки

• Цвета — радуга, океан, закат или белый. Для пятна света белый выглядит строже всего.
• Движение — за курсором, пятно света, по кругу всегда или по кругу только при наведении и фокусе.
• Радиус — для режима «за курсором»: с какого расстояния луч загорается; для пятна света — его размер.
• Плавность — для режима «за курсором»: насколько мягко луч поворачивается.
• Скорость круга — для бега по кругу: за сколько секунд луч обходит рамку.
• Длина луча — какую часть круга он занимает. При 360° вся рамка переливается градиентом.
• Толщина рамки — ширина светящейся рамки.
• Свечение — яркость света снаружи рамки.
• Размытие свечения — насколько свет расходится за рамку. По умолчанию 1 px: тонкая кайма вместо широкого ореола.

Доступность и производительность

В режиме «за курсором» скрипт работает только пока курсор двигается, а потом засыпает. Бег по кругу целиком ведёт браузер через CSS. Если в системе включено «Уменьшить движение», бег по кругу замирает. Содержимое элементов остаётся обычными полями и кнопками.

Частые вопросы

В каких браузерах работает? Во всех современных: Chrome, Edge, Safari 16.4+ и Firefox 128+. Им нужна поддержка @property. В более старых браузерах луч стоит на месте, но рамка всё равно подсвечена. Пятно света на iPhone может вести себя иначе: Safari там не поддерживает background-attachment: fixed.

Почему свечение видно внутри элемента? У элемента нет своего фона. Задайте ему непрозрачный background.

Нужен ли React? Нет. Это CSS и около 120 строк JavaScript без зависимостей.