create-definedmotion 0.2.0 → 0.3.1

package/template/src/example_scenes/tests/animations/camera_movements/test_2d_camera_centers_labels.ts

@@ -0,0 +1,53 @@
+// test_2d_camera_centers_labels.ts
+import * as THREE from 'three'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+import { moveCameraToAnim } from '$renderer/lib/animation/animations'
+
+function labeledSquare(text: string, color: string) {
+  const g = new THREE.Group()
+  const rect = new THREE.Mesh(new THREE.PlaneGeometry(3, 3), new THREE.MeshBasicMaterial({ color }))
+
+  g.add(rect)
+  return g
+}
+
+export const test_2d_camera_centers_labels = (): AnimatedScene =>
+  new AnimatedScene(1500, 1500, SpaceSetting.TwoDim, HotReloadSetting.TraceFromStart, async (dm) => {
+    // faint grid background
+    for (let x = -12; x <= 12; x += 3) {
+      const line = new THREE.Mesh(new THREE.PlaneGeometry(0.02, 30), new THREE.MeshBasicMaterial({ color: '#6b7280', transparent: true, opacity: 0.7}))
+      line.position.set(x, 0, -0.1); dm.add(line)
+    }
+    for (let y = -12; y <= 12; y += 3) {
+      const line = new THREE.Mesh(new THREE.PlaneGeometry(30, 0.02), new THREE.MeshBasicMaterial({ color: '#6b7280', transparent: true, opacity: 0.7 }))
+      line.position.set(0, y, -0.1); dm.add(line)
+    }
+
+    // center crosshair
+    const h = new THREE.Mesh(new THREE.PlaneGeometry(30, 0.03), new THREE.MeshBasicMaterial({ color: '#ffffff' }))
+    const v = new THREE.Mesh(new THREE.PlaneGeometry(0.03, 30), new THREE.MeshBasicMaterial({ color: '#ffffff' }))
+    dm.add(h, v)
+
+    // squares at exact grid points
+    const S1 = labeledSquare('A', '#f97316'); S1.position.set(-6,  6, 0); dm.add(S1)
+    const S2 = labeledSquare('B', '#22c55e'); S2.position.set( 6,  6, 0); dm.add(S2)
+    const S3 = labeledSquare('C', '#3b82f6'); S3.position.set( 6, -6, 0); dm.add(S3)
+    const S4 = labeledSquare('D', '#ef4444'); S4.position.set(-6, -6, 0); dm.add(S4)
+
+
+    dm.camera.zoom *= 1.5
+
+    const z = dm.camera.position.z
+    dm.camera.position.set(0, 0, z)
+
+    const zOffset = new THREE.Vector3(0,0,z)
+
+    dm.camera.position.copy(S1.position.clone().add(zOffset))
+
+    // center camera over each square in clockwise order
+    dm.addDeferredAnims( moveCameraToAnim(dm.camera, { position: S2.position.clone().add(zOffset) }, 600) )
+    dm.addDeferredAnims( moveCameraToAnim(dm.camera, { position: S3.position.clone().add(zOffset) }, 600) )
+    dm.addDeferredAnims( moveCameraToAnim(dm.camera, { position: S4.position.clone().add(zOffset) }, 600) )
+    dm.addDeferredAnims( moveCameraToAnim(dm.camera, { position: S1.position.clone().add(zOffset) }, 600) )
+
+  })

package/template/src/example_scenes/tests/animations/camera_movements/test_2d_camera_hits_markers.ts

@@ -0,0 +1,40 @@
+// test_2d_camera_hits_markers.ts
+import * as THREE from 'three'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+import { moveCameraToAnim } from '$renderer/lib/animation/animations'
+
+// tiny helper
+const dot = (c: string) => new THREE.Mesh(
+  new THREE.CircleGeometry(0.5, 32),
+  new THREE.MeshBasicMaterial({ color: c })
+)
+
+export const test_2d_camera_hits_markers = (): AnimatedScene =>
+  new AnimatedScene(1000, 1000, SpaceSetting.TwoDim, HotReloadSetting.TraceFromStart, async (dm) => {
+    // Center crosshair (so we can see when a marker is exactly under the center)
+    const horiz = new THREE.Mesh(new THREE.PlaneGeometry(30, 0.1), new THREE.MeshBasicMaterial({ color: '#ffffff' }))
+    const vert  = new THREE.Mesh(new THREE.PlaneGeometry(0.1, 30), new THREE.MeshBasicMaterial({ color: '#ffffff' }))
+    dm.add(horiz, vert)
+
+    // Markers at precise world coords
+    const A = dot('#ef4444'); A.position.set(-8,  6, 0); dm.add(A)
+    const B = dot('#3b82f6'); B.position.set(  9, -4, 0); dm.add(B)
+    const C = dot('#10b981'); C.position.set(  0,  0, 0); dm.add(C)
+
+    // Start camera (TwoDim => Orthographic camera with fixed Z; we keep its current Z)
+    const z = dm.camera.position.z
+    dm.camera.position.set(0, 0, z)
+
+    // Move center over A, then B, then C — one deferred call per step (sequential)
+    dm.addDeferredAnims(
+      moveCameraToAnim(dm.camera, { position: new THREE.Vector3(-8,  6, z) }, 700)
+    )
+    dm.addDeferredAnims(
+      moveCameraToAnim(dm.camera, { position: new THREE.Vector3( 9, -4, z) }, 700)
+    )
+    dm.addDeferredAnims(
+      moveCameraToAnim(dm.camera, { position: new THREE.Vector3( 0,  0, z) }, 700)
+    )
+
+    dm.addWait(400)
+  })

package/template/src/example_scenes/tests/animations/camera_movements/test_camera_rotate_quaternion.ts

@@ -0,0 +1,17 @@
+import * as THREE from 'three'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+import { rotateCameraToAnim } from '$renderer/lib/animation/animations'
+
+export const test_camera_rotate_quaternion = (): AnimatedScene =>
+  new AnimatedScene(1000, 800, SpaceSetting.ThreeDim, HotReloadSetting.TraceFromStart, async (dm) => {
+    dm.add(new THREE.AxesHelper(6))
+    dm.camera.position.set(0, 4, 10)
+
+    const yawRight = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,  Math.PI/4, 0))
+    const pitchDown = new THREE.Quaternion().setFromEuler(new THREE.Euler(-Math.PI/6, 0, 0))
+
+    dm.addDeferredAnims(rotateCameraToAnim(dm.camera, { rotation: yawRight }, 800))
+    dm.addDeferredAnims(rotateCameraToAnim(dm.camera, { rotation: pitchDown }, 800))
+
+    dm.addWait(300)
+  })

package/template/src/example_scenes/tests/animations/camera_movements/test_camera_waypoints_sequential.ts

@@ -0,0 +1,29 @@
+import { moveCameraToAnim } from "$renderer/lib/animation/animations";
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from "$renderer/lib/scene/sceneClass";
+import * as THREE from 'three'
+
+
+
+export const test_camera_waypoints_sequential = (): AnimatedScene => {
+  return new AnimatedScene(1200, 800, SpaceSetting.ThreeDim, HotReloadSetting.TraceFromStart, async (dm) => {
+    dm.add(new THREE.GridHelper(40, 40))
+
+    // Visual markers
+    const red = new THREE.Mesh(new THREE.SphereGeometry(1.2),  new THREE.MeshBasicMaterial({ color: '#ef4444' }))
+    const blue = new THREE.Mesh(new THREE.BoxGeometry(2,2,2),  new THREE.MeshBasicMaterial({ color: '#3b82f6' }))
+    const green = new THREE.Mesh(new THREE.ConeGeometry(1.2,2,32), new THREE.MeshBasicMaterial({ color: '#10b981' }))
+    red.position.set(-8, 0, 0); blue.position.set(8, 0, 0); green.position.set(0, 0, -12)
+    dm.add(red, blue, green)
+
+    // Start camera
+    dm.camera.position.set(0, 8, 16)
+    dm.camera.lookAt(0, 0, 0)
+
+    // SEQUENTIAL: one call per addDeferredAnims
+    dm.addDeferredAnims(moveCameraToAnim(dm.camera, { position: new THREE.Vector3(-8, 6, 14) }, 900))
+    dm.addDeferredAnims(moveCameraToAnim(dm.camera, { position: new THREE.Vector3(  8, 6, 14) }, 900))
+    dm.addDeferredAnims(moveCameraToAnim(dm.camera, { position: new THREE.Vector3(  0, 7, 10) }, 900))
+
+    dm.addWait(400)
+  })
+}

package/template/src/example_scenes/tests/animations/camera_movements/test_fly_camera_waypoints_verifiable.ts

@@ -0,0 +1,87 @@
+// test_fly_minimal_two_poses.ts
+import * as THREE from 'three'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+import { flyCameraToAnim } from '$renderer/lib/animation/animations'
+
+// ======================
+// === EDIT HERE ========
+// Marker positions (sphere & cube)
+const SPHERE_POS = new THREE.Vector3(-6, 0, -6)
+const CUBE_POS   = new THREE.Vector3( 6, 0, -6)
+
+
+
+
+// Camera pose A (position + quaternion)
+const CAM_A_POS  = new THREE.Vector3(-8.478426, 
+  2.932849, 
+  -1.628103)
+
+// Example: look slightly right & down
+const CAM_A_QUAT = new THREE.Quaternion(-0.2782336, 
+  -0.2736528, 
+  -0.08303509, 
+  0.9169544)
+
+// Camera pose B (position + quaternion)
+const CAM_B_POS  = new THREE.Vector3( 9.855000, 
+  2.759370, 
+  -1.223401)
+// Example: look slightly left & down
+const CAM_B_QUAT = new THREE.Quaternion(  -0.2497320, 
+  0.3230065, 
+  0.08878684, 
+  0.9085250)
+// ======================
+
+export const test_fly_minimal_two_poses = (): AnimatedScene =>
+  new AnimatedScene(1200, 800, SpaceSetting.ThreeDim, HotReloadSetting.TraceFromStart, async (dm) => {
+    // Grid floor
+    dm.add(new THREE.GridHelper(60, 60))
+
+    // Sphere marker
+    const sphere = new THREE.Mesh(
+      new THREE.SphereGeometry(1, 32, 16),
+      new THREE.MeshBasicMaterial({ color: '#3b82f6' })
+    )
+    sphere.position.copy(SPHERE_POS)
+    dm.add(sphere)
+
+    // Cube marker
+    const cube = new THREE.Mesh(
+      new THREE.BoxGeometry(2, 2, 2),
+      new THREE.MeshBasicMaterial({ color: '#ef4444' })
+    )
+    cube.position.copy(CUBE_POS)
+    dm.add(cube)
+
+
+    const startPos = new THREE.Vector3(0, 6, 18)
+    // Start camera (anything reasonable)
+    dm.camera.position.copy(startPos)
+    dm.camera.lookAt(0, 0, 0)
+
+    // Leg 1: fly to CAM_A
+    dm.addDeferredAnims(
+      flyCameraToAnim(dm.camera, { position: CAM_A_POS, rotation: CAM_A_QUAT }, 1000)
+    )
+
+    // Small pause to inspect
+    dm.addWait(200)
+
+    // Leg 2: fly to CAM_B
+    dm.addDeferredAnims(
+      flyCameraToAnim(dm.camera, { position: CAM_B_POS, rotation: CAM_B_QUAT }, 1000)
+    )
+
+    dm.addWait(200)
+
+    const from = startPos.clone()
+    const target = new THREE.Vector3(0, 0, 0)
+    const m = new THREE.Matrix4().lookAt(from, target, new THREE.Vector3(0, 1, 0))
+    const q = new THREE.Quaternion().setFromRotationMatrix(m)
+
+    dm.addDeferredAnims(
+      flyCameraToAnim(dm.camera, { position: startPos, rotation: q}, 1000)
+    )
+  })

package/template/src/example_scenes/tests/animations/camera_movements/test_zoom_perspective_sequential.ts

@@ -0,0 +1,17 @@
+import * as THREE from 'three'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+import { zoomCameraToAnim } from '$renderer/lib/animation/animations'
+
+export const test_zoom_perspective_sequential = (): AnimatedScene =>
+  new AnimatedScene(1000, 700, SpaceSetting.ThreeDim, HotReloadSetting.TraceFromStart, async (dm) => {
+    dm.add(new THREE.GridHelper(40, 40))
+    dm.camera.position.set(0, 6, 16)
+    dm.camera.lookAt(0, 0, 0)
+
+    const initialFov = (dm.camera as THREE.PerspectiveCamera).fov
+
+    dm.addDeferredAnims(zoomCameraToAnim(dm.camera, { fov: 30 }, 900))
+    dm.addDeferredAnims(zoomCameraToAnim(dm.camera, { fov: initialFov }, 900))
+
+    dm.addWait(200)
+  })

package/template/src/example_scenes/tests/animations/latex/test_latex_blue_particle_transition.ts

@@ -0,0 +1,82 @@
+// test_latex_particle_transition_blue.ts
+import * as THREE from 'three'
+import {
+  AnimatedScene,
+  HotReloadSetting,
+  SpaceSetting
+} from '$renderer/lib/scene/sceneClass'
+import { latexToSVG } from '$renderer/lib/rendering/svg/latexToSVG'
+import { createSVGShape } from '$renderer/lib/rendering/svg/svgRendering'
+import { setOpacity } from '$renderer/lib/animation/animations'
+import { latexParticleTransitionAnim } from '$renderer/lib/animation/latexTransitionsAndWrite'
+
+export const test_latex_blue_particle_transition = (): AnimatedScene => {
+  return new AnimatedScene(
+    1000,
+    1000,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (dm) => {
+      // 1) Two related equations to morph between
+      const latexA = String.raw`\nabla \cdot \vec{E} = \frac{\rho}{\varepsilon_0}`
+      const latexB = String.raw`\nabla \cdot \vec{D} = \rho_{\mathrm{free}}`
+
+      // 2) LaTeX → SVG → THREE.Group
+      const svgA = latexToSVG(latexA)
+      const svgB = latexToSVG(latexB)
+
+      const groupA = createSVGShape(svgA, 20)
+      const groupB = createSVGShape(svgB, 20)
+
+      // 2.5) Tint both equations blue
+      const blue = new THREE.Color('#3b82f6')
+
+      const tintGroupBlue = (group: THREE.Group) => {
+        group.traverse(obj => {
+          const mesh = obj as THREE.Mesh
+          // @ts-ignore
+          if (!mesh.isMesh) return
+          const mat = mesh.material
+          if (Array.isArray(mat)) {
+            mat.forEach(m => {
+              const anyMat = m as any
+              if (anyMat && anyMat.color && anyMat.color.isColor) {
+                anyMat.color.copy(blue)
+              }
+            })
+          } else {
+            const anyMat = mat as any
+            if (anyMat && anyMat.color && anyMat.color.isColor) {
+              anyMat.color.copy(blue)
+            }
+          }
+        })
+      }
+
+      tintGroupBlue(groupA)
+      tintGroupBlue(groupB)
+
+      // 3) Place both at origin
+      groupA.position.set(0, 0, 0)
+      groupB.position.set(0, 0, 0)
+
+      // Add to scene
+      dm.add(groupA)
+      dm.add(groupB)
+
+      // 4) Make the target equation invisible initially
+      setOpacity(groupB, 0)
+
+      // 5) Simple camera setup so the equations are clearly visible
+      dm.camera.position.set(0, 0, 30)
+      dm.camera.lookAt(new THREE.Vector3(0, 0, 0))
+
+      // 6) Add the particle transition animation
+      //    (particles will pick up the same blue via pickColorFromGroup)
+      dm.addDeferredAnims(latexParticleTransitionAnim(groupA, groupB))
+
+      // Optional pause after the morph
+      dm.addWait(300)
+    }
+  )
+}

package/template/src/example_scenes/tests/animations/latex/test_latex_highlight_animation.ts

@@ -0,0 +1,64 @@
+import * as THREE from 'three'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+import { latexToSVG } from '$renderer/lib/rendering/svg/latexToSVG'
+import { createSVGShape } from '$renderer/lib/rendering/svg/svgRendering'
+import { latexHighlightAnim } from '$renderer/lib/animation/latexMarkAndHighlight'
+
+
+export const test_latex_highlight_animation = (): AnimatedScene =>
+  new AnimatedScene(
+    1000,
+    1000,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (dm) => {
+      const latex = latexToSVG(String.raw`
+\ell(\theta)
+= - \sum_{i=1}^{n}
+  \Big(
+    \dmClass{pos}{y_i \log p_\theta(x_i)}
+    +
+    \dmClass{neg}{(1 - y_i) \log (1 - p_\theta(x_i))}
+  \Big)
+      `.trim())
+
+      const group = createSVGShape(latex, 36)
+      dm.add(group)
+
+      // 1) Highlight positive term
+      dm.addDeferredAnims(
+        latexHighlightAnim(group, 'pos', {
+          durationMs: 1800,
+          highlightColor: 0x22c55e,
+          pulses: 2,
+          minMix: 0.0,
+          maxMix: 1.0
+        })
+      )
+      dm.addWait(250)
+
+      // 2) Highlight negative term
+      dm.addDeferredAnims(
+        latexHighlightAnim(group, 'neg', {
+          durationMs: 1800,
+          highlightColor: 0xef4444,
+          pulses: 2,
+          minMix: 0.0,
+          maxMix: 1.0
+        })
+      )
+      dm.addWait(250)
+
+      // 3) Highlight both together with a stronger pulse
+      dm.addDeferredAnims(
+        latexHighlightAnim(group, ['pos', 'neg'], {
+          durationMs: 1800,
+          highlightColor: 0xfacc15,
+          pulses: 3,
+          minMix: 0.2,
+          maxMix: 1.0
+        })
+      )
+      dm.addWait(400)
+    }
+  )

package/template/src/example_scenes/tests/animations/latex/test_latex_mark_animation.ts

@@ -0,0 +1,42 @@
+// test_latex_mark_animation.ts
+import * as THREE from 'three'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+import { latexToSVG } from '$renderer/lib/rendering/svg/latexToSVG'
+import { createSVGShape } from '$renderer/lib/rendering/svg/svgRendering'
+import { latexMarkAnim } from '$renderer/lib/animation/latexMarkAndHighlight'
+
+
+export const test_latex_mark_animation = (): AnimatedScene =>
+  new AnimatedScene(
+    1000,
+    1000,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (dm) => {
+      const latex = latexToSVG(String.raw`
+\dmClass{lhs}{\int_0^\infty e^{-x^2}\,\mathrm{d}x}
+= \dmClass{rhs}{\frac{\sqrt{\pi}}{2}}
+      `.trim())
+
+      const group = createSVGShape(latex, 28)
+      dm.add(group)
+
+      // 1) Mark the left-hand side only
+      dm.addDeferredAnims(
+        latexMarkAnim(group, 'lhs')
+      )
+      dm.addWait(300)
+
+      // 2) Mark the right-hand side only
+      dm.addDeferredAnims(
+        latexMarkAnim(group, 'rhs')
+      )
+      dm.addWait(300)
+
+      // 3) Mark both sides together using the multi-class path
+      dm.addDeferredAnims(
+        latexMarkAnim(group, ['lhs', 'rhs'])
+      )
+      dm.addWait(400)
+    }
+  )

package/template/src/example_scenes/tests/animations/latex/test_latex_particle_transition.ts

@@ -0,0 +1,48 @@
+
+import * as THREE from 'three'
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
+import { latexToSVG } from '$renderer/lib/rendering/svg/latexToSVG'
+import { createSVGShape } from '$renderer/lib/rendering/svg/svgRendering'
+import { setOpacity } from '$renderer/lib/animation/animations'
+import { latexParticleTransitionAnim } from '$renderer/lib/animation/latexTransitionsAndWrite' // <- your new helper
+
+export const test_latex_particle_transition = (): AnimatedScene => {
+  return new AnimatedScene(
+    1000,
+    1000,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (dm) => {
+      // 1) Two related equations to morph between
+      const latexA = String.raw`\nabla \cdot \vec{E} = \frac{\rho}{\varepsilon_0}`
+      const latexB = String.raw`\nabla \cdot \vec{D} = \rho_{\mathrm{free}}`
+
+      // 2) LaTeX → SVG → THREE.Group
+      const svgA = latexToSVG(latexA)
+      const svgB = latexToSVG(latexB)
+
+      const groupA = createSVGShape(svgA, 20) // width ≈ 10 units
+      const groupB = createSVGShape(svgB, 20)
+
+      // Place both at origin
+      groupA.position.set(0, 0, 0)
+      groupB.position.set(0, 0, 0)
+
+      // Add to scene
+      dm.add(groupA)
+      dm.add(groupB)
+
+      // 3) Make the target equation invisible initially (required by your spec)
+      setOpacity(groupB, 0)
+
+      // 4) Simple camera setup so the equations are clearly visible
+      dm.camera.position.set(0, 0, 30)
+      dm.camera.lookAt(new THREE.Vector3(0, 0, 0))
+
+      dm.addDeferredAnims(latexParticleTransitionAnim(groupA, groupB))
+
+      // Optionally: leave a bit of time after the morph finishes
+      dm.addWait(300)
+    }
+  )
+}

package/template/src/example_scenes/tests/animations/latex/test_latex_particle_transition_complex.ts

@@ -0,0 +1,65 @@
+// test_latex_particle_transition_complex.ts
+import * as THREE from 'three'
+import {
+  AnimatedScene,
+  HotReloadSetting,
+  SpaceSetting
+} from '$renderer/lib/scene/sceneClass'
+import { latexToSVG } from '$renderer/lib/rendering/svg/latexToSVG'
+import { createSVGShape } from '$renderer/lib/rendering/svg/svgRendering'
+import { setOpacity } from '$renderer/lib/animation/animations'
+import { latexParticleTransitionAnim } from '$renderer/lib/animation/latexTransitionsAndWrite'
+
+export const test_latex_particle_transition_complex = (): AnimatedScene => {
+  return new AnimatedScene(
+    1600,
+    1600,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (dm) => {
+      // 1) Two related, more complex LaTeX expressions
+      const latexA = String.raw`
+        \oint_{\partial V} \vec{D} \cdot d\vec{A}
+        \;=\;
+        \int_V \rho_{\mathrm{free}}\, dV
+      `
+
+      const latexB = String.raw`
+        \nabla \cdot \vec{D}(\vec{r})
+        \;=\;
+        \rho_{\mathrm{free}}(\vec{r})
+      `
+
+      // 2) LaTeX → SVG → THREE.Group
+      const svgA = latexToSVG(latexA)
+      const svgB = latexToSVG(latexB)
+
+      // Slightly wider target width to give the integral signs room
+      const groupA = createSVGShape(svgA, 28)
+      const groupB = createSVGShape(svgB, 28)
+
+      // Place both at origin
+      groupA.position.set(0, 0, 0)
+      groupB.position.set(0, 0, 0)
+
+      // Add to scene
+      dm.add(groupA)
+      dm.add(groupB)
+
+      // 3) Target expression starts invisible
+      setOpacity(groupB, 0)
+
+      // 4) Camera setup
+      dm.camera.position.set(0, 0, 35)
+      dm.camera.lookAt(new THREE.Vector3(0, 0, 0))
+
+      // 5) Particle transition:
+      //    - 2000 ms duration
+      //    - default particleCount from helper (tune inside helper if needed)
+      dm.addDeferredAnims(latexParticleTransitionAnim(groupA, groupB))
+
+      // A small pause after the morph
+      dm.addWait(400)
+    }
+  )
+}

package/template/src/example_scenes/tests/animations/latex/test_latex_particle_transition_super_complex.ts

@@ -0,0 +1,86 @@
+// test_latex_particle_transition_super_complex.ts
+import * as THREE from 'three'
+import {
+  AnimatedScene,
+  HotReloadSetting,
+  SpaceSetting
+} from '$renderer/lib/scene/sceneClass'
+import { latexToSVG } from '$renderer/lib/rendering/svg/latexToSVG'
+import { createSVGShape } from '$renderer/lib/rendering/svg/svgRendering'
+import { setOpacity } from '$renderer/lib/animation/animations'
+import { latexParticleTransitionAnim } from '$renderer/lib/animation/latexTransitionsAndWrite'
+
+export const test_latex_particle_transition_super_complex = (): AnimatedScene => {
+  return new AnimatedScene(
+    1600,
+    1600,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (dm) => {
+      // --- 1) Two super duper complex LaTeX expressions ---
+
+      // A: Full softmax cross-entropy loss with explicit logits
+      const latexA = String.raw`
+        \begin{aligned}
+          \mathcal{L}(\theta)
+            &= - \sum_{i=1}^N \log p_\theta(y_i \mid x_i) \\
+            &= - \sum_{i=1}^N \log
+               \frac{\exp\big(f_\theta(x_i)_{y_i}\big)}
+                    {\sum_{k=1}^K \exp\big(f_\theta(x_i)_k\big)} \\
+            &= - \sum_{i=1}^N
+               \left(
+                 f_\theta(x_i)_{y_i}
+                 - \log \sum_{k=1}^K \exp\big(f_\theta(x_i)_k\big)
+               \right)
+        \end{aligned}
+      `
+
+      // B: VI ELBO gradient with regularization and KL term
+      const latexB = String.raw`
+        \begin{aligned}
+          \nabla_\theta \mathcal{L}_{\mathrm{ELBO}}(\theta,\phi)
+            &= - \mathbb{E}_{q_\phi(z \mid x)}
+                 \big[ \nabla_\theta \log p_\theta(x \mid z) \big] \\
+            &\quad +\;
+              \lambda \,\nabla_\theta \lVert \theta \rVert_2^2 \\
+            \mathcal{L}_{\mathrm{ELBO}}(\theta,\phi)
+            &= \mathbb{E}_{q_\phi(z \mid x)}
+                 \big[ \log p_\theta(x \mid z) \big]
+               - \mathrm{KL}\!\big(q_\phi(z\mid x)\,\|\,p(z)\big)
+        \end{aligned}
+      `
+
+      // --- 2) LaTeX → SVG → THREE.Group ---
+
+      const svgA = latexToSVG(latexA)
+      const svgB = latexToSVG(latexB)
+
+      // Wider target width to fit the long equations nicely
+      const targetWidth = 32
+      const groupA = createSVGShape(svgA, targetWidth)
+      const groupB = createSVGShape(svgB, targetWidth)
+
+      // Center them around the origin
+      groupA.position.set(0, 0, 0)
+      groupB.position.set(0, 0, 0)
+
+      dm.add(groupA)
+      dm.add(groupB)
+
+      // --- 3) Make target invisible initially ---
+      setOpacity(groupB, 0)
+
+      // --- 4) Camera setup: small offset so everything is nicely framed ---
+      dm.camera.position.set(0, 0, 40)
+      dm.camera.lookAt(new THREE.Vector3(0, 0, 0))
+
+      // --- 5) Particle transition ---
+      //    - 2200 ms duration
+      //    - particleCount controlled inside helper (default 2000)
+      dm.addDeferredAnims(latexParticleTransitionAnim(groupA, groupB))
+
+      // Leave a short pause when done
+      dm.addWait(400)
+    }
+  )
+}