Fix: Intake JS runtime patches for starting animation frames

examples/stories/AnimationPlayback.stories.mdx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 
@@ -54,6 +54,44 @@ The example below shows how to start with a Rive instance that does not autoplay
   </Story>
 </Canvas>
 
+<Canvas withSource="open">
+  <Story name="Play/pause with intersection observer">
+    {() => {
+      const ref = useRef(null);
+      const { rive, RiveComponent } = useRive({
+        src: 'baseball.riv',
+        autoplay: false,
+        animations: "Hover"
+      });
+      useEffect(() => {
+        const observer = new IntersectionObserver(
+          ([things]) => {
+            if (rive) {
+              if (things.isIntersecting) {
+                rive.play("Hover");
+              } else {
+                rive.pause("Hover");
+              }
+            }
+          },
+          {
+            rootMargin: '0px',
+            threshold: 0.1,
+          }
+        )
+        if (ref && ref.current) {
+          observer.observe(ref.current)
+        }
+      }, [rive]);
+      return (
+        <div ref={ref} className="center">
+          <RiveComponent className="base-canvas-size" />
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## Play/pause with external elements
 
 This example shows how you can control Rive elements via user interaction outside of the canvas, such as other buttons. Here, the play/pause button will toggle whether or not to play or pause the Rive animation.

package.json

@@ -29,8 +29,8 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "1.0.68",
-    "@rive-app/webgl": "1.0.65"
+    "@rive-app/canvas": "1.0.70",
+    "@rive-app/webgl": "1.0.67"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"