fix docs examples

Author: bbohlender

docs/getting-started/2-first-timeline.mdx

@@ -16,13 +16,11 @@ This walks you through building the intro example from scratch.
       '@react-three/fiber': '<9',
       '@react-three/drei': '<10',
       '@react-three/timeline': 'latest',
-      '@react-three/postprocessing': 'latest'
     },
   }}
   files={{
     '/App.tsx': `import { Canvas, useThree } from '@react-three/fiber'
 import { Text, Environment } from '@react-three/drei'
-import { Bloom, EffectComposer, Vignette } from '@react-three/postprocessing'
 import { useRef } from 'react'
 import { Mesh } from 'three'
 import { useTimeline, action, lookAt, spring, springPresets } from '@react-three/timeline'
@@ -57,10 +55,6 @@ function Scene() {
 export default function App() {
   return (
     <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }}>
-      <EffectComposer>
-        <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />
-        <Vignette eskil={false} offset={0.1} darkness={1.1} />
-      </EffectComposer>
       <Environment
         backgroundIntensity={0.1}
         backgroundRotation={[0, (90 / 180) * Math.PI, 0]}

docs/tutorials/5-graph.mdx

@@ -56,20 +56,20 @@ transitionTo: { red: { whenPromise: () => mouseOnSide('left') } },
 )
 
 return (
+
 <>
-<mesh ref={red} position-x={-2} position-y={-1} rotation-y={(-30 / 180) _ Math.PI} scale={[0.2, 0.2, 0.4]}>
-<sphereGeometry />
-<meshPhysicalMaterial emissive="red" emissiveIntensity={1.5} color="red" />
-</mesh>
-<mesh ref={blue} position-x={2} position-y={-1} rotation-y={(20 / 180) _ Math.PI} scale={[0.2, 0.2, 0.4]}>
-<sphereGeometry />
-<meshPhysicalMaterial emissive="blue" emissiveIntensity={5} color="blue" />
-</mesh>
-<ambientLight intensity={0.5} />
-<directionalLight position={[3,3,3]} intensity={1} />
+  <mesh ref={red} position-x={-2} position-y={-1} rotation-y={(-30 / 180) * Math.PI} scale={[0.2, 0.2, 0.4]}>
+    <sphereGeometry />
+    <meshPhysicalMaterial emissive="red" emissiveIntensity={1.5} color="red" />
+  </mesh>
+  <mesh ref={blue} position-x={2} position-y={-1} rotation-y={(20 / 180) * Math.PI} scale={[0.2, 0.2, 0.4]}>
+    <sphereGeometry />
+    <meshPhysicalMaterial emissive="blue" emissiveIntensity={5} color="blue" />
+  </mesh>
+  <ambientLight intensity={0.5} />
+  <directionalLight position={[3, 3, 3]} intensity={1} />
 </>
-)
-}
+) }
 
 export default function App() {
   return (

docs/tutorials/6-vanilla.mdx

@@ -218,7 +218,7 @@ const update = start(mainTimeline())
 ```ts
 let last = performance.now()
 function onFrame(now: number) {
-  const delta = Math.min(1/30, Math.max(0, (now - last) / 1000))
+  const delta = Math.max(1e-6, Math.min(1/30, Math.max(0, (now - last) / 1000)))
   last = now
   update(undefined, delta)
   composer.render(delta)

packages/timeline/src/index.ts

@@ -86,7 +86,7 @@ export function start<T>(timeline: Timeline<T>, abortSignal?: AbortSignal, onErr
     clock.actionTime += delta
     clock.timelineTime += delta
     clock.prevDelta = clock.delta
-    clock.delta = Math.min(delta, 1 / 30)
+    clock.delta = Math.max(1e-6, Math.min(delta, 1 / 30))
     ref.current?.(state, clock)
   }
 }