@braccato/core - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/engine.d.ts

@@ -187,2 +187,4 @@ import type { LineData } from "./inject.js";
         waveEasing: string;
+        wavePathHigh: string;
+        wavePathLow: string;
         waveOscillationDurationMs: number;
@@ -189,0 +191,0 @@ waveOscillationEasing: string;

dist/instrumental.d.ts

@@ -0,1 +1,3 @@
+export declare const INSTRUMENTAL_WAVE_PATH_HIGH = "M -4 3 Q 1 2 5 3 Q 10 4 14 3 Q 18 2 22 3 Q 26 4 30 3 L 30 4 L -4 4 Z";
+export declare const INSTRUMENTAL_WAVE_PATH_LOW = "M -4 3 Q 1 4 5 3 Q 10 2 14 3 Q 18 4 22 3 Q 26 2 30 3 L 30 4 L -4 4 Z";
 /**
@@ -2,0 +4,0 @@ * Creates an HTML element representing an instrumental break in the lyrics.

dist/instrumental.js

@@ -0,1 +1,3 @@
+export const INSTRUMENTAL_WAVE_PATH_HIGH = "M -4 3 Q 1 2 5 3 Q 10 4 14 3 Q 18 2 22 3 Q 26 4 30 3 L 30 4 L -4 4 Z";
+export const INSTRUMENTAL_WAVE_PATH_LOW = "M -4 3 Q 1 4 5 3 Q 10 2 14 3 Q 18 4 22 3 Q 26 2 30 3 L 30 4 L -4 4 Z";
 /**
@@ -59,4 +61,3 @@ * Creates an HTML element representing an instrumental break in the lyrics.
     wavePath.classList.add("blyrics--wave-path");
-    // Initial draw (matches the 0% keyframe below)
-    wavePath.setAttribute("d", "M -4 3 Q 1 2 5 3 Q 10 4 14 3 Q 18 2 22 3 Q 26 4 30 3 L 30 4 L -4 4 Z");
+    wavePath.setAttribute("d", INSTRUMENTAL_WAVE_PATH_HIGH);
     clipPath.appendChild(wavePath);
@@ -63,0 +64,0 @@ defs.appendChild(clipPath);

dist/README.md

@@ -182,2 +182,9 @@ # @braccato/core
 
+The instrumental ripple is the one place a property carries geometry rather than a value.
+`--blyrics-instrumental-wave-path-high` and `--blyrics-instrumental-wave-path-low` are the two shapes
+it morphs between, each a `path()`, and a theme redrawing them is how the wave changes amplitude or
+frequency. Both must use the same commands in the same order with the same number of arguments: a
+browser only interpolates two paths smoothly when their command sequences match, and a mismatched
+pair snaps at the halfway point instead of flowing.
+
 ### Class names
@@ -184,0 +191,0 @@

dist/renderer.js

@@ -272,2 +272,6 @@ // What a consumer holds: one object per view, composing the engine that animates the lines, the
             clearEngineStyleCaches(engine);
+            // The target scroll position is one of the settings a theme carries, and the scroll padding is
+            // sized against it, so a theme that moves the target moves the layout even when no rule in it
+            // does.
+            measure();
             return needsLyricRebuild;
@@ -274,0 +278,0 @@ },

dist/styles/instrumental.css

@@ -72,2 +72,4 @@ /* Instrumental break styles */
 	transform: scaleY(1.2);
+
+	d: var(--blyrics-instrumental-wave-path-high);
 }
@@ -94,12 +96,1 @@
 }
-
-/* Update Keyframes for the "Split" shape */
-/* These paths must close at 'L 30 4 L -4 4' to match the static rect overlap */
-@keyframes blyrics-wave {
-	0%, 100% {
-		d: path("M -4 3 Q 1 2 5 3 Q 10 4 14 3 Q 18 2 22 3 Q 26 4 30 3 L 30 4 L -4 4 Z");
-	}
-	50% {
-		d: path("M -4 3 Q 1 4 5 3 Q 10 2 14 3 Q 18 4 22 3 Q 26 2 30 3 L 30 4 L -4 4 Z");
-	}
-}

dist/styles/variables.css

@@ -120,2 +120,4 @@ :root {
 	--blyrics-instrumental-wave-easing: ease-in;
+	--blyrics-instrumental-wave-path-high: path("M -4 3 Q 1 2 5 3 Q 10 4 14 3 Q 18 2 22 3 Q 26 4 30 3 L 30 4 L -4 4 Z");
+	--blyrics-instrumental-wave-path-low: path("M -4 3 Q 1 4 5 3 Q 10 2 14 3 Q 18 4 22 3 Q 26 2 30 3 L 30 4 L -4 4 Z");
 	--blyrics-instrumental-wave-oscillation-duration: 1.25s;
@@ -122,0 +124,0 @@ --blyrics-instrumental-wave-oscillation-easing: ease-in-out;

package.json

 {
   "name": "@braccato/core",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Synchronized lyrics renderer with word-by-word animations",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -182,2 +182,9 @@ # @braccato/core
 
+The instrumental ripple is the one place a property carries geometry rather than a value.
+`--blyrics-instrumental-wave-path-high` and `--blyrics-instrumental-wave-path-low` are the two shapes
+it morphs between, each a `path()`, and a theme redrawing them is how the wave changes amplitude or
+frequency. Both must use the same commands in the same order with the same number of arguments: a
+browser only interpolates two paths smoothly when their command sequences match, and a mismatched
+pair snaps at the halfway point instead of flowing.
+
 ### Class names
@@ -184,0 +191,0 @@

No alert changes

Improved metrics

Total package byte prevSize

290147

0.88%

Lines of code

5224

0.19%

Number of lines in readme file

312

2.3%

No dependency changes