Standard Library

Layouts, Typography, Colors, Components

Composable building blocks for on-brand VideoML scenes.

View page source GitHub repo NPM: @videoml/stdlib View DOM components

Layouts

Layouts are full-frame components that define regions: header, content, columns, and grids. They keep structure consistent while allowing styling through tokens.

<scene id="layout-demo">
  <title-slide props='{"title":"Hello","subtitle":"From VideoML"}' />
</scene>

Typography

Typeface sets pair headline + subhead + eyebrow fonts. Use the sets to keep text hierarchy consistent across scenes.

Typeface tokens are documented here; runtime fonts can be swapped per brand while keeping layout structure intact.

Color Schemes

Radix-inspired palettes keep contrast gentle (no pure black/white) and rely on surfaces instead of borders.

<scene styles='{"vars":{"--color-bg":"#0b0f1f","--color-text":"#eef1ff"}}'>
  <chapter-heading props='{"title":"Cool Dark"}' />
</scene>

Components

Title slides, lower thirds, callouts, bullet lists
Charts and engine demos for motion proofing
Progress bars and UI accents

Use frame-driven motion only; no CSS animations in deterministic render paths.