@braccato/core 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -60,4 +60,4 @@ braccato-lyrics {
60
60
  }
61
61
  ```
62
62
 
63
- See the [full documentation](https://github.com/better-lyrics/braccato) for all properties and framework examples.
63
+ See the [full documentation](https://braccato.boidu.dev) for all properties and framework examples.
package/dist/index.js CHANGED
@@ -607,7 +607,7 @@ ${f.translation.text}`, m.appendChild(g);
607
607
  container: e
608
608
  };
609
609
  }
610
- const jt = ":host{display:block;overflow-y:auto;position:relative;container-type:size;scrollbar-width:none}:host::-webkit-scrollbar{display:none}:host(:has(.braccato--user-scrolling)){scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar{display:block;width:6px}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar-track{background:transparent}.braccato-container{font-family:var(--braccato-font-family);font-size:var(--braccato-font-size);font-weight:var(--braccato-font-weight);isolation:isolate;line-height:var(--braccato-line-height);position:relative;z-index:1;transition:transform var(--braccato-scroll-duration) var(--braccato-scroll-timing-function) 0s;padding-top:2rem;padding-bottom:0}.braccato-container>div{cursor:pointer;padding:var(--braccato-padding) 0;transform-origin:left center;word-break:break-word;transition:filter calc(var(--braccato-duration) / 3) .4s,opacity calc(var(--braccato-duration) / 2) .166s,transform .166s var(--braccato-anim-delay, 0s)}.braccato-container:has(.braccato--active):not(.braccato--user-scrolling)>div:not(.braccato--active):not(.braccato--active~div){opacity:.33;filter:blur(2.5px)}.braccato-container>div.braccato--active{opacity:1;filter:blur(0px)}.braccato-container>div.braccato--active~div{opacity:.66;filter:blur(0px)}.braccato-container>.braccato--animating{opacity:1!important;filter:blur(0px)!important}.braccato-container>div:hover{opacity:1!important;filter:blur(0px)!important;transform:scale(var(--braccato-hover-scale, 1.01));transition:all .3s ease}.braccato--active{cursor:default}:not(.braccato-background-lyric){order:0}.braccato-background-lyric{order:2}.braccato--line>span>span.braccato-background-lyric{font-size:.75em;font-weight:500}.braccato--line{transform:scale(var(--braccato-scale));transition-property:transform;transition-duration:var(--braccato-scale-transition-duration);transition-timing-function:ease;display:flex;flex-flow:row wrap;align-items:start;align-content:flex-start;padding-left:.25em;padding-right:.25em;box-sizing:border-box}.braccato--line.braccato--animating{transform:scale(var(--braccato-active-scale));transition-delay:var(--braccato-anim-delay)}.braccato--line>span{color:var(--braccato-inactive-color);display:inline-block;white-space:pre-wrap}.braccato--word{white-space:pre;display:inline-block;transform:translateY(0);position:relative}.braccato--line.braccato--pre-animating,.braccato--line.braccato--pre-animating .braccato--word{will-change:transform}.braccato--break{flex-basis:100%;height:0}.braccato--word.braccato--animating{animation:braccato-wobble var(--braccato-wobble-duration) forwards ease;animation-delay:var(--braccato-anim-delay);animation-play-state:running}.braccato--word.braccato--animating.braccato--paused{animation-play-state:paused}.braccato--word:after{position:absolute;content:attr(data-content);top:-2rem;left:-2rem;white-space:pre-wrap;padding:2rem;pointer-events:none;color:transparent;box-sizing:content-box;width:100%;background-image:linear-gradient(90deg,var(--braccato-active-color) calc(100% * var(--lyric-transition-amount-start) - 4rem * var(--lyric-transition-amount-start) + 2rem),#00000000 calc(100% * var(--lyric-transition-amount-end) - 4rem * var(--lyric-transition-amount-end) + 2rem + 1px));opacity:0;--lyric-transition-amount-start: -.2;--lyric-transition-amount-end: -.1;--braccato-glow-color: color(display-p3 1 1 1 / .0001);transition:--lyric-transition-amount-start 1s linear 1000s,--lyric-transition-amount-end 1s linear 1000s,opacity .5s ease;-webkit-background-clip:text;background-clip:text}.braccato--word[data-long-word]:after{--braccato-glow-color: color(display-p3 1 1 1 / 1)}.braccato--word.braccato--pre-animating:not(.braccato--animating):after{transition:none;--lyric-transition-amount-start: -.2;--lyric-transition-amount-end: -.1;opacity:0}.braccato--word.braccato--pre-animating:not(.braccato--animating):not(.braccato-zero-dur-animate):after{opacity:1}.braccato--word.braccato--animating:after{opacity:1;animation:braccato-glow max(calc(var(--braccato-duration) * 1.2),1.2s) forwards ease;animation-delay:var(--braccato-anim-delay);animation-play-state:running;--lyric-transition-amount-start: 1.4;--lyric-transition-amount-end: 1.5;transition-property:--lyric-transition-amount-start,--lyric-transition-amount-end,opacity;transition-duration:calc(var(--braccato-duration) * 1.6),calc(var(--braccato-duration) * 1.6),var(--braccato-highlight-fade-in-duration);transition-timing-function:linear,linear,ease;transition-delay:var(--braccato-swipe-delay),var(--braccato-swipe-delay),var(--braccato-anim-delay)}.braccato--word.braccato--animating.braccato--paused:after{transition-duration:100000000s,100000000s,100000000s;--lyric-transition-amount-start: 10;--lyric-transition-amount-end: 10;opacity:.5;animation-play-state:paused}.braccato--translated,.braccato--romanized{display:block;font-size:var(--braccato-translated-font-size);font-weight:var(--braccato-translated-font-weight);font-family:var(--braccato-translated-font-family);color:var(--braccato-translated-color);white-space:normal;line-height:1.1;margin-top:8px}.braccato--romanized>span{color:var(--braccato-inactive-color);display:inline-block;white-space:pre-wrap}.braccato--romanized{width:fit-content;font-size:calc(var(--braccato-translated-font-size) / 1.25);background:#ffffff0d;padding:.375rem .75rem;border:1px solid rgba(255,255,255,.1);border-radius:1rem}.braccato-rtl{direction:rtl}.braccato-rtl.braccato--word:after{background-image:linear-gradient(270deg,var(--braccato-active-color) calc(100% * var(--lyric-transition-amount-start) - 4rem * var(--lyric-transition-amount-start) + 2rem),#00000000 calc(100% * var(--lyric-transition-amount-end) - 4rem * var(--lyric-transition-amount-end) + 2rem + 1px))}.braccato--line[data-agent=v2],.braccato--line[data-agent=v3]{justify-content:flex-end;text-align:right;transform-origin:right center!important}.braccato--line[data-agent=v1000]{justify-content:center;text-align:center;transform-origin:center center!important}.braccato--spacer{padding:0;margin:0}.braccato-autoscroll-btn{font-family:var(--braccato-font-family);position:absolute;display:block;font-size:1.75rem;font-weight:600;white-space:normal;line-height:1.1;width:fit-content;background:#ffffff0d;padding:.5rem 1rem;border:1px solid rgba(255,255,255,.1);border-radius:1rem;color:#fff;left:50%;transform:translate(-50%,2em);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:100;transition:opacity .15s linear .05s,transform .2s cubic-bezier(.5,1,.89,1)}.braccato-autoscroll-btn[hidden]{transition:opacity .1s linear,transform .15s ease-in;opacity:0;pointer-events:none;transform:translate(-50%,-3em)}@keyframes braccato-wobble{0%{transform:translateY(0)}to{transform:translateY(-.0375em)}}@keyframes braccato-glow{0%{filter:drop-shadow(0 0 .8rem var(--braccato-glow-color))}to{filter:drop-shadow(0 0 0rem var(--braccato-glow-color))}}", Ht = ':host{--braccato-text-color: color(display-p3 1 1 1 / 1);--braccato-glow-color: color(display-p3 1 1 1 / .5);--braccato-active-color: var(--braccato-text-color);--braccato-inactive-color: color( from var(--braccato-text-color) display-p3 r g b / var(--braccato-inactive-opacity, .3) );--braccato-active-opacity: 1;--braccato-inactive-opacity: .3;--braccato-richsync-timing-offset: .15s;--braccato-timing-offset: .115s;--braccato-scroll-timing-offset: .5s;--braccato-font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--braccato-font-size: 3rem;--braccato-font-weight: 600;--braccato-line-height: 1.333;--braccato-translated-font-size: 2rem;--braccato-translated-font-weight: 600;--braccato-translated-font-family: var(--braccato-font-family);--braccato-translated-color: color(display-p3 1 1 1 / var(--braccato-translated-opacity, .6));--braccato-scale-transition-duration: .166s;--braccato-highlight-fade-in-duration: .33s;--braccato-highlight-fade-out-duration: .5s;--braccato-wobble-duration: 1s;--braccato-padding: 1.25rem;--braccato-scale: .95;--braccato-active-scale: 1;--braccato-scroll-duration: .75s;--braccato-scroll-timing-function: cubic-bezier(.86, 0, .07, 1)}';
610
+ const jt = ":host{display:block;overflow-y:auto;position:relative;container-type:size;scrollbar-width:none}:host::-webkit-scrollbar{display:none}:host(:has(.braccato--user-scrolling)){scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar{display:block;width:6px}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar-track{background:transparent}.braccato-container{font-family:var(--braccato-font-family);font-size:var(--braccato-font-size);font-weight:var(--braccato-font-weight);isolation:isolate;line-height:var(--braccato-line-height);position:relative;z-index:1;transition:transform var(--braccato-scroll-duration) var(--braccato-scroll-timing-function) 0s;padding-top:2rem;padding-bottom:0}.braccato-container>div{cursor:pointer;padding:var(--braccato-padding) 0;transform-origin:left center;word-break:break-word;transition:filter calc(var(--braccato-duration) / 3) .4s,opacity calc(var(--braccato-duration) / 2) .166s,transform .166s var(--braccato-anim-delay, 0s)}.braccato-container:has(.braccato--active):not(.braccato--user-scrolling)>div:not(.braccato--active):not(.braccato--active~div){opacity:.33;filter:blur(2.5px)}.braccato-container>div.braccato--active{opacity:1;filter:blur(0px)}.braccato-container>div.braccato--active~div{opacity:.66;filter:blur(0px)}.braccato-container>.braccato--animating{opacity:1!important;filter:blur(0px)!important}.braccato-container>div:hover{opacity:1!important;filter:blur(0px)!important;transform:scale(var(--braccato-hover-scale, 1.01));transition:all .3s ease}.braccato--active{cursor:default}:not(.braccato-background-lyric){order:0}.braccato-background-lyric{order:2}.braccato--line>span>span.braccato-background-lyric{font-size:.675em;font-weight:400}.braccato--line{transform:scale(var(--braccato-scale));transition-property:transform;transition-duration:var(--braccato-scale-transition-duration);transition-timing-function:ease;display:flex;flex-flow:row wrap;align-items:start;align-content:flex-start;padding-left:.25em;padding-right:.25em;box-sizing:border-box}.braccato--line.braccato--animating{transform:scale(var(--braccato-active-scale));transition-delay:var(--braccato-anim-delay)}.braccato--line>span{color:var(--braccato-inactive-color);display:inline-block;white-space:pre-wrap}.braccato--word{white-space:pre;display:inline-block;transform:translateY(0);position:relative}.braccato--line.braccato--pre-animating,.braccato--line.braccato--pre-animating .braccato--word{will-change:transform}.braccato--break{flex-basis:100%;height:0}.braccato--word.braccato--animating{animation:braccato-wobble var(--braccato-wobble-duration) forwards ease;animation-delay:var(--braccato-anim-delay);animation-play-state:running}.braccato--word.braccato--animating.braccato--paused{animation-play-state:paused}.braccato--word:after{position:absolute;content:attr(data-content);top:-2rem;left:-2rem;white-space:pre-wrap;padding:2rem;pointer-events:none;color:transparent;box-sizing:content-box;width:100%;background-image:linear-gradient(90deg,var(--braccato-active-color) calc(100% * var(--lyric-transition-amount-start) - 4rem * var(--lyric-transition-amount-start) + 2rem),#00000000 calc(100% * var(--lyric-transition-amount-end) - 4rem * var(--lyric-transition-amount-end) + 2rem + 1px));opacity:0;--lyric-transition-amount-start: -.2;--lyric-transition-amount-end: -.1;--braccato-glow-color: color(display-p3 1 1 1 / .0001);transition:--lyric-transition-amount-start 1s linear 1000s,--lyric-transition-amount-end 1s linear 1000s,opacity .5s ease;-webkit-background-clip:text;background-clip:text}.braccato--word[data-long-word]:after{--braccato-glow-color: color(display-p3 1 1 1 / 1)}.braccato--word.braccato--pre-animating:not(.braccato--animating):after{transition:none;--lyric-transition-amount-start: -.2;--lyric-transition-amount-end: -.1;opacity:0}.braccato--word.braccato--pre-animating:not(.braccato--animating):not(.braccato-zero-dur-animate):after{opacity:1}.braccato--word.braccato--animating:after{opacity:1;animation:braccato-glow max(calc(var(--braccato-duration) * 1.2),1.2s) forwards ease;animation-delay:var(--braccato-anim-delay);animation-play-state:running;--lyric-transition-amount-start: 1.4;--lyric-transition-amount-end: 1.5;transition-property:--lyric-transition-amount-start,--lyric-transition-amount-end,opacity;transition-duration:calc(var(--braccato-duration) * 1.6),calc(var(--braccato-duration) * 1.6),var(--braccato-highlight-fade-in-duration);transition-timing-function:linear,linear,ease;transition-delay:var(--braccato-swipe-delay),var(--braccato-swipe-delay),var(--braccato-anim-delay)}.braccato--word.braccato--animating.braccato--paused:after{transition-duration:100000000s,100000000s,100000000s;--lyric-transition-amount-start: 10;--lyric-transition-amount-end: 10;opacity:.5;animation-play-state:paused}.braccato--translated,.braccato--romanized{display:block;font-size:var(--braccato-translated-font-size);font-weight:var(--braccato-translated-font-weight);font-family:var(--braccato-translated-font-family);color:var(--braccato-translated-color);white-space:normal;line-height:1.1;margin-top:8px}.braccato--romanized>span{color:var(--braccato-inactive-color);display:inline-block;white-space:pre-wrap}.braccato--romanized{width:fit-content;font-size:calc(var(--braccato-translated-font-size) / 1.25);background:#ffffff0d;padding:.375rem .75rem;border:1px solid rgba(255,255,255,.1);border-radius:1rem}.braccato-rtl{direction:rtl}.braccato-rtl.braccato--word:after{background-image:linear-gradient(270deg,var(--braccato-active-color) calc(100% * var(--lyric-transition-amount-start) - 4rem * var(--lyric-transition-amount-start) + 2rem),#00000000 calc(100% * var(--lyric-transition-amount-end) - 4rem * var(--lyric-transition-amount-end) + 2rem + 1px))}.braccato--line[data-agent=v2],.braccato--line[data-agent=v3]{justify-content:flex-end;text-align:right;transform-origin:right center!important}.braccato--line[data-agent=v1000]{justify-content:center;text-align:center;transform-origin:center center!important}.braccato--spacer{padding:0;margin:0}.braccato-autoscroll-btn{font-family:var(--braccato-font-family);position:absolute;display:block;font-size:1.75rem;font-weight:600;white-space:normal;line-height:1.1;width:fit-content;background:#ffffff0d;padding:.5rem 1rem;border:1px solid rgba(255,255,255,.1);border-radius:1rem;color:#fff;left:50%;transform:translate(-50%,2em);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:100;transition:opacity .15s linear .05s,transform .2s cubic-bezier(.5,1,.89,1)}.braccato-autoscroll-btn[hidden]{transition:opacity .1s linear,transform .15s ease-in;opacity:0;pointer-events:none;transform:translate(-50%,-3em)}@keyframes braccato-wobble{0%{transform:translateY(0)}to{transform:translateY(-.0375em)}}@keyframes braccato-glow{0%{filter:drop-shadow(0 0 .8rem var(--braccato-glow-color))}to{filter:drop-shadow(0 0 0rem var(--braccato-glow-color))}}", Ht = ':host{--braccato-text-color: color(display-p3 1 1 1 / 1);--braccato-glow-color: color(display-p3 1 1 1 / .5);--braccato-active-color: var(--braccato-text-color);--braccato-inactive-color: color( from var(--braccato-text-color) display-p3 r g b / var(--braccato-inactive-opacity, .3) );--braccato-active-opacity: 1;--braccato-inactive-opacity: .3;--braccato-richsync-timing-offset: .15s;--braccato-timing-offset: .115s;--braccato-scroll-timing-offset: .5s;--braccato-font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--braccato-font-size: 3rem;--braccato-font-weight: 600;--braccato-line-height: 1.333;--braccato-translated-font-size: 2rem;--braccato-translated-font-weight: 600;--braccato-translated-font-family: var(--braccato-font-family);--braccato-translated-color: color(display-p3 1 1 1 / var(--braccato-translated-opacity, .6));--braccato-scale-transition-duration: .166s;--braccato-highlight-fade-in-duration: .33s;--braccato-highlight-fade-out-duration: .5s;--braccato-wobble-duration: 1s;--braccato-padding: 1.25rem;--braccato-scale: .95;--braccato-active-scale: 1;--braccato-scroll-duration: .75s;--braccato-scroll-timing-function: cubic-bezier(.86, 0, .07, 1)}';
611
611
  var Gt = Object.defineProperty, I = (t, e, a, r) => {
612
612
  for (var i = void 0, o = t.length - 1, n; o >= 0; o--)
613
613
  (n = t[o]) && (i = n(e, a, i) || i);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@braccato/core",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Synchronized lyrics web component with word-by-word animations",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -9,7 +9,7 @@
9
9
  "url": "https://github.com/better-lyrics/braccato",
10
10
  "directory": "packages/core"
11
11
  },
12
- "homepage": "https://github.com/better-lyrics/braccato",
12
+ "homepage": "https://braccato.boidu.dev",
13
13
  "keywords": ["lyrics", "sync", "web-component", "lit", "music", "karaoke", "ttml"],
14
14
  "sideEffects": true,
15
15
  "main": "dist/index.js",