Фон
Тетрадный лист
Бумага в клетку, линейку или точки, как тетрадный лист: разлиновка из CSS-градиентов, крупная клетка каждой пятой линией, красные поля по желанию. Приглушение линий настраивается, светлая и тёмная бумага. Обёртка: содержимое любой высоты кладётся поверх.
Что можно поменять
- pattern, cell, major, strength, margin
- paper и ink — цвета бумаги и линий, tone — схема
- children — любое содержимое поверх; eyebrow, title, note — только для демо
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/surface-025?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, серверный компонент без состояния. Разлиновка — background-image из linear-gradient (клетка и линейка) или radial-gradient (точки) двумя слоями: тонкий шагом cell и крупный шагом major×cell; цвета линий — color-mix от --vibeui-surface-025-ink с долей из strength (faint 0.055/0.095, soft 0.085/0.14, clear 0.13/0.2). major=0 убирает крупную клетку. margin — красная вертикаль на четвёртой клетке. children заменяют демонстрационные eyebrow/title/note. Палитра --vibeui-surface-025-* с light-dark: бумага #faf7f2 / #1c1a18, линии синевато-серые; tone фиксирует схему, paper и ink переопределяют цвета.
Теги
- background
- paper
- notebook
- grid
- graph paper
- lined
- dots
- sketch
- hand-drawn
- wrapper
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…