Display
Phone Screenshot Frame
Рамка телефона под скриншот: экран задан пропорцией 9 / 19.5, поэтому картинка любого размера ложится в него без обрезки и чёрных полей.
- frame
- phone
- mockup
- screenshot
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/frame-004
Сегодня
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «frame-004» (Phone Screenshot Frame) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/frame-004.json
Registry item: https://vibeui.ru/r/frame-004.json
Ставится в: components/vibeui/frame-004.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Рамка телефона под скриншот: экран задан пропорцией 9 / 19.5, поэтому картинка любого размера ложится в него без обрезки и чёрных полей.
Рамка телефона: пропорция экрана 9 / 19.5, статус-строка и островок, слот под скриншот. Ноль зависимостей, один файл, клиентского JS нет.
## 3. Как использовать
import { Frame004 } from "@/components/vibeui/frame-004"
<Frame004 time="9:41" carrier="VibeUI">
<img src="/shots/app.png" alt="Экран приложения" />
</Frame004>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-frame-004-* и не подменять её токенами вашей темы
- пропорцию экрана вместо фиксированной высоты: иначе скриншот обрезается или получает поля
- островок в absolute — в потоке он сдвигает статус-строку и съедает верх скриншота
- ограничение ширины корпуса: телефон шириной с экран перестаёт читаться как телефон
- светлый корпус с тонкой обводкой: тёмный сливается с тёмным фоном каталога
- aria-hidden на статус-строке: время и батарея — декорация макета, а не данные
## 6. Можно менять
- время в статус-строке через time
- надпись оператора через carrier
- содержимое экрана — картинкой или блоком в слоте
- ширину корпуса через переменную --vibeui-frame-004-width
## 7. Правила
- Скриншот масштабируется по object-fit:cover: узкая картинка потеряет края.
- Пропорция 9 / 19.5 соответствует современным телефонам; для старых моделей поменяйте её на 9 / 16.
- Островок и полоса домой — детали конкретной платформы, на Android-макете их убирают.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/frame-004.jsonhttps://vibeui.ru/r/frame-004.jsonСерверный компонент, хуков нет. Экран держит aspect-ratio 9 / 19.5 вместо фиксированной высоты, а корпус ограничен width:min(100%, 15rem) — рамка ужимается на телефоне, но не растекается на десктопе. Островок вынесен из потока в absolute: в потоке он сдвигал бы статус-строку вниз и съедал верх скриншота. Сигнал и батарея нарисованы блоками и градиентом, без иконочного шрифта. Корпус светлый с тонкой обводкой сознательно: тёмный корпус на тёмной подложке каталога сливается, и от телефона остаётся плавающий белый прямоугольник. Статус-строка помечена aria-hidden — это декорация макета.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from "react"
export type Frame004Props = ComponentPropsWithoutRef<"figure"> & {
time?: string
carrier?: string
children?: ReactNode
}
// Идея компонента: рамка телефона под скриншот. Экран задан пропорцией
// 9 / 19.5, а не высотой в пикселях: скриншот любого размера ложится в него
// без обрезки и без чёрных полей. Корпус светлый с тонкой обводкой — тёмный
// корпус на тёмной подложке каталога сливается, и от телефона остаётся
// плавающий белый прямоугольник.
const STYLES = `
:where([data-vibeui-block="frame-004"]){
--vibeui-frame-004-body:oklch(0.93 0.005 265);
--vibeui-frame-004-edge:oklch(0.78 0.008 265);
--vibeui-frame-004-screen:oklch(1 0 0);
--vibeui-frame-004-fg:oklch(0.22 0.014 265);
--vibeui-frame-004-muted:oklch(0.56 0.014 265);
--vibeui-frame-004-island:oklch(0.2 0.014 265);
--vibeui-frame-004-width:15rem;
--vibeui-frame-004-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="frame-004"]{
display:flex;justify-content:center;margin:0;width:100%;box-sizing:border-box;
font-family:var(--vibeui-frame-004-font);color:var(--vibeui-frame-004-fg);
}
[data-vibeui-block="frame-004"] *{box-sizing:border-box}
[data-vibeui-block="frame-004"] [data-part="shell"]{
position:relative;
width:min(100%,var(--vibeui-frame-004-width));
padding:0.5rem;
background:var(--vibeui-frame-004-body);
border:1px solid var(--vibeui-frame-004-edge);
border-radius:2rem;
}
/* Пропорция вместо высоты: скриншот ложится без обрезки на любой ширине. */
[data-vibeui-block="frame-004"] [data-part="screen"]{
position:relative;overflow:hidden;
display:flex;flex-direction:column;
aspect-ratio:9 / 19.5;
background:var(--vibeui-frame-004-screen);
border:1px solid var(--vibeui-frame-004-edge);
border-radius:1.625rem;
}
[data-vibeui-block="frame-004"] [data-part="status"]{
display:flex;align-items:center;justify-content:space-between;gap:0.5rem;
flex:none;padding:0.5rem 0.875rem 0.25rem;
font-size:0.625rem;font-weight:650;font-variant-numeric:tabular-nums;
}
[data-vibeui-block="frame-004"] [data-part="meters"]{display:inline-flex;align-items:center;gap:0.25rem}
[data-vibeui-block="frame-004"] [data-part="signal"]{display:inline-flex;align-items:flex-end;gap:0.0625rem}
[data-vibeui-block="frame-004"] [data-part="signal"] i{
display:block;width:0.125rem;border-radius:0.0625rem;background:currentColor;
}
[data-vibeui-block="frame-004"] [data-part="signal"] i:nth-child(1){height:0.1875rem}
[data-vibeui-block="frame-004"] [data-part="signal"] i:nth-child(2){height:0.3125rem}
[data-vibeui-block="frame-004"] [data-part="signal"] i:nth-child(3){height:0.4375rem}
[data-vibeui-block="frame-004"] [data-part="battery"]{
display:inline-block;width:1rem;height:0.5rem;
border:1px solid currentColor;border-radius:0.125rem;
background:linear-gradient(90deg,currentColor 62%,transparent 62%);
background-clip:content-box;padding:1px;
}
/* Островок висит поверх экрана: в потоке он сдвигал бы статус-строку вниз. */
[data-vibeui-block="frame-004"] [data-part="island"]{
position:absolute;top:0.375rem;left:50%;transform:translateX(-50%);
width:4rem;height:1.125rem;border-radius:9999px;
background:var(--vibeui-frame-004-island);
}
[data-vibeui-block="frame-004"] [data-part="body"]{flex:1 1 auto;min-height:0;overflow:hidden}
[data-vibeui-block="frame-004"] [data-part="body"] > *{display:block;width:100%}
[data-vibeui-block="frame-004"] img{display:block;width:100%;height:100%;object-fit:cover}
[data-vibeui-block="frame-004"] [data-part="stub"]{
display:flex;flex-direction:column;gap:0.5rem;
height:100%;padding:1rem 0.875rem;
}
[data-vibeui-block="frame-004"] [data-part="stub-title"]{font-size:0.875rem;font-weight:700;margin:0 0 0.25rem}
[data-vibeui-block="frame-004"] [data-part="card"]{
height:2.75rem;border-radius:0.625rem;
background:oklch(0.96 0.004 265);
}
[data-vibeui-block="frame-004"] [data-part="card"]:nth-child(3){height:4.5rem}
[data-vibeui-block="frame-004"] [data-part="home"]{
flex:none;width:35%;height:0.25rem;margin:0.375rem auto 0.5rem;
border-radius:9999px;background:var(--vibeui-frame-004-edge);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="frame-004"] *{animation:none!important;transition:none!important}}
`
/**
* Рамка телефона под скриншот: пропорция экрана, статус-строка, островок.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Frame004({
time = "9:41",
carrier = "VibeUI",
children,
className,
style,
...props
}: Frame004Props) {
return (
<>
<style href="vibeui-frame-004" precedence="medium">
{STYLES}
</style>
<figure
{...props}
data-vibeui-block="frame-004"
className={className}
style={style as CSSProperties}
>
<div data-part="shell">
<div data-part="screen">
<span data-part="island" aria-hidden="true" />
<div data-part="status" aria-hidden="true">
<span>{time}</span>
<span>{carrier}</span>
<span data-part="meters">
<span data-part="signal">
<i />
<i />
<i />
</span>
<span data-part="battery" />
</span>
</div>
<div data-part="body">
{children ?? (
<div data-part="stub">
<p data-part="stub-title">Сегодня</p>
<span data-part="card" />
<span data-part="card" />
<span data-part="card" />
</div>
)}
</div>
<span data-part="home" aria-hidden="true" />
</div>
</div>
</figure>
</>
)
}