Бенто-сетка

Возможности гаджета bento: эквалайзер, кольца датчиков, CSS-телефон

Шесть плиток разного размера для железки: звук — эквалайзер из полосок с разными задержками, датчики — три кольца conic-gradient, которые заполняются через @property, приложение — телефон из CSS с расписанием и тумблером, который сам переключается, спектр — полоса 2700→6500 K с бегающим маркером, тишина — крупная цифра, протоколы — чипы. Раскладка 2×2, 1×3 и 2×1 на широком, одна колонка на узком.

Что можно поменять

  • eyebrow, title, lede
  • soundTitle, soundText, soundChip, sensorsTitle, sensors: label, value, percent
  • appTitle, appText, alarms; spectrumTitle, spectrumText; silentTitle, silentValue, silentText; localTitle, localText, localChips

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/bento-012?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Для разработчика

Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.

Теги

  • bento
  • features
  • gadget
  • hardware
  • grid
  • equalizer
  • sensors
  • phone
  • css-animation
  • product
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…