Skip to content
Docs
Open Promoeyes

html

uisset 124× in templates and rigs

A real-HTML stage, the `ui` twin: its children are DOM markup and a `style(text=…)` child is the CSS, rendered to a texture with time pinned to the scene (CSS @keyframes are seeked). Inside a device it is the screen, standing alone a flat panel, under a material's `*_map_from` slot a texture source.

html#m22-emit-page-page(width=600 height=340 coords_width=1200 emit=8 position="-90 -20 -60" rotation="0 12 0")

Attributes

heightnumberThe stage's height, mm (a bare free-standing tag: 1080).124×
widthnumberThe stage's width, mm (a bare free-standing tag: 1920).124×
coords_widthnumberLays the page out this many CSS px wide and scales it onto the stage (390 puts a phone page on a 71 mm glass).117×
fillcolour #rrggbbThe page's background colour.76×
relieftextTurns the page into a height map for a displacement or bump slot: `luma` (lightness is height), `alpha` (coverage), `ao`, `depth` or `normal`.36×
relief_blurnumberSoftens the relief's edges into a bevel, CSS px (default 0).19×
relief_gammanumberGamma on the relief's heights (default 1).10×
coords_heightnumberThe page's CSS px height (default: from `coords_width` and the stage's shape).9×
relief_inverttrue / false`true` swaps high and low.9×
xnumberA free-standing panel's x position, mm, when `position` is not given.7×
ynumberA free-standing panel's y position, mm (y up), when `position` is not given.7×
position"x y z"4×
rotation"x y z"3×
emitnumberMakes the page a light: an area light of its size, coloured by the page's mean colour, at this intensity × its mean brightness.1×
relief_strengthnumberThe slope of a `normal` relief (default 2).1×

Where it goes

Written under

iphone 20map_from 20laptop 14scene 11bump_map_from 8ipad 6imac 6displacement_map_from 5chrome 4roughness_map_from 3emissive_map_from 3iridescence_map_from 3parallax_map_from 3clearcoat_map_from 2clearcoat_roughness_map_from 2sheen_color_map_from 2

Holds

opacity 8position 3

Examples

html#m22-emit-page-pagein uis/html-mapsOpen and play →
html#m22-emit-page-page(width=600 height=340 coords_width=1200 emit=8 position="-90 -20 -60" rotation="0 12 0")
  style(text=".s{height:100%;background:#000;position:relative;overflow:hidden;font:900 120px system-ui;color:#fff;display:grid;place-items:center} .s::before{content:'';position:absolute;inset:-30%;background:conic-gradient(from 0deg,#ff6b6b,#ffb86b,#4ade80,#22d3ee,#5b8cff,#c14bff,#ff6b6b);filter:blur(30px);animation:spin 7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .s b{position:relative;mix-blend-mode:overlay}")
  div.s
    b(text="EMIT")
html#s01-pagein uis/htmlOpen and play →
html#s01-page(width=1920 height=1080 x=960 y=540)
  opacity
    0 0
    0.7 easeOutCubic 1
  style(text=".hero{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;font-family:system-ui,sans-serif} h1{font-size:170px;line-height:1;margin:0;font-weight:800;letter-spacing:-0.03em;background:linear-gradient(90deg,#35e0ff,#9b6bff 60%,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent} p{font-size:42px;color:#8ea3c8;margin:0} .bar{width:920px;height:16px;border-radius:8px;background:#14233a;overflow:hidden;box-shadow:inset 0 0 0 1px #1e4457} .bar i{display:block;height:100%;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,#35e0ff,#9b6bff)} .row{display:flex;gap:18px} .chip{padding:14px 30px;border-radius:999px;background:#0d3a4d;color:#9ff0ff;font-size:30px;font-weight:700;border:1.5px solid #35e0ff;animation:pop .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(1s + var(--i)*.25s)} @keyframes pop{from{transform:translateY(40px) scale(.7);opacity:0}to{transform:none;opacity:1}}")
  div.hero
    h1(text="Hello, HTML")
    p(text="markup in, texture out — flexbox, gradients and @keyframes are the runtime's")
    div.bar
      i
    div.row
      span.chip(style="--i:0" text="html")
      span.chip(style="--i:1" text="html3d")
      span.chip(style="--i:2" text="drawElementImage")
      span.chip(style="--i:3" text="foreignObject")
html#s04-pagein uis/htmlOpen and play →
html#s04-page(width=1920 height=1080 x=960 y=540)
  style(text=".stage{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:54px;font-family:system-ui,sans-serif;color:#e8eefc} .cards{display:flex;gap:26px} .card{width:250px;height:300px;border-radius:24px;background:linear-gradient(160deg,#0f1c30,#0a1220);border:1px solid #1e3550;box-shadow:0 30px 60px -28px #000d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;animation:rise .9s cubic-bezier(.2,.9,.2,1.1) both;animation-delay:calc(.3s + var(--i)*.22s)} .card b{font-size:56px;letter-spacing:-0.03em} .card small{color:#7f90b0;font-size:16px;letter-spacing:.14em;text-transform:uppercase} @keyframes rise{from{opacity:0;transform:translateY(120px) rotate(-6deg) scale(.8)}to{opacity:1;transform:none}} .ring{width:110px;height:110px;border-radius:50%;border:10px solid #14233a;border-top-color:#35e0ff;border-right-color:#9b6bff;animation:spin 1.6s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .row{display:flex;align-items:center;gap:40px} .pulse{width:24px;height:24px;border-radius:50%;background:#41e6a0;position:relative} .pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:3px solid #41e6a0;animation:ping 1.4s ease-out infinite} @keyframes ping{from{transform:scale(1);opacity:1}to{transform:scale(3);opacity:0}} .clock{font-variant-numeric:tabular-nums;font-size:34px;color:#8ea3c8} .clock b{color:#eaf6ff} .marquee{width:900px;overflow:hidden;white-space:nowrap;border-radius:14px;background:#0b1622;border:1px solid #1e3550;padding:14px 0} .marquee span{display:inline-block;padding-left:100%;font-size:26px;color:#9ff0ff;animation:slide 6s linear both} @keyframes slide{to{transform:translateX(-100%)}} .card:nth-child(1) b{color:#35e0ff} .card:nth-child(2) b{color:#9b6bff} .card:nth-child(3) b{color:#ff7ad9} .card:nth-child(4) b{color:#41e6a0}")
  div.stage
    div.cards
      div.card(style="--i:0")
        b(text="rise")
        small(text="staggered entrance")
      div.card(style="--i:1")
        b(text="spin")
        small(text="1.6s linear ∞")
        div.ring
      div.card(style="--i:2")
        b(text="ping")
        small(text="pseudo-element")
        div.pulse
      div.card(style="--i:3")
        b(text="delay")
        small(text="calc(var(--i) * .22s)")
    div.row
      div.clock
        | scene time
        b(text=" --t")
        | ; capture, scrub and playback render the same frame
    div.marquee
      span(text="animation-play-state: paused · animation-delay: authored − t · the DOM sits still while the reel decides what time it is ·")