Link embed works but uploading .riv file to the web (host) is not working

Can I get a little more info as to what you mean by "doesn't display very well on web"? Are you seeing an error or maybe rendering issues? Which runtime are you using (canvas/webgl/webgl2)?

We are using Canvas Runtime.
I think it is rendering issues:
- The "weight" (at the top of the progress, named as Weight in the file) sometimes it displays with opacity (check the image)
- It keeps making a jump at the end of animation making it not accurate.

Can you share the .rev file so I can take a closer look?

Hey Lance, here it is the file.
About the runtime we are using, the frontend guy said "I'm using Rive's React NPM package. I'm not sure what they use under the hood."

I've got this working with React with the and have tested it in Chrome, Firefox, and Safari. The only thing I changed in the .rev was setting the default progress to 0 and made sure the first transition waits for the amount to be greater than zero (was greater or equal to 0).

If this is still broken for you, can you tell me which browser and browser version you're using. Also, can you verify that you're using the latest version of the Rive React runtime?

import React, { useEffect } from 'react'

import { useRive, useStateMachineInput } from '@rive-app/react-canvas'

import './Example.scss'

const STATE_MACHINE_NAME = 'State Machine High Strike'

const Example = () => {
  const { rive, RiveComponent } = useRive({
    src: '/rive/hsNov25-20m.riv',
    stateMachines: STATE_MACHINE_NAME,
    autoplay: true,
    automaticallyHandleEvents: true,
  })

  const progressInput = useStateMachineInput(
    rive,
    STATE_MACHINE_NAME,
    'Progress',
    // This sets the initial value
    81
  )

  return (
    <div className='example'>
      <RiveComponent />
    </div>
  )
}

export default Example