Components and the UI kit
The component library of parameterised scenes and the UI kit of animatable app screens: what they are, how params work and how they stay editable.
Components#
A component is a named scene made from a few parameters: params in, one ordinary scene out. The library includes hook title, big number, quote card, phone, laptop and browser showcases, app-screen showcase, journey step, chaos to calm, checklist, caption style, lower third, logo outro and transition card. Components adapt to wide, square and tall frames and read brand tokens.
Because the result is an ordinary scene, you can still edit any of its layers afterwards. Params are validated with plain-words errors, and component_read gives each param with its type, limits and default, and a sample that is valid as it is.
Themed components#
From the design rounds: marker highlight (a yellow marker swipe), paper card, ink headline, journey cards, stamp badge, hand underline and mascot peek. Text layers can take a marker or scribble style behind or under chosen words.
The UI kit#
Screens drawn from data by Video's own renderer, with no screenshots and no code:
- about 105 line icons on one grid,
- light, dark and brand palettes and one text hierarchy,
- an enter vocabulary (pop, rise, slide, fade, zoom, blur) with timing beats,
- primitives (avatar, badge, chip, button with a press, input with type-in, toggle, progress, toast),
- 28 pieces: calendar month and week, invoice with a count-up and a PAID stamp, contact card, contact, inbox, file and notification lists, agent roster, activity feed, chat thread with typing dots, kanban with a moving card, sortable table, KPI tiles, chart card, approval card, document preview, matter page and pipeline.
A screen is chrome (a header, a tab bar or a sidebar) plus pieces plus steps (click, scroll, highlight). It plays inside a device frame.
Why it matters#
A product video made of screenshots goes stale at the next release. A screen drawn from data does not: change the data, render again.