@tarsis/toolkit 0.5.1 → 0.5.2

package/dist/{useWindowReady-CIGrizO6.js → useWindowReady-CpmawCsz.js}

@@ -2303,6 +2303,12 @@ class NativeAnimation extends WithPromise {
         super();
         this.finishedTime = null;
         this.isStopped = false;
+        /**
+         * Tracks a manually-set start time that takes precedence over WAAPI's
+         * dynamic startTime. This is cleared when play() or time setter is called,
+         * allowing WAAPI to take over timing.
+         */
+        this.manualStartTime = null;
         if (!options)
             return;
         const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
@@ -2338,6 +2344,7 @@ class NativeAnimation extends WithPromise {
     play() {
         if (this.isStopped)
             return;
+        this.manualStartTime = null;
         this.animation.play();
         if (this.state === "finished") {
             this.updateFinished();
@@ -2401,6 +2408,7 @@ class NativeAnimation extends WithPromise {
         return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
     }
     set time(newTime) {
+        this.manualStartTime = null;
         this.finishedTime = null;
         this.animation.currentTime = secondsToMilliseconds(newTime);
     }
@@ -2423,10 +2431,10 @@ class NativeAnimation extends WithPromise {
             : this.animation.playState;
     }
     get startTime() {
-        return Number(this.animation.startTime);
+        return this.manualStartTime ?? Number(this.animation.startTime);
     }
     set startTime(newStartTime) {
-        this.animation.startTime = newStartTime;
+        this.manualStartTime = this.animation.startTime = newStartTime;
     }
     /**
      * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
@@ -2488,7 +2496,7 @@ class NativeAnimationExtended extends NativeAnimation {
          */
         replaceTransitionType(options);
         super(options);
-        if (options.startTime) {
+        if (options.startTime !== undefined) {
             this.startTime = options.startTime;
         }
         this.options = options;
@@ -2513,8 +2521,14 @@ class NativeAnimationExtended extends NativeAnimation {
             ...options,
             autoplay: false,
         });
-        const sampleTime = secondsToMilliseconds(this.finishedTime ?? this.time);
-        motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
+        /**
+         * Use wall-clock elapsed time for sampling.
+         * Under CPU load, WAAPI's currentTime may not reflect actual
+         * elapsed time, causing incorrect sampling and visual jumps.
+         */
+        const sampleTime = Math.max(sampleDelta, time.now() - this.startTime);
+        const delta = clamp(0, sampleDelta, sampleTime - sampleDelta);
+        motionValue.setWithVelocity(sampleAnimation.sample(Math.max(0, sampleTime - delta)).value, sampleAnimation.sample(sampleTime).value, delta);
         sampleAnimation.stop();
     }
 }

package/dist/{useWindowReady-CESjx5iD.cjs → useWindowReady-ow3ZpIjd.cjs}

@@ -2305,6 +2305,12 @@ class NativeAnimation extends WithPromise {
         super();
         this.finishedTime = null;
         this.isStopped = false;
+        /**
+         * Tracks a manually-set start time that takes precedence over WAAPI's
+         * dynamic startTime. This is cleared when play() or time setter is called,
+         * allowing WAAPI to take over timing.
+         */
+        this.manualStartTime = null;
         if (!options)
             return;
         const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
@@ -2340,6 +2346,7 @@ class NativeAnimation extends WithPromise {
     play() {
         if (this.isStopped)
             return;
+        this.manualStartTime = null;
         this.animation.play();
         if (this.state === "finished") {
             this.updateFinished();
@@ -2403,6 +2410,7 @@ class NativeAnimation extends WithPromise {
         return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
     }
     set time(newTime) {
+        this.manualStartTime = null;
         this.finishedTime = null;
         this.animation.currentTime = secondsToMilliseconds(newTime);
     }
@@ -2425,10 +2433,10 @@ class NativeAnimation extends WithPromise {
             : this.animation.playState;
     }
     get startTime() {
-        return Number(this.animation.startTime);
+        return this.manualStartTime ?? Number(this.animation.startTime);
     }
     set startTime(newStartTime) {
-        this.animation.startTime = newStartTime;
+        this.manualStartTime = this.animation.startTime = newStartTime;
     }
     /**
      * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
@@ -2490,7 +2498,7 @@ class NativeAnimationExtended extends NativeAnimation {
          */
         replaceTransitionType(options);
         super(options);
-        if (options.startTime) {
+        if (options.startTime !== undefined) {
             this.startTime = options.startTime;
         }
         this.options = options;
@@ -2515,8 +2523,14 @@ class NativeAnimationExtended extends NativeAnimation {
             ...options,
             autoplay: false,
         });
-        const sampleTime = secondsToMilliseconds(this.finishedTime ?? this.time);
-        motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
+        /**
+         * Use wall-clock elapsed time for sampling.
+         * Under CPU load, WAAPI's currentTime may not reflect actual
+         * elapsed time, causing incorrect sampling and visual jumps.
+         */
+        const sampleTime = Math.max(sampleDelta, time.now() - this.startTime);
+        const delta = clamp(0, sampleDelta, sampleTime - sampleDelta);
+        motionValue.setWithVelocity(sampleAnimation.sample(Math.max(0, sampleTime - delta)).value, sampleAnimation.sample(sampleTime).value, delta);
         sampleAnimation.stop();
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarsis/toolkit",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "publishConfig": {
     "access": "public"
   },
@@ -79,13 +79,13 @@
     "@use-gesture/react": "^10.3.1",
     "bowser": "^2.13.1",
     "canvas-confetti": "^1.9.4",
-    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "flickity": "^2.3.0",
     "gsap": "^3.14.2",
     "howler": "^2.2.4",
     "html2canvas": "^1.4.1",
     "load-bmfont": "1.4.1",
-    "motion": "^12.24.10",
+    "motion": "^12.24.11",
     "p5": "^2.0.5",
     "react-flip-toolkit": "^7.2.4",
     "react-icons": "^5.5.0",