create-definedmotion 0.1.4 → 0.3.0

package/template/src/example_scenes/tests/svg/test_colored_latex_to_svg.ts

@@ -0,0 +1,42 @@
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from "$renderer/lib/scene/sceneClass";
+import { createSVGShape } from "$renderer/lib/rendering/svg/svgRendering";
+import { latexToSVG } from "$renderer/lib/rendering/svg/latexToSVG";
+
+export const test_colored_latex_to_svg = (): AnimatedScene => {
+  return new AnimatedScene(1000, 1000, SpaceSetting.ThreeDim, HotReloadSetting.TraceFromStart, async (dm) => {
+
+    // 1) Inline colors via \style{color:...}
+    const eq1 = latexToSVG(String.raw`
+\begin{aligned}
+\style{color:#ff3b3b}{\nabla\cdot\vec{E}} &= 
+\style{color:rgba(255,59,59,0.5)}{\frac{\rho}{\varepsilon_0}}
+
+\style{color:#3b82f6}{e^{i\theta}} &= 
+\style{color:#10b981}{\cos\theta} + 
+\style{color:#f59e0b}{i\sin\theta}
+\end{aligned}
+`, { display: true });
+
+    // 2) Mixed \textcolor and CSS rgba, plus a semi-transparent bbox
+    const eq2 = latexToSVG(String.raw`
+\bbox[6px, border:1px solid rgba(0,255,255,0.5), background:rgba(0,0,0,0.25)]{
+  \textcolor{#22c55e}{\mathbb{E}[X]} 
+  = \style{color:rgba(34,197,94,0.6)}{\int_{\mathbb{R}} x\, d\mathbb{P}(x)}
+}
+`, { display: true });
+
+    // 3) A palette inside a matrix
+    const eq3 = latexToSVG(String.raw`
+\begin{bmatrix}
+\style{color:#ef4444}{a} & \style{color:#f97316}{b} & \style{color:#eab308}{c}\\
+\style{color:#22c55e}{d} & \style{color:#3b82f6}{e} & \style{color:#a855f7}{f}\\
+\style{color:#ec4899}{g} & \style{color:#06b6d4}{h} & \style{color:#9ca3af}{i}
+\end{bmatrix}
+`, { display: true });
+
+    // Place them using your width normalization
+    const g1 = createSVGShape(eq1, 14); g1.position.set(0, 5, 0);  dm.add(g1);
+    const g2 = createSVGShape(eq2, 12); g2.position.set(0, 0, 0);  dm.add(g2);
+    const g3 = createSVGShape(eq3, 10); g3.position.set(0, -5, 0); dm.add(g3);
+  });
+};

package/template/src/example_scenes/tests/svg/test_complex_latex_to_svg.ts

@@ -0,0 +1,22 @@
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from "$renderer/lib/scene/sceneClass";
+import { createSVGShape } from "$renderer/lib/rendering/svg/svgRendering";
+import { latexToSVG } from "$renderer/lib/rendering/svg/latexToSVG";
+
+
+export const test_complex_latex_to_svg = (): AnimatedScene => {
+  return new AnimatedScene(1000, 1000, SpaceSetting.ThreeDim, HotReloadSetting.TraceFromStart, async (dm) => {
+    const raw = latexToSVG(String.raw`
+\begin{aligned}
+\hat{f}(\omega) &= \int_{-\infty}^{\infty} f(t)\,e^{-i\omega t}\,dt,\\
+f(t) &= \frac{1}{2\pi}\int_{-\infty}^{\infty} \hat{f}(\omega)\,e^{i\omega t}\,d\omega,\\[6pt]
+\Gamma(z) &= \int_{0}^{\infty} t^{z-1} e^{-t}\,dt,\qquad
+\zeta(s) = \prod_{p\in\mathbb{P}} \frac{1}{1-p^{-s}}
+\end{aligned}
+`, { display: true });
+
+console.log("RAW", raw)
+
+    const g = createSVGShape(raw, 12);
+    dm.add(g);
+  });
+};

package/template/src/example_scenes/tests/svg/test_latex_to_svg.ts

@@ -0,0 +1,17 @@
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from "$renderer/lib/scene/sceneClass";
+import { createSVGShape } from "$renderer/lib/rendering/svg/svgRendering";
+import { latexToSVG } from "$renderer/lib/rendering/svg/latexToSVG";
+
+
+export const test_latex_to_svg = (): AnimatedScene => {
+  return new AnimatedScene(
+    1000, 1000,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (dm) => {
+      const svg = latexToSVG(String.raw`\nabla \cdot \vec{E} = \frac{\rho}{\varepsilon_0}`);
+      const g = createSVGShape(svg, 10);
+      dm.add(g);
+    }
+  );
+};

package/template/src/example_scenes/tests/svg/test_material_on_latex.ts

@@ -0,0 +1,43 @@
+import { createBumpMap } from "$renderer/lib/rendering/bumpMaps/noise";
+import { addHDRI, HDRIs, loadHDRIData } from "$renderer/lib/rendering/hdri";
+import {  addSceneLighting,  } from "$renderer/lib/rendering/lighting3d";
+import { latexToSVG } from "$renderer/lib/rendering/svg/latexToSVG";
+import { createSVGShape } from "$renderer/lib/rendering/svg/svgRendering";
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from "$renderer/lib/scene/sceneClass";
+import * as THREE from 'three';
+
+
+const hdriData = await loadHDRIData(HDRIs.outdoor1, 1)
+
+
+export const test_material_on_latex = (): AnimatedScene => {
+  return new AnimatedScene(
+    1000, 1000,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (dm) => {
+
+        
+     await addHDRI(dm, hdriData, 6)
+      const svg = latexToSVG(String.raw`\nabla \cdot \vec{E} = \frac{\rho}{\varepsilon_0}`);
+      const group = createSVGShape(svg, 20);
+
+      // the material you want to apply
+    const metalMaterial = new THREE.MeshStandardMaterial({
+       color: 0xffffff,   // slightly darker red often looks nicer for metal
+        metalness: 0.9,    // close to 1 = very metallic
+        roughness: 0.3,    // lower = more shiny, higher = more matte
+        side: THREE.DoubleSide,
+    });
+
+    group.traverse((obj) => {
+    if ((obj as THREE.Mesh).isMesh) {
+        const mesh = obj as THREE.Mesh;
+        mesh.material = metalMaterial;
+    }
+    });
+
+      dm.add(group);
+    }
+  );
+};

package/template/src/example_scenes/tests/svg/test_query_latex_variables.ts

@@ -0,0 +1,66 @@
+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 { queryLaTeXClass } from '$renderer/lib/rendering/svg/latexSVGQueries';
+import { createAnim } from '$renderer/lib/animation/protocols';
+import { easeInOutQuad } from '$renderer/lib/animation/interpolations';
+
+export const test_latex_query_variables = (): AnimatedScene => {
+  return new AnimatedScene(
+    1000,
+    1000,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (dm) => {
+      // 1) More complicated LaTeX expression with many variables
+      // Tag every variable occurrence with \dmClass{variable}{...}
+      const latex = String.raw`
+        f(\dmClass{variable}{x}, \dmClass{variable}{y}) 
+        = \int_{\dmClass{variable}{x_0}}^{\dmClass{variable}{x_1}}
+            \dmClass{variable}{y}(t)\, e^{-\dmClass{variable}{\alpha} t}
+          \, dt
+      `;
+
+      // 2) Convert LaTeX → SVG → THREE.Group
+      const svg = latexToSVG(latex);
+      const equationGroup = createSVGShape(svg, 20); // width ≈ 10 units
+      dm.add(equationGroup);
+
+      // 3) Query all meshes that belong to class "variable"
+      const hit = queryLaTeXClass(equationGroup, 'variable');
+      if (!hit) {
+        console.warn('No meshes found for LaTeX class "variable"');
+        return;
+      }
+
+     // Somewhere when you build the meshes
+    const targetColor = new THREE.Color(0x00ff88); // the “variable” color
+    const white       = new THREE.Color(0xffffff);
+    const tmpColor    = new THREE.Color();
+
+    // Example: you have an array of meshes you want to tint
+    const variableMeshes: THREE.Mesh[] = hit.meshes;
+
+    // Make sure materials are independent if you plan to animate them
+    for (const mesh of variableMeshes) {
+        mesh.material = (mesh.material as THREE.Material).clone();
+    }
+
+    const colorAnim = createAnim(easeInOutQuad(0, 1, 300), (t) => {
+        tmpColor.lerpColors(white, targetColor, t); // tmp = white * (1-t) + target * t
+        for (const mesh of variableMeshes) {
+            const mat = mesh.material as THREE.MeshBasicMaterial;
+            mat.color.copy(tmpColor);
+        }
+    });
+
+
+    for (let i = 0; i<20; i++) {
+        dm.addAnims(colorAnim.copy())
+        dm.addAnims(colorAnim.copy().reverse())
+    }
+   
+    }
+  );
+};

package/template/src/example_scenes/tests/svg/test_regular_text_latex.ts

@@ -0,0 +1,21 @@
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from "$renderer/lib/scene/sceneClass";
+import { createSVGShape } from "$renderer/lib/rendering/svg/svgRendering";
+import { latexToSVG } from "$renderer/lib/rendering/svg/latexToSVG";
+
+
+export const test_regular_text_latex = (): AnimatedScene => {
+  return new AnimatedScene(
+    1000, 1000,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (dm) => {
+      const svg = latexToSVG(String.raw`\text{This library is "DefinedMotion"}`);
+      const g = createSVGShape(svg, 20);
+      g.position.y += 2
+      const svg2 = latexToSVG(String.raw`\text{\textsf{This library is "DefinedMotion"}}`);
+      const g2 = createSVGShape(svg2, 20);
+      g2.position.y -= 2
+      dm.add(g, g2);
+    }
+  );
+};

package/template/src/example_scenes/tests/svg/test_super_complex_latex_to_svg.ts

@@ -0,0 +1,98 @@
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from "$renderer/lib/scene/sceneClass";
+import { createSVGShape } from "$renderer/lib/rendering/svg/svgRendering";
+import { latexToSVG } from "$renderer/lib/rendering/svg/latexToSVG";
+
+export const test_super_complex_latex_to_svg = (): AnimatedScene => {
+  return new AnimatedScene(
+    1000, 1000,
+    SpaceSetting.ThreeDim,
+    HotReloadSetting.TraceFromStart,
+    async (dm) => {
+
+      // 1) Big "everything" block
+      const block1 = latexToSVG(String.raw`
+\begin{aligned}
+\textbf{Fourier:}\quad 
+  \hat{f}(\omega) &= \int_{-\infty}^{\infty} f(t)\,e^{-i\omega t}\,dt,
+  & f(t) &= \frac{1}{2\pi}\int_{-\infty}^{\infty} \hat{f}(\omega)\,e^{i\omega t}\,d\omega \\[6pt]
+\textbf{Gamma/Zeta:}\quad 
+  \Gamma(z) &= \int_{0}^{\infty} t^{z-1} e^{-t}\,dt, 
+  & \zeta(s) &= \prod_{p\in\mathbb{P}} \frac{1}{1-p^{-s}} \\[6pt]
+\textbf{Cauchy–Schwarz:}\quad 
+  \big|\langle \mathbf{x},\mathbf{y}\rangle\big| &\le \|\mathbf{x}\|_2\,\|\mathbf{y}\|_2 \\[6pt]
+\textbf{Euler:}\quad 
+  e^{i\theta} &= \cos\theta + i\sin\theta \\[6pt]
+\textbf{Gradient step:}\quad 
+  \theta_{t+1} &= \theta_t - \eta\,\nabla_\theta \mathcal{L}(\theta_t) \\[6pt]
+\textbf{KL:}\quad 
+  \mathrm{KL}\!\left(p\,\|\,q\right) &= \int p(x)\,\log\!\frac{p(x)}{q(x)}\,dx \\[6pt]
+\textbf{Limits:}\quad 
+  \limsup_{n\to\infty} a_n &\ge \liminf_{n\to\infty} a_n \\[6pt]
+\textbf{Argmin:}\quad 
+  \hat{\theta} &= \arg\min_{\theta\in\mathbb{R}^d} \; \frac{1}{n}\sum_{i=1}^n \ell\!\big(f_\theta(x_i), y_i\big) \\[6pt]
+\textbf{Binomial:}\quad 
+  (1+x)^n &= \sum_{k=0}^{n} \binom{n}{k} x^k
+\end{aligned}
+`);
+
+      const g1 = createSVGShape(block1, 16); // width in your world units
+      g1.position.set(0, 6, 0);
+      dm.add(g1);
+
+
+      // 2) Matrix / determinant / vector hats & bars / piecewise
+      const block2 = latexToSVG(String.raw`
+\begin{aligned}
+\textbf{Matrix:}\quad 
+  A &= \begin{bmatrix}
+        a & b & c\\
+        d & e & f\\
+        g & h & i
+      \end{bmatrix},
+&\quad \det(A) &= 
+  \left|\begin{matrix}
+    a & b & c\\
+    d & e & f\\
+    g & h & i
+  \end{matrix}\right| \\[6pt]
+\textbf{Vectors:}\quad 
+  \hat{\mathbf{v}} &= \frac{\mathbf{v}}{\|\mathbf{v}\|},\qquad 
+  \overline{x} = \frac{1}{n}\sum_{k=1}^{n} x_k,\qquad 
+  \vec{\nabla}\cdot\vec{E} = \frac{\rho}{\varepsilon_0} \\[6pt]
+\textbf{Piecewise:}\quad 
+  \mathrm{ReLU}(x) &= 
+  \begin{cases}
+    0, & x<0\\
+    x, & x\ge 0
+  \end{cases}
+\end{aligned}
+`);
+
+      const g2 = createSVGShape(block2, 14);
+      g2.position.set(0, -2, 0);
+      dm.add(g2);
+
+
+      // 3) Probability / expectation / covariance / set notation / sqrt
+      const block3 = latexToSVG(String.raw`
+\begin{aligned}
+\textbf{Probability:}\quad 
+  \mathbb{P}(A\mid B) &= \frac{\mathbb{P}(A\cap B)}{\mathbb{P}(B)},\qquad 
+  \mathbb{E}[X] = \int_{\mathbb{R}} x\, d\mathbb{P}(x) \\[6pt]
+\textbf{Variance/Covariance:}\quad 
+  \mathrm{Var}(X) &= \mathbb{E}[X^2] - (\mathbb{E}[X])^2,\qquad 
+  \mathrm{Cov}(X,Y) = \mathbb{E}[XY]-\mathbb{E}[X]\mathbb{E}[Y] \\[6pt]
+\textbf{Sets/Norms:}\quad 
+  \mathcal{S} &= \{\,x\in\mathbb{R}^n : \|x\|_2 \le r\,\},\qquad 
+  \sqrt[n]{1+x} \approx 1 + \frac{x}{n}
+\end{aligned}
+`);
+
+      const g3 = createSVGShape(block3, 12);
+      g3.position.set(0, -8.5, 0);
+      dm.add(g3);
+
+
+    }
+  );
+};

package/template/src/example_scenes/tests/svg/test_transition_svgs.ts

@@ -0,0 +1,33 @@
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from "$renderer/lib/scene/sceneClass";
+import gravityTextSVG from '$assets/for_tests/svg/gravity_text.svg?raw'
+import gripSVG from '$assets/for_tests/svg/grip_figure.svg?raw'
+import { createSVGShape } from "$renderer/lib/rendering/svg/svgRendering";
+import { updateSVGShape } from "$renderer/lib/rendering/svg/svgObjectHelpers";
+import { fadeOut, setOpacity, updateSVGAnim } from "$renderer/lib/animation/animations";
+import { latexToSVG } from "$renderer/lib/rendering/svg/latexToSVG";
+
+
+export const test_transition_svgs = ():AnimatedScene => {
+    return new AnimatedScene(1000, 1000, SpaceSetting.ThreeDim, HotReloadSetting.TraceFromStart, async (dm) => {
+        const svgObject = createSVGShape(gravityTextSVG, 15)
+        dm.add(svgObject)
+
+        dm.addWait(500)
+        const anim = updateSVGAnim(svgObject, gripSVG, 300, 10)
+        dm.addAnims(anim)
+        dm.addWait(500)
+           const raw = latexToSVG(String.raw`
+        \begin{aligned}
+        \hat{f}(\omega) &= \int_{-\infty}^{\infty} f(t)\,e^{-i\omega t}\,dt,\\
+        f(t) &= \frac{1}{2\pi}\int_{-\infty}^{\infty} \hat{f}(\omega)\,e^{i\omega t}\,d\omega,\\[6pt]
+        \Gamma(z) &= \int_{0}^{\infty} t^{z-1} e^{-t}\,dt,\qquad
+        \zeta(s) = \prod_{p\in\mathbb{P}} \frac{1}{1-p^{-s}}
+        \end{aligned}
+        `, { display: true });
+        const anim2 = updateSVGAnim(svgObject, raw, 300, 20)
+        dm.addAnims(anim2)
+        dm.addWait(500)
+        const anim3 = fadeOut(svgObject, 300)
+        dm.addAnims(anim3)
+    })
+}

package/template/src/example_scenes/tests/svg/test_update_svg_object.ts

@@ -0,0 +1,19 @@
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from "$renderer/lib/scene/sceneClass";
+import gravityTextSVG from '$assets/for_tests/svg/gravity_text.svg?raw'
+import gripSVG from '$assets/for_tests/svg/grip_figure.svg?raw'
+import { createSVGShape } from "$renderer/lib/rendering/svg/svgRendering";
+import { updateSVGShape } from "$renderer/lib/rendering/svg/svgObjectHelpers";
+
+
+export const test_update_svg_object = ():AnimatedScene => {
+    return new AnimatedScene(1000, 1000, SpaceSetting.ThreeDim, HotReloadSetting.TraceFromStart, async (dm) => {
+        const svgObject = createSVGShape(gravityTextSVG, 10)
+        dm.add(svgObject)
+
+        dm.addWait(500)
+        dm.do(() => {
+            updateSVGShape(svgObject, gripSVG)
+        })
+        dm.addWait(500)
+    })
+}

package/template/src/example_scenes/tests/svg/test_yellow_grip_symbol_svg.ts

@@ -0,0 +1,11 @@
+import { AnimatedScene, HotReloadSetting, SpaceSetting } from "$renderer/lib/scene/sceneClass";
+import gravityTextSVG from '$assets/for_tests/svg/grip_figure.svg?raw'
+import { createSVGShape } from "$renderer/lib/rendering/svg/svgRendering";
+
+
+export const test_yellow_grip_symbol_svg = ():AnimatedScene => {
+    return new AnimatedScene(1000, 1000, SpaceSetting.ThreeDim, HotReloadSetting.TraceFromStart, async (dm) => {
+        const shape = createSVGShape(gravityTextSVG, 10)
+        dm.add(shape)
+    })
+}

package/template/src/example_scenes/tutorials/easy1.ts

@@ -37,18 +37,18 @@ export function tutorial_easy1(): AnimatedScene {
       // And give a function that is called for each frame with the current interpolation value
       const anim = createAnim(easeInOutQuad(-5, 5, 500), (value) => (circle.position.x = value))
 
-      // We use "addAnim" to schedule an animation, it will run from the frame (tick) it was added at
+      // We use "addAnims" to schedule an animation, it will run from the frame (tick) it was added at
       // Since this is our first added animation in this scene, we are currently at tick 0, So it will just add to the start.
       // But say that we are in a complex animation and our previous buildings would mean that we are at frame 49878 for example (we wouldn't know this)
       // Then it just adds the animation with that offset
-      scene.addAnim(anim)
+      scene.addAnims(anim)
 
       // To make the circle also go back, we can reverse the entire animation and add it again
       // Notice that we are copying it, this is so that the reverse() doesn't affect the original variable "anim"
-      scene.addAnim(anim.copy().reverse())
+      scene.addAnims(anim.copy().reverse())
 
       // We now finally add a function that will be called at each frame (tick) in our animation
-      // This doesn't push the tick forward like the "addAnim" does.
+      // This doesn't push the tick forward like the "addAnims" does.
       // It just declares a function that should be run at each frame
       // For this animation, we want to set a color to the circle at each frame.
       scene.onEachTick((tick) => {

package/template/src/example_scenes/tutorials/easy3.ts

@@ -124,7 +124,7 @@ export function tutorial_easy3(): AnimatedScene {
       })
 
       // Start the slide show
-      scene.addAnim(switcher)
+      scene.addAnims(switcher)
 
       // Let it run a bit after the last change (nice tail for render/export)
       scene.addWait(1_000)

package/template/src/example_scenes/tutorials/medium1.ts

@@ -12,12 +12,10 @@ import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/sce
 // If your helpers live elsewhere, tweak these paths:
 import {
   addBackgroundGradient,
-  addHDRI,
-  loadHDRIData,
-  HDRIs
 } from '$renderer/lib/rendering/lighting3d'
 import { setOpacity } from '$renderer/lib/animation/animations'
 import { createLine } from '$renderer/lib/rendering/objects2d'
+import { addHDRI, HDRIs, loadHDRIData } from '$renderer/lib/rendering/hdri'
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Step 0: Scene constants and materials
@@ -67,8 +65,8 @@ export function tutorial_medium1(): AnimatedScene {
       // Step 3: Lighting & background
       // HDRI gives nice reflections/IBL; gradient provides a subtle backdrop.
       // ───────────────────────────────────────────────────────────────────────
-      const hdriData = await loadHDRIData(HDRIs.photoStudio1, 2, 0.5) // (lods, intensity normalization)
-      await addHDRI(scene, hdriData, 0.3) // envMap intensity
+      const hdriData = await loadHDRIData(HDRIs.photoStudio1, 2) // (lods, intensity normalization)
+      await addHDRI(scene, hdriData, 0.3, 0.5) // envMap intensity
 
       addBackgroundGradient({
         scene,

package/template/src/example_scenes/vectorField.ts

@@ -1,11 +1,9 @@
+import { addHDRI, HDRIs, loadHDRIData } from '$renderer/lib/rendering/hdri'
 import { linspace } from '../renderer/src/lib/mathHelpers/vectors'
 import { COLORS } from '../renderer/src/lib/rendering/helpers'
 import {
   addBackgroundGradient,
-  addHDRI,
   addSceneLighting,
-  HDRIs,
-  loadHDRIData
 } from '../renderer/src/lib/rendering/lighting3d'
 import { createFastText } from '../renderer/src/lib/rendering/objects2d'
 import { AnimatedScene, HotReloadSetting, SpaceSetting } from '../renderer/src/lib/scene/sceneClass'
@@ -41,7 +39,7 @@ export const field: VectorField3D = (x, y, z, time) => {
   }
 }
 
-const hdriData = await loadHDRIData(HDRIs.outdoor1, 2, 1)
+const hdriData = await loadHDRIData(HDRIs.outdoor1, 2)
 
 export const vectorFieldScene = (): AnimatedScene => {
   return new AnimatedScene(

package/template/src/example_scenes/visulizingFunctions.ts

@@ -1,10 +1,7 @@
 import { COLORS } from '../renderer/src/lib/rendering/helpers'
 import {
   addBackgroundGradient,
-  addHDRI,
   addSceneLighting,
-  HDRIs,
-  loadHDRIData
 } from '../renderer/src/lib/rendering/lighting3d'
 import { AnimatedScene, HotReloadSetting, SpaceSetting } from '../renderer/src/lib/scene/sceneClass'
 import * as THREE from 'three'
@@ -19,6 +16,7 @@ import {
   setOpacity
 } from '../renderer/src/lib/animation/animations'
 import { createFastText, updateText } from '../renderer/src/lib/rendering/objects2d'
+import { addHDRI, HDRIs, loadHDRIData } from '$renderer/lib/rendering/hdri'
 
 const functions: [string, (x: number) => number][] = [
   // ──────────── Start Simple & Recognizable ────────────
@@ -95,9 +93,9 @@ const morphAnimation = (
     line.setPoints(interpolate(vecFunc1, vecFunc2, value))
   })
 }
-const hdriData = await loadHDRIData(HDRIs.outdoor1, 1, 1)
+const hdriData = await loadHDRIData(HDRIs.outdoor1, 1)
 
-export const functionsAnimation = (): AnimatedScene => {
+export const animatedFunctionsScene = (): AnimatedScene => {
   return new AnimatedScene(
     1080,
     2160,
@@ -157,11 +155,11 @@ export const functionsAnimation = (): AnimatedScene => {
         scene.addSequentialBackgroundAnims(
           morphAnimation(plotLine, vecFuncs[i], vecFuncs[i + 1], 300)
         )
-        scene.addAnim(fadeOut(textNode, 150))
+        scene.addAnims(fadeOut(textNode, 150))
         scene.do(async () => {
           await updateText(textNode, functions[i + 1][0])
         })
-        scene.addAnim(fadeIn(textNode, 150))
+        scene.addAnims(fadeIn(textNode, 150))
         scene.addWait(800)
       }
 

package/template/src/main/index.ts

@@ -1,18 +1,41 @@
-import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { app, shell, BrowserWindow, ipcMain, nativeTheme, screen } from 'electron'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 import { renderVideo } from './rendering'
 import { deleteRenderedContent } from './storage'
+import ElectronStore from 'electron-store'
+
+const store = new ElectronStore()
+
+// Force light mode
+nativeTheme.themeSource = 'light'
 
 let mainWindow: BrowserWindow
 
+function getHzForWebContents(wc: Electron.WebContents): number {
+  const win = BrowserWindow.fromWebContents(wc)
+  if (win) {
+    const b = win.getBounds()
+    const nearest = screen.getDisplayNearestPoint({ x: b.x, y: b.y })
+    return nearest.displayFrequency || 60
+  }
+  // Fallback to primary display
+  return screen.getPrimaryDisplay().displayFrequency || 60
+}
+
 function createWindow(): void {
   // Create the browser window.
+
+  const defaultBounds = { width: 1000, height: 1300 }
+  const savedBounds: any = store.get('windowBounds', defaultBounds)
   mainWindow = new BrowserWindow({
-    width: 1000,
-    height: 1300,
+    width: savedBounds.width,
+    height: savedBounds.height,
+    x: savedBounds.x,
+    y: savedBounds.y,
     show: false,
+    title: "DefinedMotion",
     autoHideMenuBar: true,
     ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {
@@ -26,6 +49,14 @@ function createWindow(): void {
     }
   })
 
+  mainWindow.on('resize', () => {
+    store.set('windowBounds', mainWindow.getBounds())
+  })
+
+  mainWindow.on('move', () => {
+    store.set('windowBounds', mainWindow.getBounds())
+  })
+
   mainWindow.on('ready-to-show', () => {
     mainWindow.show()
   })
@@ -75,6 +106,31 @@ app.whenReady().then(() => {
     // dock icon is clicked and there are no other windows open.
     if (BrowserWindow.getAllWindows().length === 0) createWindow()
   })
+
+  // RPC: renderer asks main for the current display refresh rate (Hz)
+  ipcMain.handle('get-display-hz', (event) => {
+    return getHzForWebContents(event.sender)
+  })
+
+    function broadcastHzToAllWindows() {
+    for (const w of BrowserWindow.getAllWindows()) {
+      const hz = getHzForWebContents(w.webContents)
+      w.webContents.send('display-hz-changed', hz)
+    }
+  }
+
+  // Display geometry / metrics changed (resolution/scale/mode changes, some moves)
+  screen.on('display-metrics-changed', () => {
+    broadcastHzToAllWindows()
+  })
+
+  // Displays added/removed (dock/undock, hot-plug)
+  screen.on('display-added', () => {
+    broadcastHzToAllWindows()
+  })
+  screen.on('display-removed', () => {
+    broadcastHzToAllWindows()
+  })
 })
 
 ipcMain.handle('start-video-render', async (event, options) => {