charts
charts
CHARTS — primitive showcase. Every chart element in the kit, five scenes, five layouts, every native content animation.
Read the rig's notes
1. THE HERO (6.0s) — one big line-chart panel flips in and draws its
line left→right (chart-draw). Headline "CHARTS."
2. THE GRID (7.0s) — a 2×2 dashboard: line-chart, bar-chart,
progress-bar stack, stat-ring trio. Staggered
entrances (slide / depth-pop / rise), staggered
chart-draw + bar-fill + ring-fill. A cursor tours it.
3. THE DUO (6.5s) — light vs dark: a dark bar-chart card and a white
Adaptive pie-chart card flip in from opposite sides.
4. THE ORBIT (7.0s) — five 480×300 chart panels on a pentagon rig,
stepping 72° per beat (mini line / bar / rings /
progress / pie).
5. THE CONSOLE (7.5s) — ONE dense dark ops board: KPI chips, hero
throughput line, deploy bars, health rings and a
rollout progress stack, all firing staggered.
6. THE BOARD (7.5s) — ONE big white Adaptive review board: budget
donut, velocity bars, adoption line, initiative
progress, rating + goal rings.
7. THE OUTRO (6.0s) — a hero stat-ring fills to 100% while reading "5";
sign-off copy and a CTA chip that presses itself.
Chains (match key → scenes): haze-a / haze-b / dot-a / dot-b — every scene,
classic colour/pose morph. All transitions match-move.
Palette — aurora-dark over deep blue void (the charts' native defaults):
void #0a1322/#050505 · surfaces #0d1520/#0c1926 · strokes #22384c/#2a6b85 ·
teal #35e0ff · violet #a855f7 · pink #ff3d77 · green #41e6a0 · amber #f59e0b ·
text #f2fbff/#8fa6bd/#64748b · white Adaptive tile #ffffff (pie-chart scene).
Haze recipe: blue #0f6fd6 lobe + violet #5e2a9d lobe + two drifting dots,
unreal_bloom 0.18–0.2 on every scene.
Authoring notes for this reel's 1920x1080 world units:
• UIs are PURE FLEX FLOW: every ui3d root is a column (align=center +
padding-top), cards are w=<px> h=hug with padding, rows/columns/gap/
margins/justify=space-between do all placement. No anchor/inset/x/y
anywhere; chart w/h (and ring r, bar h) are intrinsic surface knobs.
• every ELEMENT position/rotation/scale keyframe is a RELATIVE offset onto
the node's base attribute, so transform tracks are deltas that start and
settle at 0. Camera tracks are absolute (never rebased).
• line-chart points are chart-local SVG coords (y-down, origin top-left of
the chart surface) sized to each chart's own w×h.
• bar-chart/pie-chart are Adaptive-Card styled: bar-chart takes a dark
background= override; pie-chart always paints a white card, so it is
framed by a white tile on purpose.
Preview: /packages/runtime/index.html?project=promos/primitives/uis/charts/charts.promo- Topic
- uis
- Scenes
- 7
- Kind
- reference rig
//
CHARTS — primitive showcase. Every chart element in the kit, five scenes,
five layouts, every native content animation.
1. THE HERO (6.0s) — one big line-chart panel flips in and draws its
line left→right (chart-draw). Headline "CHARTS."
2. THE GRID (7.0s) — a 2×2 dashboard: line-chart, bar-chart,
progress-bar stack, stat-ring trio. Staggered
entrances (slide / depth-pop / rise), staggered
chart-draw + bar-fill + ring-fill. A cursor tours it.
3. THE DUO (6.5s) — light vs dark: a dark bar-chart card and a white
Adaptive pie-chart card flip in from opposite sides.
4. THE ORBIT (7.0s) — five 480×300 chart panels on a pentagon rig,
stepping 72° per beat (mini line / bar / rings /
progress / pie).
5. THE CONSOLE (7.5s) — ONE dense dark ops board: KPI chips, hero
throughput line, deploy bars, health rings and a
rollout progress stack, all firing staggered.
6. THE BOARD (7.5s) — ONE big white Adaptive review board: budget
donut, velocity bars, adoption line, initiative
progress, rating + goal rings.
7. THE OUTRO (6.0s) — a hero stat-ring fills to 100% while reading "5";
sign-off copy and a CTA chip that presses itself.
Chains (match key → scenes): haze-a / haze-b / dot-a / dot-b — every scene,
classic colour/pose morph. All transitions match-move.
Palette — aurora-dark over deep blue void (the charts' native defaults):
void #0a1322/#050505 · surfaces #0d1520/#0c1926 · strokes #22384c/#2a6b85 ·
teal #35e0ff · violet #a855f7 · pink #ff3d77 · green #41e6a0 · amber #f59e0b ·
text #f2fbff/#8fa6bd/#64748b · white Adaptive tile #ffffff (pie-chart scene).
Haze recipe: blue #0f6fd6 lobe + violet #5e2a9d lobe + two drifting dots,
unreal_bloom 0.18–0.2 on every scene.
Authoring notes for this reel's 1920x1080 world units:
• UIs are PURE FLEX FLOW: every ui3d root is a column (align=center +
padding-top), cards are w=<px> h=hug with padding, rows/columns/gap/
margins/justify=space-between do all placement. No anchor/inset/x/y
anywhere; chart w/h (and ring r, bar h) are intrinsic surface knobs.
• every ELEMENT position/rotation/scale keyframe is a RELATIVE offset onto
the node's base attribute, so transform tracks are deltas that start and
settle at 0. Camera tracks are absolute (never rebased).
• line-chart points are chart-local SVG coords (y-down, origin top-left of
the chart surface) sized to each chart's own w×h.
• bar-chart/pie-chart are Adaptive-Card styled: bar-chart takes a dark
background= override; pie-chart always paints a white card, so it is
framed by a white tile on purpose.
Preview: /packages/runtime/index.html?project=promos/primitives/uis/charts/charts.promo
promo#charts
// =============================================================
// SCENE 1 · THE HERO — one line-chart, drawn like it means it
// =============================================================
scene#s1-hero(duration=6 transition=match-move)
camera(type=perspective fov=48 near=0.1 far=8000 position="960 540 1500" look_at="960 540 0")
position
0 960 540 1500
2.6 easeInOutCubic 960 520 1330
4.6 easeInOutCubic 990 540 1380
6 easeInOutCubic 960 540 1430
look_at
0 960 540 0
2.6 easeInOutCubic 960 520 0
4.6 easeInOutCubic 990 540 0
6 easeInOutCubic 960 540 0
fov
0 48
6 easeInOutCubic 48
layers
layer#world(space=world z-index=0)
background(top=#0a1322 bottom=#