Интерфейс
Док с увеличением
Панель иконок в стиле macOS: курсор ведёт лупу, иконки растут пружиной, подпрыгивают по клику и отражаются на полу, у запущенных — точка, а слот ⌘K открывает мини-меню.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- items — свои иконки: <img>, svg или встроенная плитка Tile; id и label обязательны
- activeIds — какие инструменты помечены точкой запущенного приложения
- commandLabel и commands — подпись слота и пункты меню ⌘K
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/button-anim-002?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<ButtonAnim002 activeIds={["signal"]} onSelect={(item) => console.log(item.id)} />Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Слот команд
commandLabel· по умолчанию: ⌘K- Акцент
accent· по умолчанию: цвет темы- Цвет текста
textColor· по умолчанию: цвет темы
Ещё в разделе «Интерфейс»
Частые вопросы
- Как установить компонент «Док с увеличением» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Док с увеличением»?
- Никаких npm-пакетов, кроме React и Tailwind CSS.
- Что можно поменять в компоненте «Док с увеличением»?
- Можно менять: items — свои иконки: <img>, svg или встроенная плитка Tile; id и label обязательны; activeIds — какие инструменты помечены точкой запущенного приложения; commandLabel и commands — подпись слота и пункты меню ⌘K. Сохранить как есть: размер иконок пишется в DOM-переменную --s из обработчика, а не через состояние: pointermove слишком част для рендера на каждое событие; raised-cosine колокол увеличения (не линейный шатёр): соседи мягко входят и выходят из пика; лупа только для мыши и гаснет при prefers-reduced-motion: на тач-вводе цель — сама точка касания.
- Компонент «Док с увеличением» бесплатный?
- Превью открыто всем, исходник доступен по подписке PRO.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/button-anim-002.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Клиентский компонент. Увеличение считается 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
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…