@gfazioli/mantine-border-animate 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.layer.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Mantine Border Animate Component
|
|
2
2
|
|
|
3
|
-
<img width="2752" height="1536" alt="
|
|
3
|
+
<img width="2752" height="1536" alt="mantine Border Animate" src="https://github.com/user-attachments/assets/b174d04c-c9cf-462a-b074-a23f4a521c9a" />
|
|
4
4
|
|
|
5
5
|
<div align="center">
|
|
6
6
|
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes me_e9d4de44{0%{offset-distance:0}to{offset-distance:100%}}@keyframes me_e9d74022{0%,to{filter:blur(var(--border-animate-blur));opacity:0}50%{filter:blur(calc(var(--border-animate-blur)*5));opacity:var(--border-animate-opacity)}}@keyframes me_5193a3a4{0%,to{opacity:var(--border-animate-opacity,1);transform:scale(1)}50%{opacity:0;transform:scale(1.02)}}@keyframes me_d2bd6f45{0%{--border-animate-angle:0deg}to{--border-animate-angle:360deg}}.me_4c17b6ba{border-radius:calc(var(--border-animate-radius));display:flex;position:relative}.me_89b89404{--border-animate-size-xs:64px;--border-animate-size-sm:128px;--border-animate-size-md:256px;--border-animate-size-lg:320px;--border-animate-size-xl:480px;--border-animate-width-xs:1px;--border-animate-width-sm:2px;--border-animate-width-md:4px;--border-animate-width-lg:6px;--border-animate-width-xl:8px;--border-animate-blur-xs:2px;--border-animate-blur-sm:4px;--border-animate-blur-md:8px;--border-animate-blur-lg:16px;--border-animate-blur-xl:32px;--border-animate-size:var(--border-animate-size-md);--border-animate-width:var(--border-animate-width-xs);border:calc(var(--border-animate-width)) solid transparent;border-radius:inherit;inset:0;opacity:var(--border-animate-opacity,1);pointer-events:none;position:absolute;z-index:var(--border-animate-z-index,1)}.me_89b89404[data-variant=glow]{z-index:-1}.me_89b89404[data-with-mask=true]:not([data-variant=glow]){mask:linear-gradient(#fff 0 0)
|
|
1
|
+
@keyframes me_e9d4de44{0%{offset-distance:0}to{offset-distance:100%}}@keyframes me_e9d74022{0%,to{filter:blur(var(--border-animate-blur));opacity:0}50%{filter:blur(calc(var(--border-animate-blur)*5));opacity:var(--border-animate-opacity)}}@keyframes me_5193a3a4{0%,to{opacity:var(--border-animate-opacity,1);transform:scale(1)}50%{opacity:0;transform:scale(1.02)}}@keyframes me_d2bd6f45{0%{--border-animate-angle:0deg}to{--border-animate-angle:360deg}}.me_4c17b6ba{border-radius:calc(var(--border-animate-radius));display:flex;position:relative}.me_89b89404{--border-animate-size-xs:64px;--border-animate-size-sm:128px;--border-animate-size-md:256px;--border-animate-size-lg:320px;--border-animate-size-xl:480px;--border-animate-width-xs:1px;--border-animate-width-sm:2px;--border-animate-width-md:4px;--border-animate-width-lg:6px;--border-animate-width-xl:8px;--border-animate-blur-xs:2px;--border-animate-blur-sm:4px;--border-animate-blur-md:8px;--border-animate-blur-lg:16px;--border-animate-blur-xl:32px;--border-animate-size:var(--border-animate-size-md);--border-animate-width:var(--border-animate-width-xs);border:calc(var(--border-animate-width)) solid transparent;border-radius:inherit;inset:0;opacity:var(--border-animate-opacity,1);pointer-events:none;position:absolute;z-index:var(--border-animate-z-index,1)}.me_89b89404[data-variant=glow]{z-index:-1}.me_89b89404[data-with-mask=true]:not([data-variant=glow]){mask-clip:content-box,border-box;mask-composite:exclude;mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0)}@supports not (mask-composite:exclude){.me_89b89404[data-with-mask=true]:not([data-variant=glow]){-webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0)}}.me_89b89404[data-animate=false][data-variant=beam]:after{offset-distance:calc(var(--border-animate-static-angle)/360*100%)}.me_89b89404[data-animate=false][data-variant=gradient]:after{--border-animate-angle:calc(var(--border-animate-static-angle)*1deg)}.me_89b89404[data-animate=false],.me_89b89404[data-animate=false]:after{animation:none!important}.me_89b89404[data-variant=beam]:after{animation:me_e9d4de44 var(--border-animate-duration,5s) linear infinite var(--border-animate-direction,normal);animation-delay:var(--border-animate-delay,0s);aspect-ratio:1;background:radial-gradient(ellipse at center,var(--border-animate-color-from) 0,var(--border-animate-color-to) 40%,transparent 70%);content:"";filter:blur(var(--border-animate-blur));offset-anchor:50% 50%;offset-path:rect(calc(var(--border-animate-anchor, 0)*1px) calc(100% - var(--border-animate-anchor, 0)*1px) calc(100% - var(--border-animate-anchor, 0)*1px) calc(var(--border-animate-anchor, 0)*1px) round calc(var(--border-animate-radius)));position:absolute;width:calc(var(--border-animate-size))}@property --border-animate-angle{syntax:"<angle>";initial-value:0deg;inherits:false}.me_89b89404[data-variant=gradient]:after{animation:me_d2bd6f45 var(--border-animate-duration,3s) linear infinite var(--border-animate-direction,normal);animation-delay:var(--border-animate-delay,0s);background:conic-gradient(from var(--border-animate-angle,0deg),var(--border-animate-color-from),var(--border-animate-color-to),var(--border-animate-color-from))}.me_89b89404[data-variant=glow]:after,.me_89b89404[data-variant=gradient]:after{border-radius:inherit;content:"";filter:blur(var(--border-animate-blur));inset:-1px;position:absolute}.me_89b89404[data-variant=glow]:after{animation:me_e9d74022 var(--border-animate-duration,2s) ease-in-out infinite var(--border-animate-direction,normal);animation-delay:var(--border-animate-delay,0s);background:linear-gradient(90deg,var(--border-animate-color-from),var(--border-animate-color-to),var(--border-animate-color-from))}.me_89b89404[data-variant=pulse]:after{animation:me_5193a3a4 var(--border-animate-duration,2s) ease-in-out infinite var(--border-animate-direction,normal);animation-delay:var(--border-animate-delay,0s);background:linear-gradient(90deg,var(--border-animate-color-from),var(--border-animate-color-to));border-radius:inherit;content:"";filter:blur(var(--border-animate-blur));inset:-1px;position:absolute;transform-origin:center}.me_89b89404[data-animate=false][data-variant=glow]:after{background:linear-gradient(calc(var(--border-animate-static-angle)*1deg),var(--border-animate-color-from),var(--border-animate-color-to),var(--border-animate-color-from));opacity:var(--border-animate-opacity)}.me_89b89404[data-animate=false][data-variant=pulse]:after{background:linear-gradient(calc(var(--border-animate-static-angle)*1deg),var(--border-animate-color-from),var(--border-animate-color-to))}
|
package/dist/styles.layer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer mantine-border-animate {@keyframes me_e9d4de44{0%{offset-distance:0}to{offset-distance:100%}}@keyframes me_e9d74022{0%,to{filter:blur(var(--border-animate-blur));opacity:0}50%{filter:blur(calc(var(--border-animate-blur)*5));opacity:var(--border-animate-opacity)}}@keyframes me_5193a3a4{0%,to{opacity:var(--border-animate-opacity,1);transform:scale(1)}50%{opacity:0;transform:scale(1.02)}}@keyframes me_d2bd6f45{0%{--border-animate-angle:0deg}to{--border-animate-angle:360deg}}.me_4c17b6ba{border-radius:calc(var(--border-animate-radius));display:flex;position:relative}.me_89b89404{--border-animate-size-xs:64px;--border-animate-size-sm:128px;--border-animate-size-md:256px;--border-animate-size-lg:320px;--border-animate-size-xl:480px;--border-animate-width-xs:1px;--border-animate-width-sm:2px;--border-animate-width-md:4px;--border-animate-width-lg:6px;--border-animate-width-xl:8px;--border-animate-blur-xs:2px;--border-animate-blur-sm:4px;--border-animate-blur-md:8px;--border-animate-blur-lg:16px;--border-animate-blur-xl:32px;--border-animate-size:var(--border-animate-size-md);--border-animate-width:var(--border-animate-width-xs);border:calc(var(--border-animate-width)) solid transparent;border-radius:inherit;inset:0;opacity:var(--border-animate-opacity,1);pointer-events:none;position:absolute;z-index:var(--border-animate-z-index,1)}.me_89b89404[data-variant=glow]{z-index:-1}.me_89b89404[data-with-mask=true]:not([data-variant=glow]){mask:linear-gradient(#fff 0 0)
|
|
1
|
+
@layer mantine-border-animate {@keyframes me_e9d4de44{0%{offset-distance:0}to{offset-distance:100%}}@keyframes me_e9d74022{0%,to{filter:blur(var(--border-animate-blur));opacity:0}50%{filter:blur(calc(var(--border-animate-blur)*5));opacity:var(--border-animate-opacity)}}@keyframes me_5193a3a4{0%,to{opacity:var(--border-animate-opacity,1);transform:scale(1)}50%{opacity:0;transform:scale(1.02)}}@keyframes me_d2bd6f45{0%{--border-animate-angle:0deg}to{--border-animate-angle:360deg}}.me_4c17b6ba{border-radius:calc(var(--border-animate-radius));display:flex;position:relative}.me_89b89404{--border-animate-size-xs:64px;--border-animate-size-sm:128px;--border-animate-size-md:256px;--border-animate-size-lg:320px;--border-animate-size-xl:480px;--border-animate-width-xs:1px;--border-animate-width-sm:2px;--border-animate-width-md:4px;--border-animate-width-lg:6px;--border-animate-width-xl:8px;--border-animate-blur-xs:2px;--border-animate-blur-sm:4px;--border-animate-blur-md:8px;--border-animate-blur-lg:16px;--border-animate-blur-xl:32px;--border-animate-size:var(--border-animate-size-md);--border-animate-width:var(--border-animate-width-xs);border:calc(var(--border-animate-width)) solid transparent;border-radius:inherit;inset:0;opacity:var(--border-animate-opacity,1);pointer-events:none;position:absolute;z-index:var(--border-animate-z-index,1)}.me_89b89404[data-variant=glow]{z-index:-1}.me_89b89404[data-with-mask=true]:not([data-variant=glow]){mask-clip:content-box,border-box;mask-composite:exclude;mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0)}@supports not (mask-composite:exclude){.me_89b89404[data-with-mask=true]:not([data-variant=glow]){-webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0)}}.me_89b89404[data-animate=false][data-variant=beam]:after{offset-distance:calc(var(--border-animate-static-angle)/360*100%)}.me_89b89404[data-animate=false][data-variant=gradient]:after{--border-animate-angle:calc(var(--border-animate-static-angle)*1deg)}.me_89b89404[data-animate=false],.me_89b89404[data-animate=false]:after{animation:none!important}.me_89b89404[data-variant=beam]:after{animation:me_e9d4de44 var(--border-animate-duration,5s) linear infinite var(--border-animate-direction,normal);animation-delay:var(--border-animate-delay,0s);aspect-ratio:1;background:radial-gradient(ellipse at center,var(--border-animate-color-from) 0,var(--border-animate-color-to) 40%,transparent 70%);content:"";filter:blur(var(--border-animate-blur));offset-anchor:50% 50%;offset-path:rect(calc(var(--border-animate-anchor, 0)*1px) calc(100% - var(--border-animate-anchor, 0)*1px) calc(100% - var(--border-animate-anchor, 0)*1px) calc(var(--border-animate-anchor, 0)*1px) round calc(var(--border-animate-radius)));position:absolute;width:calc(var(--border-animate-size))}@property --border-animate-angle{syntax:"<angle>";initial-value:0deg;inherits:false}.me_89b89404[data-variant=gradient]:after{animation:me_d2bd6f45 var(--border-animate-duration,3s) linear infinite var(--border-animate-direction,normal);animation-delay:var(--border-animate-delay,0s);background:conic-gradient(from var(--border-animate-angle,0deg),var(--border-animate-color-from),var(--border-animate-color-to),var(--border-animate-color-from))}.me_89b89404[data-variant=glow]:after,.me_89b89404[data-variant=gradient]:after{border-radius:inherit;content:"";filter:blur(var(--border-animate-blur));inset:-1px;position:absolute}.me_89b89404[data-variant=glow]:after{animation:me_e9d74022 var(--border-animate-duration,2s) ease-in-out infinite var(--border-animate-direction,normal);animation-delay:var(--border-animate-delay,0s);background:linear-gradient(90deg,var(--border-animate-color-from),var(--border-animate-color-to),var(--border-animate-color-from))}.me_89b89404[data-variant=pulse]:after{animation:me_5193a3a4 var(--border-animate-duration,2s) ease-in-out infinite var(--border-animate-direction,normal);animation-delay:var(--border-animate-delay,0s);background:linear-gradient(90deg,var(--border-animate-color-from),var(--border-animate-color-to));border-radius:inherit;content:"";filter:blur(var(--border-animate-blur));inset:-1px;position:absolute;transform-origin:center}.me_89b89404[data-animate=false][data-variant=glow]:after{background:linear-gradient(calc(var(--border-animate-static-angle)*1deg),var(--border-animate-color-from),var(--border-animate-color-to),var(--border-animate-color-from));opacity:var(--border-animate-opacity)}.me_89b89404[data-animate=false][data-variant=pulse]:after{background:linear-gradient(calc(var(--border-animate-static-angle)*1deg),var(--border-animate-color-from),var(--border-animate-color-to))}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gfazioli/mantine-border-animate",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Mantine component offering four border animation variants (beam, glow, gradient, pulse) with customizable colors and full animation control, perfect for creating dynamic, visually engaging UI elements.",
|
|
5
5
|
"homepage": "https://gfazioli.github.io/mantine-border-animate/",
|
|
6
6
|
"packageManager": "yarn@4.0.1",
|