Avatar
Team Ring
Аватар в рамке цвета команды: цвет считается из названия команды, а не из имени, поэтому у всех коллег он одинаковый и меняется при переходе.
- avatar
- team
- ring
- colour
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/avatar-032
Пётр Гай, команда «Платформа»
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «avatar-032» (Team Ring) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/avatar-032.json
Registry item: https://vibeui.ru/r/avatar-032.json
Ставится в: components/vibeui/avatar-032.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Аватар в рамке цвета команды: цвет считается из названия команды, а не из имени, поэтому у всех коллег он одинаковый и меняется при переходе.
Аватар в рамке цвета команды: оттенок выводится из названия команды, кольцо вырезано маской, название подписано плашкой. Ноль зависимостей, один файл, клиентского JS нет.
## 3. Как использовать
import { Avatar032 } from "@/components/vibeui/avatar-032"
<Avatar032 name="Пётр Гай" team="Платформа" size="md" />
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-avatar-032-* и не подменять её токенами вашей темы
- вывод оттенка из названия команды, а не из имени: у коллег рамка обязана быть одинаковой
- детерминированную функцию оттенка: случайный цвет менялся бы при каждом рендере
- плашку с названием: цвет рамки без легенды не расшифровывается, а легенды в списке нет
- вырез radial-маской вместо обводки цветом фона — зазор обязан держаться на любой подложке
- имя и команду словами в скрытой подписи: цвет кольца скринридер не читает
## 6. Можно менять
- имя и название команды через team
- размер через size — sm, md или lg
- формулу оттенка, если у вас есть свои цвета команд
- толщину кольца и зазор в переменных ring и gap
## 7. Правила
- Оттенок берётся из названия: переименовали команду — сменился и цвет, это плата за отсутствие словаря.
- Двенадцать оттенков: при большем числе команд цвета начнут повторяться, тогда заведите явный словарь.
- Цвет команды и цвет присутствия — разные смыслы: не совмещайте их в одном кольце.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/avatar-032.jsonhttps://vibeui.ru/r/avatar-032.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-avatar-032-*. Серверный: хуков нет. Оттенок рамки считается детерминированной функцией FNV-1a из названия команды, а не из имени человека: люди переходят между командами, и рамка обязана меняться вместе с ними, оставаясь одинаковой у всех коллег. Кольцо вырезано radial-маской, поэтому зазор держится и на светлой, и на тёмной подложке. Название команды подписано плашкой под портретом: цвет рамки без легенды не расшифровывается, а легенды в списках обычно нет.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Avatar032Props = Omit<
ComponentPropsWithoutRef<"div">,
"children"
> & {
name?: string
team?: string
size?: "sm" | "md" | "lg"
}
// Идея компонента: аватар в рамке цвета команды. Цвет считается из названия
// команды, а не из имени человека: люди переходят между командами, и рамка
// обязана меняться вместе с ними, оставаясь одинаковой у всех коллег. Кольцо
// вырезано radial-маской, поэтому зазор держится и на светлой, и на тёмной
// подложке. Название команды подписано плашкой под портретом: цвет рамки без
// легенды не расшифровывается, а легенды в списках обычно нет.
const STYLES = `
:where([data-vibeui-block="avatar-032"]){
--vibeui-avatar-032-size:3rem;
--vibeui-avatar-032-ring:0.1875rem;
--vibeui-avatar-032-gap:0.1875rem;
--vibeui-avatar-032-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="avatar-032"]{
display:inline-flex;flex-direction:column;align-items:center;gap:0.375rem;
box-sizing:border-box;font-family:var(--vibeui-avatar-032-font);
}
[data-vibeui-block="avatar-032"] *{box-sizing:border-box}
[data-vibeui-block="avatar-032"] [data-part="slot"]{
position:relative;display:grid;place-items:center;
width:calc(var(--vibeui-avatar-032-size) + (var(--vibeui-avatar-032-ring) + var(--vibeui-avatar-032-gap)) * 2);
height:calc(var(--vibeui-avatar-032-size) + (var(--vibeui-avatar-032-ring) + var(--vibeui-avatar-032-gap)) * 2);
}
/* Кольцо вырезано маской: зазор не зависит от цвета подложки. */
[data-vibeui-block="avatar-032"] [data-part="ring"]{
position:absolute;inset:0;border-radius:9999px;
background:oklch(0.58 0.17 var(--vibeui-avatar-032-team,265));
mask-image:radial-gradient(circle closest-side,transparent calc(100% - var(--vibeui-avatar-032-ring)),#000 calc(100% - var(--vibeui-avatar-032-ring)));
}
[data-vibeui-block="avatar-032"] [data-part="face"]{
display:grid;place-items:center;
width:var(--vibeui-avatar-032-size);height:var(--vibeui-avatar-032-size);
border-radius:9999px;
background:oklch(0.9 0.06 var(--vibeui-avatar-032-hue,265));
color:oklch(0.36 0.12 var(--vibeui-avatar-032-hue,265));
font-size:calc(var(--vibeui-avatar-032-size) * 0.34);font-weight:700;line-height:1;
}
/* Плашка словом: цвет рамки без легенды не расшифровывается. */
[data-vibeui-block="avatar-032"] [data-part="team"]{
max-width:8rem;padding:0.125rem 0.4375rem;border-radius:9999px;
background:oklch(0.94 0.045 var(--vibeui-avatar-032-team,265));
color:oklch(0.38 0.11 var(--vibeui-avatar-032-team,265));
font-size:0.6875rem;font-weight:650;line-height:1.4;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
[data-vibeui-block="avatar-032"][data-size="sm"]{--vibeui-avatar-032-size:2.25rem}
[data-vibeui-block="avatar-032"][data-size="lg"]{--vibeui-avatar-032-size:4rem;--vibeui-avatar-032-ring:0.25rem;--vibeui-avatar-032-gap:0.25rem}
[data-vibeui-block="avatar-032"] [data-part="sr"]{
position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="avatar-032"] *{animation:none!important;transition:none!important}}
`
function hue(name: string) {
let hash = 2166136261
for (const symbol of name) {
hash ^= symbol.codePointAt(0)!
hash = Math.imul(hash, 16777619)
}
return ((hash >>> 0) % 12) * 30
}
function initials(name: string) {
return name
.split(" ")
.slice(0, 2)
.map((part) => part.charAt(0).toUpperCase())
.join("")
}
/**
* Аватар в рамке цвета команды: цвет выводится из названия команды и подписан словом.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Avatar032({
name = "Пётр Гай",
team = "Платформа",
size = "md",
className,
style,
...props
}: Avatar032Props) {
const palette = {
"--vibeui-avatar-032-hue": hue(name),
"--vibeui-avatar-032-team": hue(team),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-avatar-032" precedence="medium">
{STYLES}
</style>
<div
{...props}
data-vibeui-block="avatar-032"
data-size={size}
className={className}
style={palette}
>
<span data-part="slot">
<span data-part="ring" aria-hidden="true" />
<span data-part="face" aria-hidden="true">
{initials(name)}
</span>
<span data-part="sr">
{name}, команда «{team}»
</span>
</span>
<span data-part="team" aria-hidden="true">
{team}
</span>
</div>
</>
)
}