butterflies.js

/** @jsx hJSX */
import { run, Rx } from '@cycle/core'
import { makeDOMDriver, hJSX } from '@cycle/dom'

function intent(DOM) {
  const click$ = Rx.Observable.fromEvent(document, 'click')

  return click$
}

function model(actions) {
  const position$ = actions.map(ev => {
    return { x: ev.pageX, y: ev.pageY }
  }).toArray()

  return position$
}

function view(item$) {
  return item$.map(positions => {
    const src = './assets/image.gif'
    
    return positions.map(position => {
      const style = {
        width: '50px',
        top: String(position.y+'px'),
        left: String(position.x+'px'),
        position: 'absolute'
      }
      return <img src={src} style={style} />
    );
  })
}

function main(sources) {
  return {
    DOM: view(model(intent(sources.DOM)))
  }
}

run(main, {
  DOM: makeDOMDriver('#app')
})