Bounds.js

        const box = document.querySelector('.box')
        const circle = document.querySelector('.circle')
        const onEnter = () => { // change color }
        const onLeave = () => { // reset color }
        
        const boundary = Bound({
          root: box,
          threshold: 1.0
        })
        
        boundary.watch(circle, onEnter, onLeave)
        
      

        const images = document.querySelectorAll('img')
        const onEnter = () => { // load image }
        
        const boundary = Bound({
          margins: {bottom: 100}
        })
        
        images.forEach(image => {
          boundary.watch(image, onEnter)
        })