Skip to content
Docs
Open Promoeyes
ui

ui

UI primitives — the ui component vocabulary as a promo stage, one trial per scene. The twin of html.promo: the same ten beats, built from ui components instead of markup.

Read the rig's notes
`ui` is a texture stage: its children rasterise into ONE texture painted on
a single plane (centred on the node's position). `ui3d` is the mesh twin:
the same children emit as real world planes, one mesh per item, so each
child can leave the surface on its own z. Both share one build core, so an
item tree moves between them verbatim.

Where html reaches for a stylesheet, ui reaches for a component: `headline`
with per-span colour instead of a background-clip gradient, `paragraph` /
`text-block` / `rich-text-block` instead of <p>/<mark>/<code>, `table`
instead of <table>, `input-*` + `action-set` instead of native controls,
`bar-chart` / `line-chart` / `stat-ring` / `progress-bar` instead of CSS
bars. Layout is flex (`layout=row|column|grid`, `gap`, `padding`, `align`,
`justify`, `w=hug|fill|%`) or absolute (`x`/`y` = top-left, y down).

Time is the reel's, not the stylesheet's: every child carries keyframe
tracks — `opacity` / `scale` / `position` "dx dy dz" / `rotation.y` — plus
the content channels (`bar-fill`, `chart-draw`, `ring-fill`, `typewriter`,
`check-draw`) and the continuous oscillators (`float`, `pulse`).
Sizing is mm like <html>: a bare full-frame stage is the 1920x1080 wall, a
device screen takes the glass size (iphone 71x154, laptop 346x223).

AUTHORING NOTE — an item that carries a nested ARRAY block (`spans`, `data`,
`points`, `columns`, `rows`, `choices`, `actions`, `facts`, `runs`) is
emitted OUTSIDE its parent's <children> group, and every such item is
appended AFTER its plain siblings at parse time. Mixed with siblings it
silently jumps to the end of the flex order. Wrap each one in its own
`card(w=hug h=hug fill=transparent shadow=false)` — that is what every
array-bearing component below sits in.

PIXEL-SPACE SECTION (01-07) — full-frame billboards, camera 960 540 1320.
  01. hello      — headline spans, a flex hero, a progress-bar on bar-fill
  02. typography — paragraph, text-block, rich-text-block runs, a quote
  03. grid       — a flex-grid dashboard: stat tiles, bar-chart, feed rows
  04. tracks     — the animation vocabulary, one card per channel
  05. table      — the table component: columns, types, zebra rows
  06. code       — window-frame chrome + rich-text-block syntax runs
  07. forms      — input-text / choiceset / toggle / number / action-set
WORLD-SPACE SECTION (08-10) — mm, lit like a product shot.
  08. device     — iphone + laptop, each screen a <ui> stage
  09. panels     — three floating <ui3d> panels yawed over spheres
  10. exploded   — ui3d: a dashboard's children separate into Z layers

Capture: `nx run tools:capture:webgl -- --project promos/primitives/uis/ui/ui.promo`
Preview: /packages/runtime/index.html?project=promos/primitives/uis/ui/ui.promo
Topic
uis
Scenes
10
Kind
reference rig
//
    UI primitives — the ui component vocabulary as a promo stage, one trial
    per scene. The twin of html.promo: the same ten beats, built from ui
    components instead of markup.

    `ui` is a texture stage: its children rasterise into ONE texture painted on
    a single plane (centred on the node's position). `ui3d` is the mesh twin:
    the same children emit as real world planes, one mesh per item, so each
    child can leave the surface on its own z. Both share one build core, so an
    item tree moves between them verbatim.

    Where html reaches for a stylesheet, ui reaches for a component: `headline`
    with per-span colour instead of a background-clip gradient, `paragraph` /
    `text-block` / `rich-text-block` instead of <p>/<mark>/<code>, `table`
    instead of <table>, `input-*` + `action-set` instead of native controls,
    `bar-chart` / `line-chart` / `stat-ring` / `progress-bar` instead of CSS
    bars. Layout is flex (`layout=row|column|grid`, `gap`, `padding`, `align`,
    `justify`, `w=hug|fill|%`) or absolute (`x`/`y` = top-left, y down).

    Time is the reel's, not the stylesheet's: every child carries keyframe
    tracks — `opacity` / `scale` / `position` "dx dy dz" / `rotation.y` — plus
    the content channels (`bar-fill`, `chart-draw`, `ring-fill`, `typewriter`,
    `check-draw`) and the continuous oscillators (`float`, `pulse`).
    Sizing is mm like <html>: a bare full-frame stage is the 1920x1080 wall, a
    device screen takes the glass size (iphone 71x154, laptop 346x223).

    AUTHORING NOTE — an item that carries a nested ARRAY block (`spans`, `data`,
    `points`, `columns`, `rows`, `choices`, `actions`, `facts`, `runs`) is
    emitted OUTSIDE its parent's <children> group, and every such item is
    appended AFTER its plain siblings at parse time. Mixed with siblings it
    silently jumps to the end of the flex order. Wrap each one in its own
    `card(w=hug h=hug fill=transparent shadow=false)` — that is what every
    array-bearing component below sits in.

    PIXEL-SPACE SECTION (01-07) — full-frame billboards, camera 960 540 1320.
      01. hello      — headline spans, a flex hero, a progress-bar on bar-fill
      02. typography — paragraph, text-block, rich-text-block runs, a quote
      03. grid       — a flex-grid dashboard: stat tiles, bar-chart, feed rows
      04. tracks     — the animation vocabulary, one card per channel
      05. table      — the table component: columns, types, zebra rows
      06. code       — window-frame chrome + rich-text-block syntax runs
      07. forms      — input-text / choiceset / toggle / number / action-set
    WORLD-SPACE SECTION (08-10) — mm, lit like a product shot.
      08. device     — iphone + laptop, each screen a <ui> stage
      09. panels     — three floating <ui3d> panels yawed over spheres
      10. exploded   — ui3d: a dashboard's children separate into Z layers

    Capture: `nx run tools:capture:webgl -- --project promos/primitives/uis/ui/ui.promo`
    Preview: /packages/runtime/index.html?project=promos/primitives/uis/ui/ui.promo
promo#ui
  // =======================================================================
  // SCENE 01 · HELLO — a flex hero, headline spans, a bar-fill progress bar
  // =======================================================================
  scene#s01-hello(duration=6 transition=match-move transition-duration=0.8)
    camera(type=perspective fov=48 near=0.1 far=8000 position="960 540 1320" look_at="960 540 0")
      position
        0 960 540 1360
        6 easeInOutCubic 960 540 1300
    background(top=#081120 bottom=#04060c)
    postprocessing
      step(name=render)
      step(name=unreal_bloom strength=0.18 radius=0.4 threshold=0.85)
    haze#s01-haze-a(match=haze-a position="1320 760 -650" opacity=0.17 color=#0f6fd6 size="3100 2360" pulse=0 decay=0)
      position
        0 0 0 0
        6 easeInOutCubic -80 40 0
    haze#s01-haze-b(match=haze-b position="420 300 -680" opacity=0.11 color=#5e2a9