Раскладки и бенто
Типографская пауза-разворот
Пауза между секциями: одна огромная контурная строка во всю ширину (дата, число, слово), по ней при прокрутке проходит тёплый блик, сверху подпись капителью, поверх рукописная строка, снизу сугроб вместо резкого края. Разделитель и воздух для длинного лендинга, свадьбы, приглашения.
Что можно поменять
- line, script, caption — текст паузы; line короткая, до 10 знаков
- drift — убрать сугроб
- accent, ink, background, tone
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/layout-017?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, серверный. Строка — Cormorant Garamond 300, прозрачная заливка с -webkit-text-stroke и фоном-бликом через background-clip:text; размер от ширины блока (21cqi), white-space:nowrap. Анимации на animation-timeline: view(): блик проезжает строку слева направо, строка сдвигается на ±5% по X, рукописная строка поднимается и проявляется. Без поддержки scroll-timeline блик стоит посередине, всё видно сразу; prefers-reduced-motion гасит анимации. Сугроб — SVG из двух path цвета чернил с прозрачностью 4–7%, ложится на любой фон. Палитра --vibeui-layout-017-* нейтральная через light-dark(), цвета сайта — пропсами accent, ink, background (в т.ч. transparent, чтобы показать фон страницы); тёмная тема — по .dark/[data-theme] или tone. Шрифты с Google Fonts через <link precedence> с системным fallback.
Теги
- divider
- interlude
- typography
- kinetic
- outline
- scroll
- wedding
- date
- big-type
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…