Build BeautifulFrontend Interfaces

/* Pulse Glow */
.roycss-pulse-glow {
  animation: roy-pulse-glow 2s ease-in-out infinite;
}

@keyframes roy-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px color-mix(in oklch, oklch(0.696 0.149 162.48) 30%, transparent),
                0 0 10px color-mix(in oklch, oklch(0.696 0.149 162.48) 10%, transparent);
  }
  50% {
    box-shadow: 0 0 20px color-mix(in oklch, oklch(0.696 0.149 162.48) 60%, transparent),
                0 0 40px color-mix(in oklch, oklch(0.696 0.149 162.48) 30%, transparent),
                0 0 60px color-mix(in oklch, oklch(0.696 0.149 162.48) 10%, transparent);
  }
}

/* Bounce In */
.roycss-bounce-in {
  animation: roy-bounce-in 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

@keyframes roy-bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Fade In Up */
.roycss-fade-in-up {
  animation: roy-fade-in-up 0.6s ease-out both;
}

@keyframes roy-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Rotate Spin */
.roycss-rotate-spin {
  animation: roy-rotate-spin 2s linear infinite;
}

@keyframes roy-rotate-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Shake */
.roycss-shake {
  animation: roy-shake 0.5s ease-in-out;
}

@keyframes roy-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Float */
.roycss-float {
  animation: roy-float 3s ease-in-out infinite;
}

@keyframes roy-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Jello */
.roycss-jello {
  animation: roy-jello 0.9s ease both;
}

@keyframes roy-jello {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

/* Heartbeat */
.roycss-heartbeat {
  animation: roy-heartbeat 1.5s ease-in-out infinite;
}

@keyframes roy-heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.15); }
  28% { transform: scale(1); }
  42% { transform: scale(1.15); }
  70% { transform: scale(1); }
}

/* Wobble */
.roycss-wobble {
  animation: roy-wobble 1s ease-in-out infinite;
}

@keyframes roy-wobble {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-10px) rotate(-5deg); }
  30% { transform: translateX(10px) rotate(5deg); }
  45% { transform: translateX(-8px) rotate(-3deg); }
  60% { transform: translateX(8px) rotate(3deg); }
  75% { transform: translateX(-5px) rotate(-2deg); }
}

/* Tada */
.roycss-tada {
  animation: roy-tada 1s ease infinite;
}

@keyframes roy-tada {
  0%, 100% { transform: scale(1) rotate(0); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

/* Swing */
.roycss-swing {
  transform-origin: top center;
  animation: roy-swing 1.2s ease-in-out infinite;
}

@keyframes roy-swing {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
}

/* Head Shake */
.roycss-head-shake {
  animation: roy-head-shake 1s ease-in-out;
}

@keyframes roy-head-shake {
  0%, 100% { transform: translateX(0); }
  6.5% { transform: translateX(-6px) rotateY(-9deg); }
  18.5% { transform: translateX(5px) rotateY(7deg); }
  31.5% { transform: translateX(-3px) rotateY(-5deg); }
  43.5% { transform: translateX(2px) rotateY(3deg); }
  50% { transform: translateX(0); }
}

/* Rubber Band */
.roycss-rubber-band {
  animation: roy-rubber-band 1s ease infinite;
}

@keyframes roy-rubber-band {
  0%, 100% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
}

/* Slide In Left */
.roycss-slide-in-left {
  animation: roy-slide-in-left 0.7s ease-out both;
}

@keyframes roy-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide In Right */
.roycss-slide-in-right {
  animation: roy-slide-in-right 0.7s ease-out both;
}

@keyframes roy-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Zoom In */
.roycss-zoom-in {
  animation: roy-zoom-in 0.6s ease-out both;
}

@keyframes roy-zoom-in {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Flip In X */
.roycss-flip-in-x {
  backface-visibility: visible;
  animation: roy-flip-in-x 0.9s ease-in both;
}

@keyframes roy-flip-in-x {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

/* Flip In Y */
.roycss-flip-in-y {
  backface-visibility: visible;
  animation: roy-flip-in-y 0.9s ease-in both;
}

@keyframes roy-flip-in-y {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
  }
  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

/* Light Speed In */
.roycss-light-speed-in {
  animation: roy-light-speed-in 0.9s ease-out both;
}

@keyframes roy-light-speed-in {
  from {
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    transform: skewX(-5deg);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* Roll In */
.roycss-roll-in {
  animation: roy-roll-in 0.9s ease-out both;
}

@keyframes roy-roll-in {
  from {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

/* Jack In The Box */
.roycss-jack-in-box {
  animation: roy-jack-in-box 1s ease both;
}

@keyframes roy-jack-in-box {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }
  50% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Bounce Out */
.roycss-bounce-out {
  animation: roy-bounce-out 1s ease-in both;
}

@keyframes roy-bounce-out {
  0% { transform: scale(1); opacity: 1; }
  20% { transform: scale(0.9); }
  40%, 55% { transform: scale(1.1); opacity: 1; }
  80%, 100% { transform: scale(0.3); opacity: 0; }
}

/* Fade Out Down */
.roycss-fade-out-down {
  animation: roy-fade-out-down 0.7s ease-in both;
}

@keyframes roy-fade-out-down {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(40px);
  }
}

/* Rotate Out */
.roycss-rotate-out {
  transform-origin: center;
  animation: roy-rotate-out 0.8s ease-in both;
}

@keyframes roy-rotate-out {
  from {
    opacity: 1;
    transform: rotate(0);
  }
  to {
    opacity: 0;
    transform: rotate(200deg);
  }
}