Spark's Scroll to Place Grid Items Animation

<div className='section-container'>
  <div ref={targetRef} className='screen'>
    <div className='grid'>
      <div
        className='card'
        style={{ '--x': -346, '--y': -420, '--s': -0.25, '--r': 18 }}
      >
        <img
          src='https://recreated.dev/demo/spark/card-1.png'
          alt=''
          width={135}
          height={135}
        />
      </div>
      <div
        className='card'
        style={{ '--x': 308, '--y': -302, '--s': 0.2, '--r': 16 }}
      >
        <img
          src='https://recreated.dev/demo/spark/card-2.png'
          alt=''
          width={135}
          height={135}
        />
      </div>
      <div
        className='card'
        style={{ '--x': -235, '--y': -193, '--s': 0.3, '--r': -22 }}
      >
        <img
          src='https://recreated.dev/demo/spark/card-3.png'
          alt=''
          width={135}
          height={135}
        />
      </div>
      <div
        className='card'
        style={{ '--x': 288, '--y': -262, '--s': 0, '--r': -14 }}
      >
        <img
          src='https://recreated.dev/demo/spark/card-4.png'
          alt=''
          width={135}
          height={135}
        />
      </div>
      <div
        className='card'
        style={{ '--x': -270, '--y': -409, '--s': 0.2, '--r': -14 }}
      >
        <img
          src='https://recreated.dev/demo/spark/card-5.png'
          alt=''
          width={135}
          height={135}
        />
      </div>
      <div
        className='card'
        style={{ '--x': 253, '--y': -240, '--s': 0, '--r': -14 }}
      >
        <img
          src='https://recreated.dev/demo/spark/card-6.png'
          alt=''
          width={135}
          height={135}
        />
      </div>
      <div
        className='card'
        style={{ '--x': -300, '--y': -50, '--s': 0.4, '--r': -11 }}
      >
        <img
          src='https://recreated.dev/demo/spark/card-7.png'
          alt=''
          width={135}
          height={135}
        />
      </div>
      <div
        className='card'
        style={{ '--x': 350, '--y': -86, '--s': 0.3, '--r': 23 }}
      >
        <img
          src='https://recreated.dev/demo/spark/card-8.png'
          alt=''
          width={135}
          height={135}
        />
      </div>
    </div>
    <img
      src='https://recreated.dev/demo/spark/screen.webp'
      alt=''
      className=''
      width={361}
      height={736}
    />
  </div>
</div>