Skip to main content


The @liqvid/react-three package allows you to use React Three Fiber in Liqvid videos. It exports a single component, <Canvas/>, which should be used in place of the <Canvas/> component from React Three Fiber. This does three things:

  • passes the Liqvid context through so that usePlayer(), useTime() etc. still work

  • adds touch-action: "none" to the container div styles (necessary for mobile interactions to work)

  • adds data-affords="click" to the container div so that canvas clicks will not pause the video

For everything else, see the React Three Fiber docs and THREE.js docs.


  • Refresh

Example: Alexander horned sphere

Here is an example (with very messy code) illustrating the Alexander horned sphere.

  • Refresh