Сцены: поля и значения по умолчанию (references/scenes.md)
Источник:
ds-internal/presentations/component-video-skill/references/scenes.md— справочник скилла astra-component-video
Справочник к шагу 5. Поле с «—» в колонке «По умолчанию» обязательно. Числовые поля без нужды не трогать: значения по умолчанию подобраны под кадр 1440×1080 и шапку с подвалом.
Координаты и размеры — в пикселях макета Figma, если не сказано иначе. Экран телефона — 375×812, картинка экрана — PNG 2x (750×1624).
Поля ролика
brand, credit | — | «Astra Design System», «разработано дизайн-командой» — не менять |
kind, component | — | заголовок обложки «вид → компонент»: «Доработка → Current Product AF» |
title | нет | заголовок обложки одной строкой вместо «вид → компонент» — для объясняющих роликов: «Дизайн-контракт» |
titleSize | 156 | кегль title, если длинное слово не влезает: у «Дизайн-контракт» — 132 |
header | component | подпись в шапке сцен, если component для неё не годится |
version | — | строка под заголовком обложки: «v 3.0.0» или подзаголовок темы |
narrator | нет | голос диктора — references/voice.md |
voice | нет | фраза диктора на обложке |
outroVoice | нет | фраза диктора на финале |
fog | нет | туман прежней версии визуала — не ставить |
slides | — | сцены по порядку |
Поля сцены, общие для всех типов: type, caption (подпись в подвале, до 40 знаков, без точки),
voice (фразы диктора — строка или массив), hold (сколько держать последнее действие после
голоса, по умолчанию 1 с). У элементов сцены — beat: k: элемент встаёт на k-й фразе (с нуля).
Хронометраж ролика
| Интро и обложка до первой сцены | 6,05 |
| Переход между сценами | 0,35 |
| Финал | 3,5 |
Длина ролика = 6,05 + сумма сцен + 0,35 × (сцен − 1) + 3,5. Точное значение печатает
build.mjs («Таймлайн: … с»); data-duration он ставит сам.
С голосом длину задаёт голос: обложка — не короче своей фразы, сцена кончается с последней
фразой плюс hold, финал — не короче outroVoice. Формулы ниже — для роликов без голоса.
Ролик о доработке компонента
variants — переключатель свойства
Сверху — переключатель «Свойство: Значение 1 | Значение 2 …», под ним компонент крупно; на каждом переключении компонент перетекает в следующий вариант.
property | — | имя свойства из Figma: Type Scale |
options | — | [{ name, img, h }]: значение, путь к SVG, высота варианта в Figma |
display | — | масштаб показа; для ширины 343 — 2 |
width | 343 | ширина компонента в Figma |
top | 470 | верх компонента в кадре; переключатель — на 130 px выше |
Длина: 1 + 1,6 × число значений.
scaleSteps — шаги множителя
Степпер x1 … x1.5, компонент, линейка с высотой в px, тег «Свойство = Значение»,
который меняется, когда шаг переходит в другой вариант.
property | — | свойство, по которому меняется вид: Type Scale |
steps | — | [{ label, img, h, variant }]: подпись шага, SVG, высота в Figma, значение свойства |
display | — | масштаб показа; для ширины 343 — 2 |
width | 343 | ширина компонента в Figma |
top | 480 | верх компонента в кадре |
stepTime | 0.95 | секунд на шаг |
metric | "min-height" | подпись под числом на линейке; у компонента без минимума — "height" |
Длина: 2,2 + stepTime × (шагов − 1).
grid — матрица вариантов
Матрица из Figma по исходным координатам, подписи колонок, группы колонок сверху, медленный наезд камеры.
columns | — | подписи колонок: ["x1", "x1.1", …] |
colX | — | x колонок из get_metadata |
cellW | — | ширина ячейки |
rows | — | [{ y, h: [высоты по колонкам] }] из get_metadata |
src | — | шаблон пути с {r} и {c}: "assets/<ролик>/grid/r{r}-c{c}.png" |
fit | — | начальный масштаб матрицы |
push | — | конечный масштаб (наезд за 4 с) |
pushX | 0 | сдвиг по x за время наезда |
groups | нет | [{ label, from, to }] — скобка над колонками from…to: «Base», «Scale» |
clip | true | обрезать ячейки сглаженным углом движка; для SVG-ячеек — false |
headSize | 60 | кегль подписей колонок в координатах матрицы |
fit = 0,66 × min(1440 / ширина, 1080 / (высота + 170)), push ≈ fit × 1,1. Ширина —
последний colX + cellW, высота — нижний край последней строки. Если fit больше 0,6
(маленькая матрица), headSize уменьшить так, чтобы headSize × fit было около 26:
у матрицы 2×2 Toolbar AF fit 1,2 и headSize 22.
Обрезка clip: true рассчитана на угол Astra Fintech: --radius-m 24 со сглаживанием,
38,4 px по стороне. У компонента с другим углом PNG-ячейки покажут подложку — выгрузить
ячейки SVG и поставить clip: false.
Длина: 3,9.
phones — экраны рядом
items | — | [{ label, screen }]: подпись над экраном («x1 · Base»), PNG 2x |
display | 0.9 | масштаб телефона; три экрана — 0.9, четыре — 0.75 |
gap | 56 | промежуток между телефонами |
top | 200 | верх телефонов |
Длина: 4,2.
device — касание на экране
Телефон въезжает, камера наезжает на место действия, касания с подсветкой строки, необязательная выноска со скобкой.
screen | — | PNG экрана 2x |
zoom | — | { scale, focus: [x, y], shiftX }: увеличение (≈1,9), точка наезда, сдвиг телефона влево под выноску (≈ −170) |
taps | — | [{ at: [x, y], row: [верх, высота] }]: точка касания и полоса подсветки |
note | нет | { tag, title, meta }: выноска справа — тег, заголовок, подпись мелко |
rest | 0.9 | масштаб телефона в покое |
Координаты — в пикселях экрана 375×812. Длина: 4,55 + 1,05 × касаний + 1,2, если есть выноска.
changes — список «тег · текст»
items | — | [{ tag, text }]: «Новое» · «Состояние press у строки» |
tagWidth | 200 | ширина колонки тегов; длинные теги («Консистентность») — 240–250 |
В образцах — три-четыре пункта, текст пункта до 50 знаков; больше — проверить на снимке. Длина: 2,9 + 0,16 × пунктов.
Видео-презентация
flow — переход между страницами
Телефон слева, справа карточка токена. Касание → переход в реальной скорости → перемотка
и повтор в 4 раза медленнее (если slow) → график кривой с бегущей точкой.
layers | — | слои экрана: a — страница «до», b — «после», over — лист поверх, scrim: true — затемнение под листом |
steps | — | шаги, см. ниже |
duration | — | длительность перехода из прототипа, с; 0 — мгновенно |
ease | — при duration > 0 | кривая [x1, y1, x2, y2] из прототипа |
easeLabel | — при duration > 0 | подпись кривой: «ease-in-out» |
example | — | пример применения после тега «Пример» |
display | 0.82 | масштаб телефона |
Шаг: { kind, tap: [x, y], slow, inverse, token, desc, rows: [[подпись, значение, токен]] }.
kind — instant, instant-back, fade, slide-left, slide-right, slide-up,
slide-down, scale; inverse: true — статус-бар светлый (тёмная страница «после»);
slow: true — повтор в 4 раза медленнее.
Статус-бар и полоса навигации берутся из assets/flow-motion/svg/ — эти файлы шаблона
не удалять.
Длина: 2,1 + сумма по шагам (1 + duration + 0,9, если шаг не первый, + 1,45 + 4 × duration,
если slow).
tokens — таблица токенов
platforms | — | плашки платформ: ["React", "Flutter"] |
lead | нет | текст после плашек |
groups | — | [{ title, rows: [[токен, примитив, значение]] }] |
В образце — шесть строк в двух группах; больше — проверить на снимке, что таблица влезает между шапкой и подвалом. Длина: 3,75 + 0,12 × строк.
tiers — два уровня токенов
left | { title, desc, chips: [...] } — примитивы и их виды |
right | { title, desc, subs: [{ title, desc }] } — композитные и их подвиды |
Длина: 4,8.
durations — длительности
Полосы по длине; точки стартуют вместе, и каждая пробегает свою полосу ровно за своё время. Затем скобки диапазонов.
tokens | — | [[имя, мс]] |
ranges | — | [{ from, to, label, sub }] — скобки над токенами из диапазона |
source | нет | подпись источника под полосами |
rowH | 36 | высота строки |
barMax | 560 | длина самой длинной полосы |
Длина: 6,8.
curves — кривые
lead | тег над карточками: «Одна длительность — разные кривые · 1000 мс» |
curves | [{ token, label, bez: [x1, y1, x2, y2] }]; в образце четыре; больше — проверить на снимке |
demo | длительность прогона, с |
Длина: 3,6 + 2 × demo.
values — масштаб и непрозрачность
groups | [{ title, kind: "scale" | "opacity", items: [[токен, значение]] }]; в образце до шести в группе |
ease | кривая [x1, y1, x2, y2] |
Длина: 3,72 + 1,4 × (групп − 1).
distances — дистанции
items | — | [{ token, value, at }], at — center, left, right, top, bottom; center обязателен |
runs | — | откуда въезжает страница: ["right", "bottom"] |
duration | — | длительность въезда, с; показывается в 3 раза медленнее |
ease | — | кривая |
note | нет | подпись под схемой |
Длина: 2,2 + число въездов × (3 × duration + 1,1).
composite — компонентные токены на компоненте
items | колонки: { token, desc, demo, duration, imgs, size, rows, scale }; в образце три; больше — проверить на снимке |
ease | кривая |
demo — press (вторая картинка — нажатое состояние, проявляется и гаснет), scale (компонент
сжимается до scale), swap (первая картинка сменяется второй: скелетон → содержимое).
imgs — один-два SVG, size — [ширина, высота] компонента, rows —
[[подпись, токен, значение]].
Длина: 3,2 + 1,35 × колонок.
Объясняющий ролик с голосом
Восемь сцен без картинок из Figma: только тексты, стрелки и числа. Все идут под голос:
элемент с beat: k встаёт на фразе k своей сцены. Без голоса — по своему ритму. Образец всех
сцен с голосом — videos/design-contract-v3.js. Код и терминал набраны JetBrains Mono
(assets/fonts, лицензия OFL рядом).
| Шаги процесса слева направо; «где ломается» — выделить одну стрелку | chain |
| Весь процесс: общий путь и ветки к платформам | pipeline |
| Два подхода рядом и вывод | versus |
| Фрагмент файла и то же прозой, подсветка соответствий | code |
| Команда и её вывод | terminal |
| «Откуда → куда»: поле → место в коде | mapping |
| Крупные числа | stats |
| Итоговая фраза | quote |
| Тезисы «тег · текст», роли, правила | changes |
chain — шаги со стрелками
nodes | [{ title, desc, beat }] — три-четыре шага |
focus | необязательно: { arrow, text, beat, delay } — остальное гаснет, стрелка arrow (между шагами arrow и arrow + 1) увеличивается, text выезжает под цепочкой; delay — сдвиг от начала фразы, с |
pipeline — общий путь и ветки
stages | [{ title, desc, beat }] — общий путь сверху вниз |
targets | [{ title, desc, soon, beat }] — цели, к которым от последнего шага идут ветки; soon: true — пунктиром, «можно так же» |
note | необязательно: { text, beat } — вывод под схемой |
versus — сравнение
cards | [{ title, text, beat }] — две карточки рядом |
verdict | необязательно: { text, beat } — вывод под ними |
code — файл и проза
{
type: "code",
caption: "Один файл на компонент",
file: "badge.yaml — фрагмент",
code: ["name: Badge", "axes:", " - {name: Type, values: [Indicator, Counter]}", "tokens:", " badgeFill: {Error: bg-error-primary, …}"],
hl: ["Indicator, Counter", "bg-error-primary"], // подстроки кода, которые подсветятся
prose: { title: "Карточка", text: "Бейдж бывает точкой или счётчиком. Ошибку показывает красный фон.", hl: ["точкой или счётчиком", "красный фон"], beat: 1 },
mark: { beat: 2 }, // на какой фразе зажечь подсветку
note: { text: "Одно и то же — машинно и прозой", beat: 3 },
beat: 0, // фраза, на которой печатаются строки кода
}
Код — строки YAML: ключи ярче, скобки тише. В образце 11 строк; больше — проверить на снимке.
terminal — команда и вывод
command | команда, печатается по буквам: npm run sweep |
lines | [{ label, value, accent, beat }] — строки вывода; accent: true — подсветить |
note | необязательно: { text, beat } — когда и на чём снято |
Вывод — настоящий, со дня съёмки; дата — в note.
mapping — откуда → куда
heads | [колонка слева, колонка справа]: «В контракте», «В коде core-ui» |
rows | [{ from, to, beat }]; from набран моноширинным |
note | необязательно: { text, beat } — строки гаснут, вывод выезжает |
stats — числа
items | [{ value, label, beat }]; value — число, считает от нуля, тысячи через пробел |
note | необязательно: строка — источник и дата подсчёта мелко |
Число со слов автора без источника — в подписи «примерно» и вопрос в отчёте.
quote — итоговая фраза
lines | — | [{ text, beat }] — фраза строками |
size | 104 | кегль, если строка не влезает: «Думать — по-прежнему людям.» — 84 |
Финальной сцене ставить hold: 2.5.