VibeUI
РусEng
Войти

Отраслевые секции

Карта питомца: SVG-схема тела с хотспотами услуг

Интерактивная схема тела собаки из простых SVG-фигур: поверх — пульсирующие кнопки-хотспоты (уши, глаза, зубы, шерсть, живот, лапы, хвост). Клик по точке или по чипу в легенде — справа карточка услуги с ценой, временем и описанием, которая перерисовывается с подскоком. На узком схема сверху, карточка снизу.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

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

  • eyebrow, title, lede
  • image, imageAlt — фото животного в профиль; координаты spots подгоняются под фото
  • spots: key, label, x, y (проценты), service, price, duration, text; defaultSpot

Собран из

Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.

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

Превью

1440pxТема страницы
Карта питомца: SVG-схема тела с хотспотами услуг — Интерактивная схема тела собаки из простых SVG-фигур: поверх — пульсирующие кнопки-хотспоты (уши, глаза, зубы, шерсть, живот, лапы, хвост). Клик по точке или по чипу в легенде — справа карточка услуги с ценой, временем и описанием, которая перерисовывается с подскоком. На узком схема сверху, карточка снизу.

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

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

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

https://vibeui.ru/c/vet-002?theme=dark

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

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

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

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

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

Как использовать

<Vet002
  image="/photos/dog-profile.png"
  title="Ткните туда, где болит"
  spots={[
    { key: "teeth", label: "Зубы", x: 90, y: 38, service: "Чистка зубов", price: "от 6 900 ₽", duration: "≈ 1 час", text: "Под седацией, с полировкой." },
    { key: "ears", label: "Уши", x: 73, y: 17, service: "Чистка ушей", price: "900 ₽", text: "Осмотр и мазок." },
  ]}
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Заголовок
title · по умолчанию: Ткните туда, где болит
Кнопка
actionLabel · по умолчанию: Записаться
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Используется в сценариях

Ещё в разделе «Отраслевые секции»

Частые вопросы

Как установить компонент «Карта питомца: SVG-схема тела с хотспотами услуг» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Карта питомца: SVG-схема тела с хотспотами услуг»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: button-016.
Что можно поменять в компоненте «Карта питомца: SVG-схема тела с хотспотами услуг»?
Можно менять: eyebrow, title, lede; image, imageAlt — фото животного в профиль; координаты spots подгоняются под фото; spots: key, label, x, y (проценты), service, price, duration, text; defaultSpot. Сохранить как есть: импорты button-016 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; хотспоты — button с position:absolute в процентах от контейнера aspect-ratio 600/420, кольцо-пульс ::before с задержкой по индексу; силуэт — svg с fill из --fur/--fur-dark (смесь акцента с фоном и чернилами), ошейник акцентом.
Компонент «Карта питомца: SVG-схема тела с хотспотами услуг» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

npx shadcn@latest add https://vibeui.ru/r/pro/vet-002.json

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

Технические заметки

Составной блок: импортирует button-016 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает.

Теги

  • vet
  • body-map
  • hotspots
  • svg
  • interactive
  • services
  • price
  • dog
  • anatomy
  • clinic
  • composite
Исходник компонента

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

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