# Interactive videos with THREE.js and React

**URL:** <https://discourse.threejs.org/t/interactive-videos-with-three-js-and-react/23460>\
**Category:** Showcase\
**Tags:** react, interaction, animation, math, react-three-fiber\
**Created:** [February 13, 2021, 4:45pm UTC](https://discourse.threejs.org/t/interactive-videos-with-three-js-and-react/23460 "2021-02-13T16:45:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ysulyma](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ysulyma/32/16302_2.png) [@ysulyma](https://discourse.threejs.org/u/ysulyma)\
**Post date:** [February 13, 2021, 4:45pm UTC](https://discourse.threejs.org/t/interactive-videos-with-three-js-and-react/23460/1 "2021-02-13T16:45:59Z")

</div>

For the past few years I’ve been developing a framework for making interactive videos in React. This means you can put a THREE.js scene inside a video and your viewers can interact with it while the video is running!

Here’s a demo: [Math tutorial | Ractive-Player](https://ractive-player.org/math/?t=4:55.5). You can get started making these yourself by cloning the source for that video from [GitHub - ysulyma/rp-tutorial-math: Math-specific tutorial/sample project for ractive-player](https://github.com/ysulyma/rp-tutorial-math)

Here are also a few examples of using this to teach algebraic topology: [Geometry and topology](https://epiplexis.xyz/m/cep/geometry_and_topology)

If you think this is cool, please Tweet about it + tell your programmer friends! I’m trying hard to spread the word.

---

<div class="post-metadata">

**Author:** ![ysulyma](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ysulyma/32/16302_2.png) [@ysulyma](https://discourse.threejs.org/u/ysulyma)\
**Post date:** [March 15, 2022, 5:43pm UTC](https://discourse.threejs.org/t/interactive-videos-with-three-js-and-react/23460/2 "2022-03-15T17:43:06Z")

</div>

There’s now an official integration for React-Three-Fiber, which should make it easier to get up and running: [THREE.js | Liqvid](https://liqvidjs.org/docs/integrations/three)