Liqvid lets you make interactive videos ("ractives") in React. Create previously unimaginable immersive experiences that actively engage your audience. Use the entire web ecosystem (THREE.js, D3, CodeMirror, SVG, ...) as video creation tools.
Hi Product Hunt!
I'm pleased to share Liqvid, a framework for making interactive videos in React. Interactive meaning viewers can click inside the video and experiment with it while the video is playing. I originally developed this for making educational math videos; you can see full-length examples at https://epiplexis.xyz.
Rather than being a traditional video file, a ractive is just HTML/CSS/JS/React synced up to an audio track. This means all the web technologies you're used to—SVG, Canvas, WebGL, as well as every frontend JavaScript library out there—are now available to use as video creation tools.
Even if you're not including any interactivity, being able to write videos as easily as writing a webpage is a game-changer. No more waiting for video to render—just refresh the page. You can even update multiple videos at once just by changing a line of CSS.
The core library is a low-level framework for synchronizing React content with audio. There are already several plugins available providing more advanced recording/animation functionality (https://ractive-player.org/docs/...).
Coming soon: automatic mp4 conversion, captions/transcripts, CodeMirror 6 support (which will make the mobile experience smoother in the coding demos). If you have any questions, ask away!
Replies