@moldable-ai/ui 0.2.18 → 0.2.19

package/src/styles/index.css

@@ -57,6 +57,8 @@
   --color-status-stopped: var(--status-stopped);
   --color-status-pending: var(--status-pending);
   --color-status-error: var(--status-error);
+  --color-model-effort-blue: var(--model-effort-blue);
+  --color-model-effort-purple: var(--model-effort-purple);
   --color-terminal: var(--terminal);
   --color-terminal-header: var(--terminal-header);
   --color-terminal-foreground: var(--terminal-foreground);
@@ -77,6 +79,361 @@
   }
 }
 
+@property --model-effort-mask-position {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+
+@keyframes model-effort-power-reveal {
+  from {
+    --model-effort-mask-position: 100%;
+  }
+  to {
+    --model-effort-mask-position: 0%;
+  }
+}
+
+@keyframes model-effort-power-field {
+  0% {
+    transform: translate3d(-7%, -3%, 0) scale(1.02);
+  }
+  45% {
+    transform: translate3d(6%, 4%, 0) scale(1.12);
+  }
+  100% {
+    transform: translate3d(-1%, -6%, 0) scale(1.06);
+  }
+}
+
+@keyframes model-effort-power-particle-stream {
+  0% {
+    opacity: 0;
+    transform: translate3d(102%, -50%, 0);
+  }
+  10% {
+    opacity: calc(var(--particle-opacity) * 0.55);
+    transform: translate3d(98%, -50%, 0);
+  }
+  45% {
+    opacity: var(--particle-opacity);
+    transform: translate3d(75%, -50%, 0);
+  }
+  75% {
+    opacity: var(--particle-opacity);
+    transform: translate3d(38%, -50%, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(-6%, -50%, 0);
+  }
+}
+
+@keyframes model-effort-max-burst {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.35);
+  }
+  18% {
+    opacity: 0.95;
+  }
+  100% {
+    opacity: 0;
+    transform: translate(
+        calc(-50% + var(--burst-x)),
+        calc(-50% + var(--burst-y))
+      )
+      scale(0.12);
+  }
+}
+
+@keyframes model-effort-popover-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes model-effort-popover-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}
+
+.model-effort-popover {
+  transform-origin: var(--radix-popover-content-transform-origin);
+  will-change: opacity, transform;
+}
+
+.model-effort-popover[data-state='open'] {
+  animation: model-effort-popover-in 320ms cubic-bezier(0.23, 1, 0.32, 1) 30ms
+    both;
+}
+
+.model-effort-popover[data-state='closed'] {
+  visibility: visible;
+  pointer-events: none;
+  animation: model-effort-popover-out 320ms cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+
+.model-effort-power-fill {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.model-effort-power-fill[data-level='light'] {
+  background: linear-gradient(
+    90deg,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 94%,
+        var(--model-effort-blue)
+      )
+      0%,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 80%,
+        var(--model-effort-blue)
+      )
+      100%
+  );
+}
+
+.model-effort-power-fill[data-level='medium'] {
+  background: linear-gradient(
+    90deg,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 76%,
+        var(--model-effort-blue)
+      )
+      0%,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 48%,
+        var(--model-effort-blue)
+      )
+      100%
+  );
+}
+
+.model-effort-power-fill[data-level='high'] {
+  background: linear-gradient(
+    90deg,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 42%,
+        var(--model-effort-blue)
+      )
+      0%,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 12%,
+        var(--model-effort-blue)
+      )
+      100%
+  );
+}
+
+.model-effort-power-fill[data-level='xhigh'] {
+  background: linear-gradient(
+    90deg,
+    color-mix(
+        in srgb,
+        var(--model-effort-sparkle) 16%,
+        var(--model-effort-blue)
+      )
+      0%,
+    color-mix(in srgb, var(--model-effort-blue) 76%, var(--model-effort-purple))
+      58%,
+    color-mix(in srgb, var(--model-effort-blue) 54%, var(--model-effort-purple))
+      100%
+  );
+}
+
+.model-effort-power-fill[data-level='max'] {
+  --model-effort-mask-position: 0%;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--model-effort-blue) 60%, var(--model-effort-purple))
+      0%,
+    var(--model-effort-purple) 55%,
+    color-mix(in srgb, var(--model-effort-purple) 72%, var(--model-effort-blue))
+      100%
+  );
+  --model-effort-reveal-mask: linear-gradient(
+    90deg,
+    transparent calc(var(--model-effort-mask-position) - 120px),
+    black var(--model-effort-mask-position),
+    black 100%
+  );
+  -webkit-mask-image: var(--model-effort-reveal-mask);
+  mask-image: var(--model-effort-reveal-mask);
+}
+
+.model-effort-power-fill[data-level='max'][data-reveal='true'] {
+  animation: model-effort-power-reveal 2s both;
+}
+
+.model-effort-power-field {
+  position: absolute;
+  inset: -90% -24%;
+  background:
+    radial-gradient(
+      circle at 18% 35%,
+      color-mix(
+          in srgb,
+          var(--model-effort-blue) 90%,
+          var(--model-effort-sparkle)
+        )
+        0 8%,
+      transparent 34%
+    ),
+    radial-gradient(
+      circle at 47% 60%,
+      color-mix(
+          in srgb,
+          var(--model-effort-purple) 78%,
+          var(--model-effort-sparkle)
+        )
+        0 11%,
+      transparent 38%
+    ),
+    radial-gradient(
+      circle at 78% 34%,
+      color-mix(in srgb, var(--model-effort-purple) 70%, var(--background)) 0
+        10%,
+      transparent 36%
+    ),
+    radial-gradient(
+      circle at 63% 72%,
+      color-mix(
+          in srgb,
+          var(--model-effort-purple) 84%,
+          var(--model-effort-blue)
+        )
+        0 9%,
+      transparent 34%
+    );
+  mix-blend-mode: luminosity;
+  animation: model-effort-power-field 4.8s ease-in-out infinite alternate;
+  will-change: transform;
+}
+
+.model-effort-power-fill[data-level='xhigh'] .model-effort-power-field {
+  opacity: 0.46;
+  animation-duration: 6.4s;
+}
+
+.model-effort-power-fill[data-level='light'] .model-effort-power-field {
+  opacity: 0.12;
+  animation-duration: 9s;
+}
+
+.model-effort-power-fill[data-level='medium'] .model-effort-power-field {
+  opacity: 0.22;
+  animation-duration: 8s;
+}
+
+.model-effort-power-fill[data-level='high'] .model-effort-power-field {
+  opacity: 0.34;
+  animation-duration: 7.1s;
+}
+
+.model-effort-power-fill[data-level='max'] .model-effort-power-field {
+  opacity: 0.9;
+}
+
+.model-effort-power-particles {
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+}
+
+.model-effort-power-fill[data-level='xhigh'] .model-effort-power-particles {
+  opacity: 0.42;
+}
+
+.model-effort-power-fill[data-level='light'] .model-effort-power-particles {
+  opacity: 0.12;
+}
+
+.model-effort-power-fill[data-level='medium'] .model-effort-power-particles {
+  opacity: 0.2;
+}
+
+.model-effort-power-fill[data-level='high'] .model-effort-power-particles {
+  opacity: 0.3;
+}
+
+.model-effort-power-fill[data-level='light']
+  .model-effort-power-particle:not(:nth-child(4n + 1)),
+.model-effort-power-fill[data-level='medium']
+  .model-effort-power-particle:nth-child(even) {
+  display: none;
+}
+
+.model-effort-power-fill[data-level='xhigh']
+  .model-effort-power-particle:nth-child(even) {
+  display: none;
+}
+
+.model-effort-power-particle {
+  position: absolute;
+  right: 0;
+  left: 0;
+  height: 3px;
+  animation-name: model-effort-power-particle-stream;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  will-change: opacity, transform;
+}
+
+.model-effort-power-particle::before {
+  display: block;
+  width: 3px;
+  height: 3px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--model-effort-sparkle) 72%, transparent);
+  box-shadow: 0 0 5px
+    color-mix(in srgb, var(--model-effort-sparkle) 34%, transparent);
+  content: '';
+  transform: scale(var(--particle-scale));
+}
+
+.model-effort-max-burst {
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  width: 76px;
+  height: 76px;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+}
+
+.model-effort-max-burst-particle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 5px;
+  height: 5px;
+  border-radius: 999px;
+  animation: model-effort-max-burst 620ms cubic-bezier(0.25, 1, 0.5, 1) both;
+}
+
 .moldable-chat-shimmer {
   color: transparent;
   background: linear-gradient(
@@ -114,6 +471,9 @@
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
   --ring: oklch(0.7145 0.185 45.03);
+  --model-effort-blue: #339cff;
+  --model-effort-purple: #924ff7;
+  --model-effort-sparkle: #fff;
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -167,6 +527,9 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.7145 0.185 45.03);
+  --model-effort-blue: #339cff;
+  --model-effort-purple: #ad7bf9;
+  --model-effort-sparkle: #fff;
   --chart-1: oklch(0.7145 0.185 45.03);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -223,6 +586,20 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .model-effort-power-fill,
+  .model-effort-power-field,
+  .model-effort-power-particle,
+  .model-effort-max-burst-particle,
+  .model-effort-popover {
+    animation: none;
+  }
+
+  .model-effort-max-burst {
+    display: none;
+  }
+}
+
 /* Shiki dual-theme support: override inline styles in dark mode */
 .dark .shiki,
 .dark .shiki span {