Кнопка
Док с увеличением
Панель иконок в стиле macOS: курсор ведёт лупу, иконки растут пружиной, подпрыгивают по клику и отражаются на полу, у запущенных — точка, а слот ⌘K открывает мини-меню.
Что можно поменять
- items — свои иконки: <img>, svg или встроенная плитка Tile; id и label обязательны
- activeIds — какие инструменты помечены точкой запущенного приложения
- commandLabel и commands — подпись слота и пункты меню ⌘K
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/button-anim-002?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Клиентский компонент. Увеличение считается raised-cosine колоколом от расстояния курсора до центра каждой иконки и пишется прямо в DOM-переменную --s, а не через состояние React: pointermove идёт десятками событий в секунду, рендер на каждое — потерянные кадры (тот же приём, что у магнитной кнопки button-071). CSS-переход width/height сглаживает шаги в пружину. Лупа только для мыши (pointerType === 'mouse'); на тач-вводе и при prefers-reduced-motion иконки стоят на месте. Клик добавляет data-bounce и запускает keyframe-подпрыгивание, метка снимается по onAnimationEnd. Отражение — та же иконка, отражённая scaleY(-1) под маской-градиентом. Тултип и точка запущенного приложения — на чистом CSS (:hover/:focus-visible, data-active). Меню ⌘K — состояние menuOpen. Тема из color-scheme через light-dark(), тёмную включает класс .dark.
Теги
- button
- dock
- macos
- magnify
- toolbar
- launcher
- hover
- animated
- tooltip
- command
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…