@limetech/lime-elements/dist/collection/components/ai-avatar/ai-avatar.css

Lime Elements

/**
* @prop --ai-avatar-animation-play-state: Set it to `running` to start the animation.
* @prop --ai-avatar-core-blend-mode: Controls the blend mode for the core and orbitals. Defaults to `plus-lighter`.
* @prop --ai-avatar-rings-blend-mode: Controls the blend mode for the SVG circles. Defaults to `screen`.
* @prop --ai-avatar-color-one: Controls the color of the first ring. Defaults to `var(--color-red-default)`.
* @prop --ai-avatar-color-two: Controls the color of the second ring. Defaults to `var(--color-green-default)`.
* @prop --ai-avatar-color-three: Controls the color of the third ring. Defaults to `var(--color-blue-default)`.
* @prop --ai-avatar-color-four: Controls the color of the fourth ring. Defaults to `var(--color-orange-default)`.
*/
:host(limel-ai-avatar) {
  display: flex;
  justify-content: center;
  align-self: center;
  position: relative;
  aspect-ratio: 1;
  max-width: 10rem;
  max-height: 8rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  border-radius: 0.5rem;
}

* {
  box-sizing: border-box;
}

:host(limel-ai-avatar[is-thinking]:not([is-thinking=false])) {
  --ai-avatar-animation-play-state: running;
  --ai-avatar-orbitals-opacity: 0.6;
  --ai-avatar-orbitals-animation-play-state: running;
}

.core,
.orbitals {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
}

.core {
  opacity: 0.3;
  width: 70%;
  animation: breathe 3s ease infinite var(--ai-avatar-animation-play-state, paused);
  background-color: rgb(var(--color-glaucous-darker), 0.6);
  mix-blend-mode: var(--ai-avatar-core-blend-mode, plus-lighter);
}

.orbitals {
  mix-blend-mode: var(--ai-avatar-core-blend-mode, plus-lighter);
  width: clamp(0.375rem, 20%, 3.5rem);
  animation: rotate 5s linear infinite var(--ai-avatar-orbitals-animation-play-state, paused);
  transition: opacity 0.2s ease;
  opacity: var(--ai-avatar-orbitals-opacity, 0);
}
.orbitals:after, .orbitals:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(0.125rem, 50%, 0.75rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: rgb(var(--color-glaucous-lighter));
}
.orbitals:before {
  animation: orbit 1s linear infinite var(--ai-avatar-orbitals-animation-play-state, paused);
  opacity: 0.6;
  transform-origin: -220% 0;
  margin-right: -70%;
}
.orbitals:after {
  animation: orbit 2s linear infinite var(--ai-avatar-orbitals-animation-play-state, paused);
  opacity: 0.8;
  scale: 0.7;
  transform-origin: 0% -250%;
  margin-bottom: -70%;
}

@keyframes orbit {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotateZ(360deg) translate3d(0, 0, 0);
  }
}
@keyframes breathe {
  1%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.86);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
svg {
  position: absolute;
  margin: auto;
  mix-blend-mode: var(--ai-avatar-rings-blend-mode, screen);
  animation-iteration-count: infinite;
  animation-play-state: var(--ai-avatar-animation-play-state, paused);
}

.red {
  rotate: 20deg;
  color: var(--ai-avatar-color-one, rgb(var(--color-red-default)));
  animation-name: rotate, scale-circle-one;
  animation-duration: 5s;
}

.green {
  rotate: 36deg;
  color: var(--ai-avatar-color-two, rgb(var(--color-green-default)));
  animation-name: rotate, scale-circle-two;
  animation-duration: 5.5s;
}

.blue {
  rotate: 100deg;
  color: var(--ai-avatar-color-three, rgb(var(--color-blue-default)));
  animation-name: rotate, scale-circle-three;
  animation-duration: 4.5s;
}

.orange {
  rotate: 165deg;
  color: var(--ai-avatar-color-four, rgb(var(--color-orange-default)));
  animation-name: rotate, scale-circle-four;
  animation-duration: 6.5s;
}

@keyframes scale-circle-one {
  0%, 100% {
    transform: scaleX(1) scaleY(0.8);
  }
  25%, 75% {
    transform: scaleX(0.8) scaleY(0.9);
  }
  50% {
    transform: scaleX(1) scaleY(0.7);
  }
}
@keyframes scale-circle-two {
  0%, 100% {
    transform: scaleX(0.8) scaleY(1);
  }
  25%, 75% {
    transform: scaleX(0.9) scaleY(0.75);
  }
  50% {
    transform: scaleX(0.72) scaleY(1);
  }
}
@keyframes scale-circle-three {
  0%, 100% {
    transform: scaleX(0.9) scaleY(0.8);
  }
  50% {
    transform: scaleX(0.75) scaleY(0.9);
  }
}
@keyframes scale-circle-four {
  0%, 100% {
    transform: scaleX(0.8) scaleY(0.95);
  }
  25%, 75% {
    transform: scaleX(0.95) scaleY(0.75);
  }
  50% {
    transform: scaleX(0.75) scaleY(0.95);
  }
}