Hey hey

[trusktr]

Hi Piilwon, hope all is well. By they way, I've been making progress at github.com/trusktr/infamous. Will be updating the README soon. Right now it's basically a better version of Famous 0.3 with 0.5 sizing/mountPoint (started from scratch, not forked), with an HTML interface (made with Custom Elements), so integration with anything (Angular, React, etc) is really easy.

I'm aiming to add WebGL soon (mixed mode). I'd love some feedback, if you want to try it out. For example, to make something rotating right now, just npm install infamous then

import {Motor, Node, Scene} from 'infamous'

const scene = new Scene

const node = new Node({
  absoluteSize: {x:100, y:100},
  align: {x:0.5, y:0.5},
  mountPoint: {x:0.5, y:0.5},
})
node.element.innerHTML = "<h1>Hello!</h1>"
node.element.style.outline = "1px solid red"

scene.addChild(node)
scene.mount(document.body)

const fullSize = 'width:100%; height:100%;'
document.body.style.cssText = fullSize
document.querySelector('html').style.cssText = fullSize

Motor.addRenderTask(timestamp => {
  node.rotation.y++
})

That will make a rotating node in the middle of the scene.

You can also use the HTML API (via Angular, React, etc). Here's just with vanilla HTML:

import 'infamous/motor-html'

document.body.innerHTML = `
<motor-scene>
  <motor-node
    absoluteSize="100, 100"
    align="0.5, 0.5"
    mountPoint="0.5, 0.5"
    style="outline: 1px solid red"
    >
    <h1>Hello!</h1>
  </motor-node>
</motor-scene>
`

const fullSize = 'width:100%; height:100%;'
document.body.setAttribute('style', fullSize)
document.querySelector('html').setAttribute('style', fullSize)

Motor.addRenderTask(timestamp => {
  node.rotation.y++
})