icons
icons
ICONS — "Name the outline." Seven scenes on one attribute: <icon extrude="…">. The companion to shapes.pug: that reel authors its silhouettes by hand as <path d="…">, this one NAMES them out of the 5093 vendored Tabler icons and gets the same kind of mesh. One shield carries the whole reel.
Read the rig's notes
1. THE ICON (7.0s) — the flat <icon> plane beside the extruded one. Same
tag, same asset; `extrude` is the only difference.
2. TWO BUILDS (7.5s) — five filled icons over five outline ones. Filled
icons are closed regions, so they extrude into
solids; the outline set is STROKES, which have no
interior — those sweep into tubes instead. The tag
picks the build from the asset; you never say which.
3. EXTRUDE&BEVEL(7.5s) — one shield icon six times: extrude 8/48/130 at bevel
0, then bevel 0/10/26 at extrude 48, raked from
below so the walls and the rim highlight read.
Out: ORBIT-360 around the grid.
4. CURVE SEG. (7.0s) — a filled circle at curve_segments 2/3/5/12/48 (2 is
a diamond, 48 is a disc), over the shield at 2/6/32
— whose straight edges never change, because
curve_segments tessellates CURVES only.
5. MATERIALS (7.0s) — one silhouette, six surfaces: matte · polished metal
· clearcoat · glass (transmission) · emissive (the
bloom eats it) · unlit basic. The same material
vocabulary a hand-authored <path> takes.
6. THE LIBRARY (8.0s) — fifteen icons in three rows, two filled and one
swept, settling in from depth. No modelling step.
7. THE OUTRO (6.0s) — the shield shrinks to a mark over the wordmark, the
library parks far behind, the CTA presses itself.
Chains (match key → scenes):
hero S1 extruded shield → S2 top-row centre → S3 middle slab → S4 bottom
centre → S5 polished metal → S6 grid centre → S7 mark. One classic
match-move the whole way; no particle morphs (the geometry IS the
story — dissolving it into dust hides it).
haze-a / haze-b / dot-a / dot-b — every scene, classic colour/pose morph.
Look: instrument-panel blue, identical to shapes.pug so the two reels cut
together. Void #060912/#03050b under #0d1428/#0b1224/#0a1020 gradients ·
electric blue #3d7bff · deep indigo #1b2a6b · cyan #4dd6ff · amber #ffb35c ·
violet #c9a8ff · pink #ff8fb3 · green #4ade9b · surfaces #101625/#141b2d/
#1a2237 · strokes #22304d/#2c3a5c · text #ffffff/#dbe4f5/#8494b5.
Every scene carries the same four-lobe haze rig:
haze-a #3d7bff scale ~3300x2480 opacity 0.34-0.41 the room's key glow
haze-b #1b2a6b scale ~2600x2000 opacity 0.23-0.30 the cold counter-lobe
dot-a #4dd6ff scale ~76 opacity 0.50 near mote
dot-b #ffffff scale ~54 opacity 0.42 far mote
plus ACESFilmic and unreal_bloom 0.20-0.24, and — because every hero here is a
real lit mesh, not a text plane — a four-light rig in EVERY scene: ambient
0.34-0.46, a white key from upper-left, a blue point fill and a cyan/amber rim,
over the studio_small_04_2k HDR at intensity 0.17-0.22 for the metal.
Camera grammar: fov 46 throughout, and each scene owns exactly one move.
S1 pushes onto the pair. S2 dollies across the two rows. S3 RAKES — the camera
sits below the slabs and rises, which is the only way a bevel ever reads. S4
drifts left-then-right along the tessellation ramp. S5 arcs so the metal and
the glass both turn through the key. S6 pulls back off the grid. S7 lifts and
settles. Nothing whips; this reel is a spec sheet, not a trailer.
On-screen copy, on the GLOBAL clock (no VO — the icons are the argument;
each line is cut to the beat its subject lands on):
1.20s "PROMO GEOMETRY · icon(extrude)" S1 kicker
1.90s "One tag. Add extrude." S1 headline
2.90s "The same tabler icon, the same asset…" S1 sub
3.90s the two build labels land under each S1 labels
9.10s "Two builds, picked for you." S2 headline
10.90s "variant=filled — closed regions extrude…" S2 fill label
11.70s "the outline set — strokes sweep…" S2 stroke label
18.30s "Same two numbers. Same job." S3 headline
19.30s "extrude 8 · 48 · 130 — bevel held at 0" S3 row label
20.20s "bevel 0 · 10 · 26 — extrude held at 48" S3 row label
25.30s "curve_segments decides how round." S4 headline
26.30s the 2/3/5/12/48 ramp labels stagger in S4 labels
29.00s "It tessellates curves only…" S4 sub
33.10s "One silhouette, any surface." S5 headline
34.40s six material labels stagger in S5 labels
40.30s "Five thousand of them. Already here." S6 headline
41.50s "No modelling, no GLB, no export step…" S6 sub
46.10s "ICONS" S7 wordmark
47.40s "Name the outline. The runtime…" S7 line
48.60s CTA card S7 outro
Scene map
s1-icon 7.0 match-move flat plane vs extruded mesh
s2-builds 7.5 match-move filled solids over swept strokes
s3-depth 7.5 match + orbit-360 (1.2s) extrude/bevel grid, raking cam
s4-curve 7.0 match-move the 2→48 tessellation ramp
s5-material 7.0 match-move six surfaces, one silhouette
s6-library 8.0 match-move fifteen icons from depth
s7-outro 6.0 none mark · wordmark · CTA
Scene durations total 50.0s; the six match gaps add ~0.78s each, so the reel
runs 54.7s against assets/music/promoais/promo-track-12.mp3 at volume 0.16.
Every copy time in the table above is on that 54.7s clock.
Five authoring notes for this reel's 1920x1080 world units
(see packages/engine/lib/icon-extrude.ts):
• <icon> is TWO tags in one. Bare, it is a flat plane textured by a
rasterized SVG — that is what S1's left-hand sample is. Add ANY geometry
knob (extrude / bevel / bevel_segments / curve_segments) and the same tag
builds a real mesh instead. Nothing else changes: same `name`, same `set`,
same vendored asset under assets/ui-icons/tabler-icons/.
• the 3D flavor is a scene NODE, so it takes `position="x y z"` in world
units like every other node here. It does NOT take the flat flavor's
`x`/`y` (those are pixels on a 1280x720 ui stage) — authoring them on an
extruded icon warns at parse time rather than silently landing at 0,0.
• `size` is the icon's BOX — the SVG viewBox mapped to world, not the ink's
bounding box — so a row of mixed icons stays optically aligned even
though a bolt inks narrower than a circle. `extrude` and `bevel` are real
world depths, independent of `size`: unlike shapes.pug's <path> flavor,
where depth/bevel are ratios blown up by the node's `scale`, nothing is a
ratio here — 48 means 48 world units at any size.
• filled icons extrude; the default outline set SWEEPS (a stroke has no
interior — extruding one fills it in, so those become tubes of
cross-section stroke_width x extrude). S2 is the whole argument. Only
~1050 of the 5093 tabler icons have a `filled` twin, so check
assets/ui-icons/tabler-icons/filled/ before authoring `variant=filled`.
• every ELEMENT position/rotation keyframe is a RELATIVE offset onto the
node's base attribute, and `scale` keyframes MULTIPLY the base — so all
transform tracks below start and settle at 0 (or 1 for scale). Camera
<position> tracks are the exception; those are never rebased.
Preview: /packages/runtime/index.html?project=promos/primitives/shapes/icons.promo- Topic
- shapes
- Scenes
- 7
- Kind
- reference rig
//
ICONS — "Name the outline." Seven scenes on one attribute: <icon extrude="…">.
The companion to shapes.pug: that reel authors its silhouettes by hand as
<path d="…">, this one NAMES them out of the 5093 vendored Tabler icons and
gets the same kind of mesh. One shield carries the whole reel.
1. THE ICON (7.0s) — the flat <icon> plane beside the extruded one. Same
tag, same asset; `extrude` is the only difference.
2. TWO BUILDS (7.5s) — five filled icons over five outline ones. Filled
icons are closed regions, so they extrude into
solids; the outline set is STROKES, which have no
interior — those sweep into tubes instead. The tag
picks the build from the asset; you never say which.
3. EXTRUDE&BEVEL(7.5s) — one shield icon six times: extrude 8/48/130 at bevel
0, then bevel 0/10/26 at extrude 48, raked from
below so the walls and the rim highlight read.
Out: ORBIT-360 around the grid.
4. CURVE SEG. (7.0s) — a filled circle at curve_segments 2/3/5/12/48 (2 is
a diamond, 48 is a disc), over the shield at 2/6/32
— whose straight edges never change, because
curve_segments tessellates CURVES only.
5. MATERIALS (7.0s) — one silhouette, six surfaces: matte · polished metal
· clearcoat · glass (transmission) · emissive (the
bloom eats it) · unlit basic. The same material
vocabulary a hand-authored <path> takes.
6. THE LIBRARY (8.0s) — fifteen icons in three rows, two filled and one
swept, settling in from depth. No modelling step.
7. THE OUTRO (6.0s) — the shield shrinks to a mark over the wordmark, the
library parks far behind, the CTA presses itself.
Chains (match key → scenes):
hero S1 extruded shield → S2 top-row centre → S3 middle slab → S4 bottom
centre → S5 polished metal → S6 grid centre → S7 mark. One classic
match-move the whole way; no particle morphs (the geometry IS the
story — dissolving it into dust hides it).
haze-a / haze-b / dot-a / dot-b — every scene, classic colour/pose morph.
Look: instrument-panel blue, identical to shapes.pug so the two reels cut
together. Void #060912/#03050b under #0d1428/#0b1224/#0a1020 gradients ·
electric blue #3d7bff · deep indigo #1b2a6b · cyan #4dd6ff · amber #ffb35c ·
violet #c9a8ff · pink #ff8fb3 · green #4ade9b · surfaces #101625/#141b2d/
#1a2237 · strokes #22304d/#2c3a5c · text #ffffff/#dbe4f5/#8494b5.
Every scene carries the same four-lobe haze rig:
haze-a #3d7bff scale ~3300x2480 opacity 0.34-0.41 the room's key glow
haze-b #1b2a6b scale ~2600x2000 opacity 0.23-0.30 the cold counter-lobe
dot-a #4dd6ff scale ~76 opacity 0.50 near mote
dot-b #ffffff scale ~54 opacity 0.42 far mote
plus ACESFilmic and unreal_bloom 0.20-0.24, and — because every hero here is a
real lit mesh, not a text plane — a four-light rig in EVERY scene: ambient
0.34-0.46, a white key from upper-left, a blue point fill and a cyan/amber rim,
over the studio_small_04_2k HDR at intensity 0.17-0.22 for the metal.
Camera grammar: fov 46 throughout, and each scene owns exactly one move.
S1 pushes onto the pair. S2 dollies across the two rows. S3 RAKES — the camera
sits below the slabs and rises, which is the only way a bevel ever reads. S4
drifts left-then-right along the tessellation ramp. S5 arcs so the metal and
the glass both turn through the key. S6 pulls back off the grid.