veilkit 0.1.0 → 0.3.0

package/dist/styles.css

@@ -177,6 +177,138 @@
   animation-delay: var(--veil-sync-delay, 0s);
 }
 
+.veil-skeleton[data-veil-anim="ripple"]::after {
+  width: 100%;
+  height: 100%;
+  animation: veil-ripple var(--veil-duration, 1.8s) ease-out infinite;
+  background: radial-gradient(circle, var(--veil-highlight, rgba(255, 255, 255, 0.7)) 10%, transparent 70%);
+}
+
+.veil-skeleton[data-veil-anim="ping-pong"]::after {
+  animation-name: veil-ping-pong;
+  animation-duration: var(--veil-duration, 2.4s);
+  animation-timing-function: ease-in-out;
+}
+
+.veil-skeleton[data-veil-anim="wipe"]::after {
+  width: 100%;
+  animation-name: veil-wipe;
+  animation-duration: var(--veil-duration, 1.8s);
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.veil-skeleton[data-veil-anim="cascade"]::after {
+  width: 100%;
+  animation-name: veil-cascade;
+  animation-duration: var(--veil-duration, 1.6s);
+}
+
+.veil-skeleton[data-veil-anim="spotlight"]::after {
+  width: 140%;
+  height: 140%;
+  animation-name: veil-spotlight;
+  animation-duration: var(--veil-duration, 2.5s);
+  background: radial-gradient(circle at center, var(--veil-highlight, rgba(255, 255, 255, 0.85)) 0%, transparent 60%);
+}
+
+.veil-skeleton[data-veil-anim="rainbow"]::after {
+  width: 250%;
+  animation-name: veil-rainbow;
+  animation-duration: var(--veil-duration, 3.5s);
+  background: linear-gradient(90deg, #f43f5e, #fbbf24, #10b981, #06b6d4, #8b5cf6, #f43f5e);
+  opacity: 0.25;
+}
+
+.veil-skeleton[data-veil-anim="heartbeat"] {
+  animation: veil-heartbeat var(--veil-duration, 1.4s) ease-in-out infinite;
+  animation-delay: var(--veil-sync-delay, 0s);
+}
+.veil-skeleton[data-veil-anim="heartbeat"]::after {
+  background: none;
+}
+
+.veil-skeleton[data-veil-anim="liquid"]::after {
+  width: 150%;
+  animation-name: veil-liquid;
+  animation-duration: var(--veil-duration, 2.2s);
+  background: radial-gradient(ellipse at center, var(--veil-highlight, rgba(255, 255, 255, 0.7)) 0%, transparent 70%);
+}
+
+.veil-skeleton[data-veil-anim="stripes"]::after {
+  width: 200%;
+  animation-name: veil-stripes;
+  animation-duration: var(--veil-duration, 1.5s);
+  animation-timing-function: linear;
+  background: repeating-linear-gradient(45deg, transparent, transparent 12px, var(--veil-highlight, rgba(255, 255, 255, 0.4)) 12px, var(--veil-highlight, rgba(255, 255, 255, 0.4)) 24px);
+}
+
+.veil-skeleton[data-veil-anim="halftone"] {
+  animation: veil-halftone var(--veil-duration, 1.8s) ease-in-out infinite;
+}
+.veil-skeleton[data-veil-anim="halftone"]::after {
+  background: radial-gradient(var(--veil-highlight, rgba(255, 255, 255, 0.5)) 15%, transparent 16%);
+  background-size: 8px 8px;
+}
+
+.veil-skeleton[data-veil-anim="border-glow"] {
+  animation: veil-border-glow var(--veil-duration, 1.6s) ease-in-out infinite;
+  box-shadow: 0 0 12px var(--veil-highlight, rgba(99, 102, 241, 0.5));
+}
+.veil-skeleton[data-veil-anim="border-glow"]::after {
+  background: none;
+}
+
+.veil-skeleton[data-veil-anim="typewriter"] {
+  animation: veil-typewriter var(--veil-duration, 1.5s) steps(20, end) infinite alternate;
+}
+.veil-skeleton[data-veil-anim="typewriter"]::after {
+  background: none;
+}
+
+.veil-skeleton[data-veil-anim="glitch"] {
+  animation: veil-glitch var(--veil-duration, 2s) steps(4, jump-none) infinite;
+}
+.veil-skeleton[data-veil-anim="glitch"]::after {
+  background: linear-gradient(90deg, transparent, var(--veil-highlight, rgba(255, 255, 255, 0.6)), transparent);
+}
+
+.veil-skeleton[data-veil-anim="pixelate"] {
+  animation: veil-pixelate var(--veil-duration, 1.4s) steps(5, start) infinite;
+}
+.veil-skeleton[data-veil-anim="pixelate"]::after {
+  background: none;
+}
+
+.veil-skeleton[data-veil-anim="tilt"] {
+  animation: veil-tilt var(--veil-duration, 2.5s) ease-in-out infinite;
+  transform-style: preserve-3d;
+}
+.veil-skeleton[data-veil-anim="tilt"]::after {
+  animation-name: veil-shimmer-ltr;
+}
+
+.veil-skeleton[data-veil-anim="diagonal-sweep"]::after {
+  width: 200%;
+  height: 200%;
+  animation-name: veil-diagonal-sweep;
+  animation-duration: var(--veil-duration, 2s);
+  background: linear-gradient(90deg, transparent 20%, var(--veil-highlight, rgba(255, 255, 255, 0.65)) 50%, transparent 80%);
+}
+
+.veil-skeleton[data-veil-anim="bounce-in"] {
+  animation: veil-bounce-in var(--veil-duration, 1.6s) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
+}
+.veil-skeleton[data-veil-anim="bounce-in"]::after {
+  background: none;
+}
+
+.veil-skeleton[data-veil-anim="fade-slide"] {
+  animation: veil-fade-slide var(--veil-duration, 1.6s) ease-in-out infinite;
+}
+.veil-skeleton[data-veil-anim="fade-slide"]::after {
+  background: none;
+}
+
 .veil-skeleton[data-veil-anim="none"]::after {
   display: none !important;
 }
@@ -374,4 +506,4 @@
   filter: blur(0px);
 }
 
-@keyframes veil-shimmer-ltr{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@keyframes veil-shimmer-rtl{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}@keyframes veil-shimmer-ttb{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}@keyframes veil-shimmer-btt{0%{transform:translateY(100%)}100%{transform:translateY(-100%)}}@keyframes veil-wave{0%{transform:translateX(-120%) scaleX(0.8);opacity:0.3}50%{opacity:0.95}100%{transform:translateX(120%) scaleX(1.2);opacity:0.3}}@keyframes veil-pulse{0%,100%{opacity:1}50%{opacity:0.38}}@keyframes veil-blink{0%,49%{opacity:1}50%,99%{opacity:0.2}100%{opacity:1}}@keyframes veil-breathe{0%,100%{opacity:0.65;transform:scale(0.995)}50%{opacity:1;transform:scale(1.005)}}@keyframes veil-glass-shine{0%{transform:translate3d(-150%,-150%,0) rotate(35deg);opacity:0.1}40%,60%{opacity:0.85}100%{transform:translate3d(200%,200%,0) rotate(35deg);opacity:0.1}}@keyframes veil-gradient-flow{0%{transform:translateX(-66.6%)}100%{transform:translateX(0%)}}@keyframes veil-aurora{0%{transform:translate3d(-20%,-15%,0) rotate(0deg) scale(1);opacity:0.5}50%{transform:translate3d(25%,20%,0) rotate(180deg) scale(1.25);opacity:0.85}100%{transform:translate3d(-20%,-15%,0) rotate(360deg) scale(1);opacity:0.5}}@keyframes veil-scan-line{0%{transform:translateY(-100%);opacity:0.2}50%{opacity:1}100%{transform:translateY(300%);opacity:0.2}}@keyframes veil-sparkle{0%,100%{opacity:0.2;transform:scale(0.98)}25%{opacity:0.8;transform:scale(1.02)}50%{opacity:0.3;transform:scale(0.99)}75%{opacity:0.95;transform:scale(1.01)}}@keyframes veil-neon-glow{0%,100%{opacity:0.45;transform:scale(0.998)}50%{opacity:1;transform:scale(1.002)}}[data-veil-anim="stagger"]>*{animation-delay:calc(var(--veil-stagger-idx,0)*120ms)!important}
+@keyframes veil-shimmer-ltr{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@keyframes veil-shimmer-rtl{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}@keyframes veil-shimmer-ttb{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}@keyframes veil-shimmer-btt{0%{transform:translateY(100%)}100%{transform:translateY(-100%)}}@keyframes veil-wave{0%{transform:translateX(-120%) scaleX(0.8);opacity:0.3}50%{opacity:0.95}100%{transform:translateX(120%) scaleX(1.2);opacity:0.3}}@keyframes veil-pulse{0%,100%{opacity:1}50%{opacity:0.38}}@keyframes veil-blink{0%,49%{opacity:1}50%,99%{opacity:0.2}100%{opacity:1}}@keyframes veil-breathe{0%,100%{opacity:0.65;transform:scale(0.995)}50%{opacity:1;transform:scale(1.005)}}@keyframes veil-glass-shine{0%{transform:translate3d(-150%,-150%,0) rotate(35deg);opacity:0.1}40%,60%{opacity:0.85}100%{transform:translate3d(200%,200%,0) rotate(35deg);opacity:0.1}}@keyframes veil-gradient-flow{0%{transform:translateX(-66.6%)}100%{transform:translateX(0%)}}@keyframes veil-aurora{0%{transform:translate3d(-20%,-15%,0) rotate(0deg) scale(1);opacity:0.5}50%{transform:translate3d(25%,20%,0) rotate(180deg) scale(1.25);opacity:0.85}100%{transform:translate3d(-20%,-15%,0) rotate(360deg) scale(1);opacity:0.5}}@keyframes veil-scan-line{0%{transform:translateY(-100%);opacity:0.2}50%{opacity:1}100%{transform:translateY(300%);opacity:0.2}}@keyframes veil-sparkle{0%,100%{opacity:0.2;transform:scale(0.98)}25%{opacity:0.8;transform:scale(1.02)}50%{opacity:0.3;transform:scale(0.99)}75%{opacity:0.95;transform:scale(1.01)}}@keyframes veil-neon-glow{0%,100%{opacity:0.45;transform:scale(0.998)}50%{opacity:1;transform:scale(1.002)}}@keyframes veil-ripple{0%{transform:scale(0.2);opacity:0.9}100%{transform:scale(2.4);opacity:0}}@keyframes veil-ping-pong{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}@keyframes veil-wipe{0%{transform:translateX(-100%) scaleX(0.2);opacity:0.2}50%{transform:translateX(0%) scaleX(1);opacity:0.9}100%{transform:translateX(100%) scaleX(0.2);opacity:0.2}}@keyframes veil-cascade{0%{transform:translateY(-100%);opacity:0.3}50%{opacity:0.95}100%{transform:translateY(100%);opacity:0.3}}@keyframes veil-spotlight{0%{transform:translate3d(-100%,-50%,0);opacity:0.15}50%{transform:translate3d(50%,0%,0);opacity:0.85}100%{transform:translate3d(200%,50%,0);opacity:0.15}}@keyframes veil-rainbow{0%{filter:hue-rotate(0deg);transform:translateX(-50%)}100%{filter:hue-rotate(360deg);transform:translateX(0%)}}@keyframes veil-heartbeat{0%,100%{transform:scale(1);opacity:0.7}14%{transform:scale(1.025);opacity:1}28%{transform:scale(1);opacity:0.75}42%{transform:scale(1.035);opacity:1}70%{transform:scale(1);opacity:0.7}}@keyframes veil-liquid{0%,100%{transform:translateX(-100%) scaleY(0.9) skewX(-8deg);opacity:0.4}50%{transform:translateX(100%) scaleY(1.1) skewX(8deg);opacity:0.9}}@keyframes veil-stripes{0%{transform:translateX(-48px)}100%{transform:translateX(0px)}}@keyframes veil-halftone{0%,100%{opacity:0.35;transform:scale(0.995)}50%{opacity:0.95;transform:scale(1.005)}}@keyframes veil-border-glow{0%,100%{opacity:0.5;transform:scale(0.998)}50%{opacity:1;transform:scale(1.002)}}@keyframes veil-typewriter{0%{transform:scaleX(0.1);transform-origin:left;opacity:0.4}100%{transform:scaleX(1);transform-origin:left;opacity:1}}@keyframes veil-glitch{0%,100%{transform:translate(0);opacity:0.8}20%{transform:translate(-2px,1px);opacity:0.95}40%{transform:translate(2px,-1px);opacity:0.85}60%{transform:translate(-1px,-1px);opacity:1}80%{transform:translate(1px,2px);opacity:0.9}}@keyframes veil-pixelate{0%,100%{opacity:0.3;transform:scale(0.99)}25%{opacity:0.75;transform:scale(1)}50%{opacity:0.45;transform:scale(0.995)}75%{opacity:0.9;transform:scale(1.005)}}@keyframes veil-tilt{0%,100%{transform:perspective(600px) rotateX(0deg) rotateY(0deg);opacity:0.7}50%{transform:perspective(600px) rotateX(4deg) rotateY(-4deg);opacity:1}}@keyframes veil-diagonal-sweep{0%{transform:translate3d(-100%,-100%,0) rotate(-45deg)}100%{transform:translate3d(150%,150%,0) rotate(-45deg)}}@keyframes veil-bounce-in{0%,100%{transform:scale(0.985);opacity:0.6}50%{transform:scale(1.015);opacity:1}}@keyframes veil-fade-slide{0%,100%{transform:translateY(3px);opacity:0.5}50%{transform:translateY(-3px);opacity:1}}[data-veil-anim="stagger"]>*{animation-delay:calc(var(--veil-stagger-idx,0)*120ms)!important}