@gfazioli/mantine-text-animate/dist/styles.css

The TextAnimate component allows you to animate text with various effects.

.me_3a41d93f{--text-animate-gradient-speed:3s;--text-animate-gradient-direction:90deg;--text-animate-gradient-end-x:200%;--text-animate-gradient-end-y:0%;-webkit-text-fill-color:transparent;background-clip:text;-webkit-background-clip:text;background-size:200% 200%;display:inline-block}.me_3a41d93f[data-text-animate-gradient-animate=true]{animation:me_99509bc2 var(--text-animate-gradient-speed) linear infinite}@media (prefers-reduced-motion:reduce){.me_3a41d93f[data-text-animate-gradient-animate=true]{animation:none!important}}@keyframes me_99509bc2{0%{background-position:0 0}to{background-position:var(--text-animate-gradient-end-x) var(--text-animate-gradient-end-y)}}.me_6050b27b{--text-animate-highlight-color:#ffeb3b;--text-animate-highlight-speed:1s;--text-animate-highlight-height:40%;--text-animate-highlight-offset:60%;background-position:0 var(--text-animate-highlight-offset);background-repeat:no-repeat;background-size:0 var(--text-animate-highlight-height);display:inline}.me_6050b27b[data-text-animate-highlight-animate=true]{animation:me_101c7d5a var(--text-animate-highlight-speed) ease forwards}@media (prefers-reduced-motion:reduce){.me_6050b27b[data-text-animate-highlight-animate=true]{animation:none!important;background-size:100% var(--text-animate-highlight-height)}}@keyframes me_101c7d5a{0%{background-size:0 var(--text-animate-highlight-height)}to{background-size:100% var(--text-animate-highlight-height)}}.me_5f180d5{--text-animate-morphing-speed:1s;display:inline-block;font-family:monospace;position:relative;white-space:pre}.me_76d0bb16{position:absolute;top:0;transition:all var(--text-animate-morphing-speed) ease}.me_76d0bb16[data-morph-state=entering]{animation:me_a29f1e80 var(--text-animate-morphing-speed) ease forwards}.me_76d0bb16[data-morph-state=exiting]{animation:me_811e0c76 var(--text-animate-morphing-speed) ease forwards}@media (prefers-reduced-motion:reduce){.me_76d0bb16{animation:none!important;transition:none!important}}@keyframes me_a29f1e80{0%{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:translateY(0)}}@keyframes me_811e0c76{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.5em)}}.me_de58e29c{animation-delay:var(--number-ticker-animation-delay,0s);animation-duration:var(--number-ticker-animation-duration,1s);display:inline-block;font-variant-numeric:tabular-nums;letter-spacing:.05em;transition-duration:.2s;transition-property:color,background-color,border-color;transition-timing-function:ease}.me_2703a4ea{--text-animate-rotating-speed:0.5s;align-items:center;display:inline-flex;height:1lh;overflow:hidden;position:relative;vertical-align:bottom}.me_27046935,.me_806be0fc{display:inline-block}.me_806be0fc{left:0;position:absolute}.me_8e07e212{display:inline-block}.me_806be0fc[data-rotating-text-animation=slideUp]{animation:me_665be324 var(--text-animate-rotating-speed) ease-in forwards}.me_8e07e212[data-rotating-text-animation=slideUp]{animation:me_d9aa3959 var(--text-animate-rotating-speed) ease-out forwards}.me_806be0fc[data-rotating-text-animation=slideDown]{animation:me_3ee7faeb var(--text-animate-rotating-speed) ease-in forwards}.me_8e07e212[data-rotating-text-animation=slideDown]{animation:me_17f997e0 var(--text-animate-rotating-speed) ease-out forwards}.me_806be0fc[data-rotating-text-animation=fade]{animation:me_3ee8acc5 var(--text-animate-rotating-speed) ease-in forwards}.me_8e07e212[data-rotating-text-animation=fade]{animation:me_17fa49ba var(--text-animate-rotating-speed) ease-out forwards}.me_806be0fc[data-rotating-text-animation=blur]{animation:me_3ee706b0 var(--text-animate-rotating-speed) ease-in forwards}.me_8e07e212[data-rotating-text-animation=blur]{animation:me_17f8a3a5 var(--text-animate-rotating-speed) ease-out forwards}.me_806be0fc[data-rotating-text-animation=blurUp]{animation:me_6c3f2d8 var(--text-animate-rotating-speed) ease-in forwards}.me_8e07e212[data-rotating-text-animation=blurUp]{animation:me_8f6c35c3 var(--text-animate-rotating-speed) ease-out forwards}.me_806be0fc[data-rotating-text-animation=blurDown]{animation:me_658aed9f var(--text-animate-rotating-speed) ease-in forwards}.me_8e07e212[data-rotating-text-animation=blurDown]{animation:me_652e21ca var(--text-animate-rotating-speed) ease-out forwards}@keyframes me_d9aa3959{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes me_665be324{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}@keyframes me_17f997e0{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes me_3ee7faeb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}@keyframes me_17fa49ba{0%{opacity:0}to{opacity:1}}@keyframes me_3ee8acc5{0%{opacity:1}to{opacity:0}}@keyframes me_17f8a3a5{0%{filter:blur(8px);opacity:0}to{filter:blur(0);opacity:1}}@keyframes me_3ee706b0{0%{filter:blur(0);opacity:1}to{filter:blur(8px);opacity:0}}@keyframes me_8f6c35c3{0%{filter:blur(8px);opacity:0;transform:translateY(100%)}to{filter:blur(0);opacity:1;transform:translateY(0)}}@keyframes me_6c3f2d8{0%{filter:blur(0);opacity:1;transform:translateY(0)}to{filter:blur(8px);opacity:0;transform:translateY(-100%)}}@keyframes me_652e21ca{0%{filter:blur(8px);opacity:0;transform:translateY(-100%)}to{filter:blur(0);opacity:1;transform:translateY(0)}}@keyframes me_658aed9f{0%{filter:blur(0);opacity:1;transform:translateY(0)}to{filter:blur(8px);opacity:0;transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.me_806be0fc,.me_8e07e212{animation:none}.me_806be0fc{display:none}}.me_50fcac36{--text-animate-spinner-radius-xs:32px;--text-animate-spinner-radius-sm:64px;--text-animate-spinner-radius-md:80px;--text-animate-spinner-radius-lg:150px;--text-animate-spinner-radius-xl:250px;--text-animate-spinner-radius:var(--text-animate-spinner-radius-md);--text-animate-spinner-speed:10s;--text-animate-spinner-char-offset:0deg;height:calc(var(--text-animate-spinner-radius)*2);position:relative;width:calc(var(--text-animate-spinner-radius)*2)}.me_50fcac36,.me_ead415ad{align-items:center;display:flex;justify-content:center}.me_ead415ad{border-radius:50%;height:100%;position:absolute;transform-origin:center center;width:100%}.me_ead415ad[data-text-animate-spinner-animate=true][data-text-animate-spinner-direction=clockwise]{animation:me_346bd83b var(--text-animate-spinner-speed) linear infinite}.me_ead415ad[data-text-animate-spinner-animate=true][data-text-animate-spinner-direction=counterclockwise]{animation:me_29dc3c8d var(--text-animate-spinner-speed) linear infinite}.me_50f5beaa{height:var(--text-animate-spinner-radius);left:50%;margin-left:-10px;position:absolute;text-align:center;top:0;transform-origin:center bottom;width:20px}@media (prefers-reduced-motion:reduce){.me_ead415ad{animation:none!important}}@keyframes me_346bd83b{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes me_29dc3c8d{0%{transform:rotate(0deg)}to{transform:rotate(-1turn)}}.me_4101b260{--text-animate-split-flap-bg:#1a1a2e;--text-animate-split-flap-color:#e0e0e0;--text-animate-split-flap-gap:4px;--text-animate-split-flap-flip-duration:300ms;--text-animate-split-flap-char-width:1.2em;--text-animate-split-flap-char-height:1.8em;--text-animate-split-flap-radius:4px;--text-animate-split-flap-divider-color:rgba(0,0,0,.3);display:inline-flex;font-family:monospace;font-weight:700;gap:var(--text-animate-split-flap-gap)}.me_3068c86b{font-size:inherit;perspective:200px;position:relative;width:var(--text-animate-split-flap-char-width)}.me_2f1b7de2,.me_3068c86b{height:var(--text-animate-split-flap-char-height)}.me_2f1b7de2{align-items:center;display:flex;justify-content:center;width:100%}.me_63c58f62,.me_6c94f4fe,.me_a8735c1f,.me_be4063e1{background:var(--text-animate-split-flap-bg);box-sizing:border-box;color:var(--text-animate-split-flap-color);height:50%;left:0;overflow:hidden;position:absolute;right:0}.me_63c58f62,.me_be4063e1{border-bottom:1px solid var(--text-animate-split-flap-divider-color);border-radius:var(--text-animate-split-flap-radius) var(--text-animate-split-flap-radius) 0 0;top:0}.me_6c94f4fe,.me_a8735c1f{border-radius:0 0 var(--text-animate-split-flap-radius) var(--text-animate-split-flap-radius);bottom:0}.me_6c94f4fe .me_2f1b7de2,.me_a8735c1f .me_2f1b7de2{margin-top:calc(var(--text-animate-split-flap-char-height)*-.5)}.me_63c58f62{animation:me_22817a73 calc(var(--text-animate-split-flap-flip-duration)*.5) ease-in forwards;transform-origin:bottom center;z-index:2}.me_63c58f62,.me_6c94f4fe{backface-visibility:hidden}.me_6c94f4fe{animation:me_5ad4e44d calc(var(--text-animate-split-flap-flip-duration)*.5) ease-out forwards;animation-delay:calc(var(--text-animate-split-flap-flip-duration)*.5);transform:rotateX(90deg);transform-origin:top center;z-index:1}@media (prefers-reduced-motion:reduce){.me_63c58f62,.me_6c94f4fe{animation:none!important}}@keyframes me_22817a73{0%{transform:rotateX(0deg)}to{transform:rotateX(-90deg)}}@keyframes me_5ad4e44d{0%{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}.me_d5359a38{animation-delay:var(--text-ticker-animation-delay,0s);animation-duration:var(--text-ticker-animation-duration,1s);display:inline-block;font-family:monospace;transition-duration:.2s;transition-property:color,background-color,border-color;transition-timing-function:ease;white-space:pre}.me_a5670e62{align-items:baseline;display:inline-flex;flex-wrap:nowrap;min-height:1.5em;position:relative}.me_a5670e62[data-text-animate-typewriter-multiline=true]{width:100%}.me_ce9a40d6{display:inline-block;font-weight:400;margin-left:1px}.me_ce9a40d6[data-text-animate-typewriter-with-blink=true]{animation:me_37fcf852 .75s step-end infinite}@media (prefers-reduced-motion:reduce){.me_ce9a40d6{animation:none!important}}@keyframes me_37fcf852{0%,to{opacity:1}50%{opacity:0}}.me_3013963b{--text-animate-translation-distance:20px;--text-animate-blur-amount:10px;--text-animate-scale-amount:0.8}.me_dabadf3a{animation-timing-function:cubic-bezier(.16,1,.3,1);display:inline-block;white-space:pre}.me_dabadf3a[data-text-animate=in]{opacity:0}.me_dabadf3a[data-text-animate=out]{opacity:1}.me_dabadf3a[data-animating=true]{will-change:opacity,transform,filter}.me_dabadf3a[data-text-animate-animation=fade]{animation-name:me_300debd5}.me_dabadf3a[data-text-animate-animation=blur]{animation-name:me_300c45c0}.me_dabadf3a[data-text-animate-animation=scale]{animation-name:me_d2679f11}.me_dabadf3a[data-text-animate-animation=slideUp]{animation-name:me_f1d69110}.me_dabadf3a[data-text-animate-animation=slideDown]{animation-name:me_d66eddd7}.me_dabadf3a[data-text-animate-animation=slideUpElastic]{animation-name:me_a23f1718;animation-timing-function:ease-out}.me_dabadf3a[data-text-animate-animation=slideDownElastic]{animation-name:me_fdacdf;animation-timing-function:ease-out}.me_dabadf3a[data-text-animate-animation=slideLeft]{animation-name:me_d672593c}.me_dabadf3a[data-text-animate-animation=slideRight]{animation-name:me_f82f2f87}.me_dabadf3a[data-text-animate-animation=slideLeftElastic]{animation-name:me_ae55f344;animation-timing-function:ease-out}.me_dabadf3a[data-text-animate-animation=slideRightElastic]{animation-name:me_f8e94e8f;animation-timing-function:ease-out}.me_dabadf3a[data-text-animate-animation=blurUp]{animation-name:me_642999c8}.me_dabadf3a[data-text-animate-animation=blurDown]{animation-name:me_22988f}@keyframes me_300debd5{0%{opacity:0}to{opacity:1}}@keyframes me_300c45c0{0%{filter:blur(var(--text-animate-blur-amount));opacity:0}to{filter:blur(0);opacity:1}}@keyframes me_d2679f11{0%{opacity:0;transform:scale(var(--text-animate-scale-amount))}to{opacity:1;transform:scale(1)}}@keyframes me_f1d69110{0%{opacity:0;transform:translateY(var(--text-animate-translation-distance))}to{opacity:1;transform:translateY(0)}}@keyframes me_d66eddd7{0%{opacity:0;transform:translateY(calc(var(--text-animate-translation-distance)*-1))}to{opacity:1;transform:translateY(0)}}@keyframes me_a23f1718{0%{opacity:0;transform:translateY(var(--text-animate-translation-distance))}20%{opacity:.5;transform:translateY(calc(var(--text-animate-translation-distance)*-.8))}40%{opacity:.7;transform:translateY(calc(var(--text-animate-translation-distance)*.4))}60%{opacity:.9;transform:translateY(calc(var(--text-animate-translation-distance)*-.2))}80%{opacity:1;transform:translateY(calc(var(--text-animate-translation-distance)*.1))}to{opacity:1;transform:translateY(0)}}@keyframes me_fdacdf{0%{opacity:0;transform:translateY(calc(var(--text-animate-translation-distance)*-1))}20%{opacity:.5;transform:translateY(calc(var(--text-animate-translation-distance)*.8))}40%{opacity:.7;transform:translateY(calc(var(--text-animate-translation-distance)*-.4))}60%{opacity:.9;transform:translateY(calc(var(--text-animate-translation-distance)*.2))}80%{opacity:1;transform:translateY(calc(var(--text-animate-translation-distance)*-.1))}to{opacity:1;transform:translateY(0)}}@keyframes me_d672593c{0%{opacity:0;transform:translateX(var(--text-animate-translation-distance))}to{opacity:1;transform:translateX(0)}}@keyframes me_f82f2f87{0%{opacity:0;transform:translateX(calc(var(--text-animate-translation-distance)*-1))}to{opacity:1;transform:translateX(0)}}@keyframes me_ae55f344{0%{opacity:0;transform:translateX(var(--text-animate-translation-distance))}20%{opacity:.5;transform:translateX(calc(var(--text-animate-translation-distance)*-.8))}40%{opacity:.7;transform:translateX(calc(var(--text-animate-translation-distance)*.4))}60%{opacity:.9;transform:translateX(calc(var(--text-animate-translation-distance)*-.2))}80%{opacity:1;transform:translateX(calc(var(--text-animate-translation-distance)*.1))}to{opacity:1;transform:translateX(0)}}@keyframes me_f8e94e8f{0%{opacity:0;transform:translateX(calc(var(--text-animate-translation-distance)*-1))}20%{opacity:.5;transform:translateX(calc(var(--text-animate-translation-distance)*.8))}40%{opacity:.7;transform:translateX(calc(var(--text-animate-translation-distance)*-.4))}60%{opacity:.9;transform:translateX(calc(var(--text-animate-translation-distance)*.2))}80%{opacity:1;transform:translateX(calc(var(--text-animate-translation-distance)*-.1))}to{opacity:1;transform:translateX(0)}}@keyframes me_642999c8{0%{filter:blur(var(--text-animate-blur-amount));opacity:0;transform:translateY(var(--text-animate-translation-distance))}to{filter:blur(0);opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.me_dabadf3a{animation:none!important;filter:none!important;opacity:1!important;transform:none!important}}@keyframes me_22988f{0%{filter:blur(var(--text-animate-blur-amount));opacity:0;transform:translateY(calc(var(--text-animate-translation-distance)*-1))}to{filter:blur(0);opacity:1;transform:translateY(0)}}