VibeUI

Avatar

Photo Fallback

Фотография с запасными инициалами: битая ссылка не оставляет пустого места и не требует ни строчки JS.

  • avatar
  • fallback
  • image
  • no-js

Превью

1440pxHost theme

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

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

размести это в шапке: https://vibeui.ru/c/avatar-002

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

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

# Установка и размещение «avatar-002» (Photo Fallback) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/avatar-002.json

Registry item: https://vibeui.ru/r/avatar-002.json
Ставится в: components/vibeui/avatar-002.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Фотография с запасными инициалами: битая ссылка не оставляет пустого места и не требует ни строчки JS.

Аватар с фотографией и запасными инициалами: инициалы стоят подложкой, поэтому битая ссылка не ломает раскладку. Оттенок подложки выводится из имени. Ноль зависимостей, один файл, клиентского JS нет.

## 3. Как использовать
import { Avatar002 } from "@/components/vibeui/avatar-002"

<Avatar002 name="Анна Петрова" src="/people/anna.jpg" size="lg" />

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-avatar-002-* и не подменять её токенами вашей темы
- инициалы подложкой вместо onError: обработчик ошибки требует клиентского компонента ради одного случая
- пустой alt у фотографии — иначе при 404 браузер напечатает имя поверх инициалов
- скрытую строку с именем: инициалы скринридер прочитает как набор букв
- размер одной переменной: аватар обязан масштабироваться без правки разметки
- object-fit: cover — портрет в круге иначе растянется

## 6. Можно менять
- name и src
- size — sm, md или lg
- оттенок подложки, если у вас своя палитра
- форму: скруглённый квадрат вместо круга меняется одним свойством

## 7. Правила
- Компонент не проверяет, загрузилась ли фотография: он устроен так, что проверять не нужно.
- Для сеток и списков задайте размер через переменную, а не через width на самом элементе.
- Инициалы берутся из первых двух слов имени: для одного слова получится одна буква, это нормально.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

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

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

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-avatar-002-*. Серверный: хуков нет. Инициалы лежат абсолютной подложкой, фотография — слоем поверх с alt="", поэтому при неудачной загрузке остаётся подложка, а не значок сломанной картинки. Имя вынесено скрытой строкой для скринридера. Размер задаётся одной переменной --vibeui-avatar-002-size, три готовых значения — атрибутом data-size.

Исходник компонента

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Avatar002Props = Omit<
  ComponentPropsWithoutRef<"span">,
  "children"
> & {
  name?: string
  src?: string
  size?: "sm" | "md" | "lg"
}

// Идея компонента: фотография с запасным вариантом без JS. Инициалы лежат
// подложкой, фотография — слоем поверх, и у неё alt="" — иначе при битой
// ссылке браузер нарисует поверх инициалов значок сломанной картинки и
// прочитает имя дважды. Имя отдаётся скринридеру отдельной скрытой строкой.
const STYLES = `
:where([data-vibeui-block="avatar-002"]){
--vibeui-avatar-002-size:3rem;
--vibeui-avatar-002-hue:250;
--vibeui-avatar-002-bg:oklch(0.92 0.05 var(--vibeui-avatar-002-hue));
--vibeui-avatar-002-fg:oklch(0.38 0.09 var(--vibeui-avatar-002-hue));
--vibeui-avatar-002-ring:oklch(1 0 0 / 65%);
--vibeui-avatar-002-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="avatar-002"]{
position:relative;display:inline-flex;flex:none;vertical-align:middle;
width:var(--vibeui-avatar-002-size);height:var(--vibeui-avatar-002-size);
}
[data-vibeui-block="avatar-002"][data-size="sm"]{--vibeui-avatar-002-size:2.25rem}
[data-vibeui-block="avatar-002"][data-size="lg"]{--vibeui-avatar-002-size:4rem}
/* Инициалы — подложка: если фотография не загрузится, останутся они. */
[data-vibeui-block="avatar-002"] [data-part="fallback"]{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
border-radius:9999px;background:var(--vibeui-avatar-002-bg);color:var(--vibeui-avatar-002-fg);
font-family:var(--vibeui-avatar-002-font);
font-size:calc(var(--vibeui-avatar-002-size) * 0.34);font-weight:650;line-height:1;
user-select:none;
}
[data-vibeui-block="avatar-002"] img{
position:relative;width:100%;height:100%;display:block;object-fit:cover;
border-radius:9999px;box-shadow:inset 0 0 0 1px var(--vibeui-avatar-002-ring);
}
[data-vibeui-block="avatar-002"] [data-part="name"]{
position:absolute;width:1px;height:1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="avatar-002"] *{animation:none!important;transition:none!important}}
`

// Оттенок из имени: FNV-1a, разложенный по двенадцати ступеням круга.
// Сумма кодов символов не годится — кириллические имена ложатся в один
// розовый сектор; ступени в 30° дают заведомо различимые цвета.
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[0]?.toUpperCase() ?? "")
    .join("")
}

/**
 * Фотография с запасными инициалами: битая ссылка не оставляет пустоты.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Avatar002({
  name = "Анна Петрова",
  src = "",
  size = "md",
  className,
  style,
  ...props
}: Avatar002Props) {
  const palette = {
    "--vibeui-avatar-002-hue": hue(name),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-avatar-002" precedence="medium">
        {STYLES}
      </style>
      <span
        {...props}
        data-vibeui-block="avatar-002"
        data-size={size}
        className={className}
        style={palette}
      >
        <span data-part="fallback" aria-hidden="true">
          {initials(name)}
        </span>
        {src ? <img src={src} alt="" loading="lazy" decoding="async" /> : null}
        <span data-part="name">{name}</span>
      </span>
    </>
  )
}