html3d

uisset 12× in templates and rigs

A real-HTML stage, the `ui3d` twin: every top-level markup child becomes its own world plane, placed from its CSS layout box and animated by its own tracks. With `overlay=screen` inside a device the planes sit flush on the glass and can fly off it.

html3d#m21-emit-3d-cards(width=600 height=340 world_width=600 emit=7 position="-80 40 -40")

Attributes

heightnumberThe stage's height, in its own units.12×

widthnumberThe stage's width, in its own units (mm on a device's glass).12×

coords_widthnumberLays the page out this many CSS px wide and scales it onto the stage.10×

liftnumberHow far above the glass the planes sit, mm.10×

overlaytextInside a device: `screen` anchors the planes on its glass in the screen's own units; another screen's name (`cover`) anchors them there.10×

emitnumberEach plane becomes an area light of its size, coloured by its mean colour, at this intensity × its mean brightness.1×

position"x y z"1×

world_widthnumberA free-standing stage's width in the world, mm; the stage is scaled to it.1×

look_attextA free-standing panel: turns it every frame so its face (+z) points at a target — a point `x y z` (mm, world), `#node-id` (live) or `camera` (live); its `rotation` is an offset on top. A device's screen turns with the device: put look_at there.0×

uptextWith `look_at`: the world direction kept as the node's up, `x y z` (default `0 1 0`).0×

Where it goes

Written under

iphone 5laptop 2scene 2ipad 1imac 1chrome 1

Holds

position 60rotation 38opacity 17scale 6

Examples

html3d#m21-emit-3d-cardsin uis/html-mapsOpen and play →

html3d#m21-emit-3d-cards(width=600 height=340 world_width=600 emit=7 position="-80 40 -40")
  style(text=".c{position:absolute;width:260px;height:150px;border-radius:24px;font:700 34px system-ui;color:#fff;padding:26px;box-sizing:border-box} .a{left:20px;top:20px;background:linear-gradient(135deg,#ff6b6b,#ffb86b)} .b{left:320px;top:20px;background:linear-gradient(135deg,#5b8cff,#22d3ee)} .d{left:20px;top:190px;background:linear-gradient(135deg,#4ade80,#a3e635)} .e{left:320px;top:190px;background:linear-gradient(135deg,#c14bff,#ff6b9d)}")
  div.c.a(text="warm")
    position
      0 0 0 0
      3.5 easeInOutSine -60 -20 80
      7 easeInOutSine 0 0 0
  div.c.b(text="cool")
    position
      0 0 0 0
      3.5 easeInOutSine 60 -20 120
      7 easeInOutSine 0 0 0
  div.c.d(text="green")
    position
      0 0 0 0
      3.5 easeInOutSine -40 30 40
      7 easeInOutSine 0 0 0
  div.c.e(text="magenta")
    rotation
      0 0 0 0
      3.5 easeInOutSine 0 -30 0
      7 easeInOutSine 0 0 0