holo-card
Version:
A React component for holographic card effects
3 lines (2 loc) • 25.2 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),a=require("react"),e=require("@react-spring/web"),t=function(){return t=Object.assign||function(r){for(var a,e=1,t=arguments.length;e<t;e++)for(var c in a=arguments[e])Object.prototype.hasOwnProperty.call(a,c)&&(r[c]=a[c]);return r},t.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var c=function(r,a){return void 0===a&&(a=3),parseFloat(r.toFixed(a))},i=function(r,a,e){return void 0===a&&(a=0),void 0===e&&(e=100),Math.min(Math.max(r,a),e)},n=function(r,a,e,t,i){return c(t+(i-t)*(r-a)/(e-a))};function l(r){var t=a.useState(!1),l=t[0],o=t[1],d=a.useState(!1),s=d[0],v=d[1],g=a.useState(!1),p=g[0],f=g[1],b=a.useState(!0),u=b[0],m=b[1],h=a.useState(!0),y=h[0],k=h[1],x={stiffness:.066,damping:.25},w={stiffness:.033,damping:.45},_=e.useSpring((function(){return{from:{x:0,y:0},config:x}})),z=_[0],S=_[1],M=e.useSpring((function(){return{from:{x:50,y:50,o:0},config:x}})),N=M[0],j=M[1],I=e.useSpring((function(){return{x:50,y:50,config:x}})),E=I[0],Z=I[1],A=e.useSpring((function(){return{x:0,y:0,config:w}})),C=A[0],L=A[1],R=function(r){void 0===r&&(r=500),setTimeout((function(){var r={stiffness:.01,damping:.06};f(!1),S({x:0,y:0,config:r}),j({x:50,y:50,o:0,config:r}),Z({x:50,y:50,config:r})}),r)},T=function(){L({x:0,y:0}),R(100)};a.useEffect((function(){o(/Mobi|Android/i.test(navigator.userAgent)),k("visible"===document.visibilityState);var r=function(){k("visible"===document.visibilityState),T()};return document.addEventListener("visibilitychange",r),function(){document.removeEventListener("visibilitychange",r)}}),[]);var Y={"--pointer-x":e.to(N.x,(function(r){return"".concat(r,"%")})),"--pointer-y":e.to(N.y,(function(r){return"".concat(r,"%")})),"--pointer-from-center":e.to([N.x,N.y],(function(r,a){return i(Math.sqrt(Math.pow(a-50,2)+Math.pow(r-50,2))/50,0,1)})),"--pointer-from-top":e.to(N.y,(function(r){return r/100})),"--pointer-from-left":e.to(N.x,(function(r){return r/100})),"--card-opacity":N.o,"--rotate-x":e.to([z.x,C.x],(function(r,a){return"".concat(r+a,"deg")})),"--rotate-y":e.to([z.y,C.y],(function(r,a){return"".concat(r+a,"deg")})),"--background-x":e.to(E.x,(function(r){return"".concat(r,"%")})),"--background-y":e.to(E.y,(function(r){return"".concat(r,"%")}))};return{isMobile:l,isActive:s,isInteracting:p,isLoading:u,setIsActive:v,setIsLoading:m,handleInteract:function(r){if(y&&!l){f(!0);var a,e,t,o=r.clientX,d=r.clientY,s=r.currentTarget.getBoundingClientRect(),v=o-s.left,g=d-s.top,p={x:i(c(100/s.width*v)),y:i(c(100/s.height*g))},b=p.x-50,u=p.y-50;a={x:n(p.x,0,100,37,63),y:n(p.y,0,100,33,67)},e={x:c(-b/3.5),y:c(u/2)},t={x:c(p.x),y:c(p.y),o:1},Z(a),S(e),j(t)}},handleInteractEnd:R,retreat:T,springStyle:Y}}function o(r,a){void 0===a&&(a={});var e=a.insertAt;if(r&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],c=document.createElement("style");c.type="text/css","top"===e&&t.firstChild?t.insertBefore(c,t.firstChild):t.appendChild(c),c.styleSheet?c.styleSheet.cssText=r:c.appendChild(document.createTextNode(r))}}o(":root{--pointer-x:50%;--pointer-y:50%;--card-scale:1;--card-opacity:0;--translate-x:0px;--translate-y:0px;--rotate-x:0deg;--rotate-y:0deg;--background-x:var(--pointer-x);--background-y:var(--pointer-y);--pointer-from-center:0;--pointer-from-top:var(--pointer-from-center);--pointer-from-left:var(--pointer-from-center);--card-edge:#ffe78f;--card-back:#004a80;--card-glow:#ccfffb;--sunpillar-1:#ff7a75;--sunpillar-2:#ffed61;--sunpillar-3:#a8ff61;--sunpillar-4:#85fff7;--sunpillar-5:#7a95ff;--sunpillar-6:#d875ff;--sunpillar-clr-1:var(--sunpillar-1);--sunpillar-clr-2:var(--sunpillar-2);--sunpillar-clr-3:var(--sunpillar-3);--sunpillar-clr-4:var(--sunpillar-4);--sunpillar-clr-5:var(--sunpillar-5);--sunpillar-clr-6:var(--sunpillar-6)}.card{--grain:url(assets/img/grain.webp);--glitter:url(assets/img/glitter.png);--glittersize:25%;--space:5%;--angle:133deg;--imgsize:cover;--red:#f80e35;--yellow:#eedf10;--green:#21e985;--blue:#0dbde9;--violet:#c929f1;--clip:inset(9.85% 8% 52.85% 8%);--clip-invert:polygon(0% 0%,100% 0%,100% 100%,0% 100%,0 47.15%,91.5% 47.15%,91.5% 9.85%,8% 9.85%,8% 47.15%,0 50%);--clip-stage:polygon(91.5% 9.85%,57% 9.85%,54% 12%,17% 12%,16% 14%,12% 16%,8% 16%,8% 47.15%,92% 47.15%);--clip-stage-invert:polygon(0% 0%,100% 0%,100% 100%,0% 100%,0 47.15%,91.5% 47.15%,91.5% 9.85%,57% 9.85%,54% 12%,17% 12%,16% 14%,12% 16%,8% 16%,8% 47.15%,0 50%);--clip-trainer:inset(14.5% 8.5% 48.2% 8.5%);--clip-borders:inset(2.8% 4% round 2.55%/1.5%)}.card_glare,.card_shine{will-change:transform,opacity,background-image,background-size,background-position,background-blend-mode,filter}.card{-webkit-transform:translateZ(.01px);transform:translateZ(.01px);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform,visibility,z-index;z-index:calc(var(--card-scale)*2)}.card,.card *{outline:1px solid transparent}.card,.card_rotator{aspect-ratio:var(--card-aspect);border-radius:var(--card-radius)}.card.interacting{z-index:calc(var(--card-scale)*120)}.card.active .card_rotator,.card.active .card_translater{touch-action:none}.card_rotator,.card_translater{display:grid;perspective:600px;transform-origin:center;-webkit-transform-origin:center;transform-style:preserve-3d;will-change:transform,box-shadow}.card_translater{position:relative;-webkit-transform:translate3d(var(--translate-x),var(--translate-y),.1px) scale(var(--card-scale));transform:translate3d(var(--translate-x),var(--translate-y),.1px) scale(var(--card-scale));width:auto}.card_rotator{pointer-events:auto;-webkit-transform:rotateY(var(--rotate-x)) rotateX(var(--rotate-y));transform:rotateY(var(--rotate-x)) rotateX(var(--rotate-y));-webkit-transform-style:preserve-3d}button.card_rotator{-webkit-appearance:none;appearance:none;background:transparent;border:none;padding:0}.card.active .card_rotator:focus,.card_rotator{box-shadow:0 0 3px -1px transparent,0 0 2px 1px transparent,0 0 5px 0 transparent,0 10px 20px -5px #000,0 2px 15px -5px #000,0 0 20px 0 transparent;transition:box-shadow .4s ease,opacity .33s ease-out}.card.active .card_rotator,.card_rotator:focus{box-shadow:0 0 3px -1px #fff,0 0 3px 1px var(--card-edge),0 0 12px 2px var(--card-glow),0 10px 20px -5px #000,0 0 40px -30px var(--card-glow),0 0 50px -20px var(--card-glow)}.card_rotator *{aspect-ratio:var(--card-aspect);border-radius:var(--card-radius);display:grid;grid-area:1/1;image-rendering:optimizeQuality;overflow:hidden;pointer-events:none;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:100%}.card_rotator img{height:auto}.card_rotator img:not(.card_back){-webkit-transform:translateZ(.01px);transform:translateZ(.01px)}.card_back{backface-visibility:visible;background-color:var(--card-back);-webkit-transform:rotateY(180deg) translateZ(1px);transform:rotateY(180deg) translateZ(1px)}.card_front,.card_front *{backface-visibility:hidden}.card_front{opacity:1;-webkit-transform:translateZ(.01px);transform:translateZ(.01px);transition:opacity .33s ease-out}.card_shine{background:transparent;background-position:50%;background-size:cover;display:grid;filter:brightness(.85) contrast(2.75) saturate(.65);mix-blend-mode:color-dodge;opacity:var(--card-opacity);overflow:hidden;transform:translateZ(1px);z-index:3}.card_shine:after,.card_shine:before{--sunpillar-clr-1:var(--sunpillar-5);--sunpillar-clr-2:var(--sunpillar-6);--sunpillar-clr-3:var(--sunpillar-1);--sunpillar-clr-4:var(--sunpillar-2);--sunpillar-clr-5:var(--sunpillar-3);--sunpillar-clr-6:var(--sunpillar-4);border-radius:var(--card-radius);grid-area:1/1;transform:translateZ(1px)}.card_shine:after{--sunpillar-clr-1:var(--sunpillar-6);--sunpillar-clr-2:var(--sunpillar-1);--sunpillar-clr-3:var(--sunpillar-2);--sunpillar-clr-4:var(--sunpillar-3);--sunpillar-clr-5:var(--sunpillar-4);--sunpillar-clr-6:var(--sunpillar-5);transform:translateZ(1.2px)}.card_glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,100%,.8) 10%,hsla(0,0%,100%,.65) 20%,rgba(0,0,0,.5) 90%);mix-blend-mode:overlay;opacity:var(--card-opacity);overflow:hidden;transform:translate(1.41px)}.card.masked .card_shine,.card.masked .card_shine:after,.card.masked .card_shine:before{-webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-size:cover;mask-size:cover}");o('.card{--foil-brightness:0.55}.card[data-set=Normal] .card_shine{background-blend-mode:soft-light,difference;background-image:radial-gradient(circle at var(--pointer-x) var(--pointer-y),#fff 5%,#000 50%,#fff 80%),linear-gradient(-45deg,#000 15%,#fff,#000 85%),var(--foil);background-position:50%,(100%*var(--pointer-from-left)) (100%*var(--pointer-from-top)),50%;background-size:120% 120%,200% 200%,cover;filter:brightness(var(--foil-brightness)) contrast(1.5) saturate(1);mix-blend-mode:color-dodge;opacity:calc(var(--card-opacity)*1.5 - var(--pointer-from-center))}.card[data-set=Normal] .card_glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,100%,.8) 10%,hsla(0,0%,100%,.5) 20%,rgba(0,0,0,.75) 90%);filter:brightness(.7) contrast(1.5);opacity:var(--card-opacity)}.card[data-set=Normal] .card_glare:after{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),#fff 10%,hsla(0,0%,100%,.5) 20%,rgba(0,0,0,.5) 120%);content:"";filter:brightness(1) contrast(1.5);opacity:var(--card-opacity)}.card:not(.masked)[data-set=Normal] .card_shine{--foil:none;clip-path:var(--clip-invert)}');o('.card[data-set=Radiant] .card_shine{--barwidth:1.2%;--space:200px;--hue:50;--imagesize:cover;background-blend-mode:exclusion,darken,color-dodge;background-image:radial-gradient(farthest-corner ellipse at calc((var(--pointer-x))*.5 + 25%) calc((var(--pointer-y))*.5 + 25%),#f2f2f2 20%,var(--card-glow) 130%),repeating-linear-gradient(45deg,#1a1a1a 0,#1a1a1a 1%,#1a1a1a var(--barwidth),#333 calc(var(--barwidth) + .01%),#333 calc(var(--barwidth)*2),#595959 calc(var(--barwidth)*2 + .01%),#595959 calc(var(--barwidth)*3),#6c6c6c calc(var(--barwidth)*3 + .01%),#6c6c6c calc(var(--barwidth)*4),grey calc(var(--barwidth)*4 + .01%),grey calc(var(--barwidth)*5),#6c6c6c calc(var(--barwidth)*5 + .01%),#6c6c6c calc(var(--barwidth)*6),#595959 calc(var(--barwidth)*6 + .01%),#595959 calc(var(--barwidth)*7),#333 calc(var(--barwidth)*7 + .01%),#333 calc(var(--barwidth)*8),#1a1a1a calc(var(--barwidth)*8 + .01%),#1a1a1a calc(var(--barwidth)*9),#000 calc(var(--barwidth)*9 + .01%),#000 calc(var(--barwidth)*10)),repeating-linear-gradient(-45deg,#1a1a1a 0,#1a1a1a 1%,#1a1a1a var(--barwidth),#333 calc(var(--barwidth) + .01%),#333 calc(var(--barwidth)*2),#595959 calc(var(--barwidth)*2 + .01%),#595959 calc(var(--barwidth)*3),#6c6c6c calc(var(--barwidth)*3 + .01%),#6c6c6c calc(var(--barwidth)*4),grey calc(var(--barwidth)*4 + .01%),grey calc(var(--barwidth)*5),#6c6c6c calc(var(--barwidth)*5 + .01%),#6c6c6c calc(var(--barwidth)*6),#595959 calc(var(--barwidth)*6 + .01%),#595959 calc(var(--barwidth)*7),#333 calc(var(--barwidth)*7 + .01%),#333 calc(var(--barwidth)*8),#1a1a1a calc(var(--barwidth)*8 + .01%),#1a1a1a calc(var(--barwidth)*9),#000 calc(var(--barwidth)*9 + .01%),#000 calc(var(--barwidth)*10));background-position:50%,calc((var(--background-x) - 50%)*1.5 + 50%) calc((var(--background-y) - 50%)*1.5 + 50%),calc((var(--background-x) - 50%)*1.5 + 50%) calc((var(--background-y) - 50%)*1.5 + 50%);background-size:cover,210% 210%,210% 210%;filter:brightness(.5) contrast(2) saturate(1.75);mix-blend-mode:color-dodge}.card[data-set=Radiant] .card_shine:after{background-blend-mode:hard-light;background-image:var(--foil),#fdb8b4 calc(var(--space)*1),#addaff calc(var(--space)*2),#ffd7b3 calc(var(--space)*3),#b8ffe7 calc(var(--space)*4),#fdbff4 calc(var(--space)*5),#b4f3fd calc(var(--space)*6),#fdb8b4 calc(var(--space)*7);background-position:50%,calc((var(--background-x) - 50%)*-2.5 + 50%) calc((var(--background-y) - 50%)*-2.5 + 50%);background-size:var(--imgsize),400% 100%;content:"";filter:brightness(.6) contrast(3) saturate(2);mix-blend-mode:color-dodge}.card[data-set=Radiant] .card_shine:before{background-blend-mode:color-dodge;background-image:var(--glitter) radial-gradient(farthest-corner ellipse at calc((var(--pointer-x))*.5 + 25%) calc((var(--pointer-y))*.5 + 25%),hsla(0,0%,58%,.8) 10%,rgba(51,51,51,.9) 20%,rgba(51,51,51,.5) 50%);background-position:50%;background-size:15% 15%,350% 350%;content:"";filter:brightness(.66) contrast(2) saturate(.5);grid-area:1/1;mix-blend-mode:overlay;z-index:2}.card[data-set=Radiant] .card_glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,100%,.33) 0,#404040 110%);filter:brightness(1) contrast(1.5);mix-blend-mode:hard-light}');o('.card[data-set=Vibrant] .card_shine{--imgsize:cover;--r-clr-1:#942929;--r-clr-2:#98752f;--r-clr-3:#598f24;--r-clr-4:#248f8f;--r-clr-5:#248f8f;--r-clr-6:#2b639c;--r-clr-7:#5e247b;background-blend-mode:luminosity,overlay;background-image:repeating-linear-gradient(var(--angle),rgba(175,103,203,.75) calc(var(--space)*1),rgba(223,78,73,.75) calc(var(--space)*2),rgba(215,197,55,.75) calc(var(--space)*3),rgba(126,201,64,.75) calc(var(--space)*4),rgba(79,176,169,.75) calc(var(--space)*5),rgba(138,161,255,.75) calc(var(--space)*6),rgba(177,107,204,.75) calc(var(--space)*7)),var(--glitter),linear-gradient(-30deg,var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1));background-position:0 calc(var(--background-y)*1),50%,calc(var(--background-x)*1.5) calc(var(--background-y)*1.5);background-size:200% 400%,var(--glittersize) var(--glittersize),400% 400%;filter:brightness(calc(var(--pointer-from-center)*.3 + .3)) contrast(3) saturate(1.8)}.card[data-set=Vibrant] .card_shine:after{background-blend-mode:overlay;background-image:var(--glitter) linear-gradient(-60deg,var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1));background-position:50%,calc(var(--background-x)*-1.5) calc(var(--background-y)*-1.5);background-size:var(--glittersize) var(--glittersize),400% 400%;content:"";filter:brightness(calc(var(--pointer-from-center)*.5 + .6)) contrast(3) saturate(1);-webkit-mask-image:none!important;mask-image:none!important;opacity:calc(1.2 + (var(--pointer-from-center)/2)*-1)}.card[data-set=Vibrant] .card_shine:before{background-blend-mode:difference;background-image:var(--foil);background-position:50%;background-size:var(--imgsize);content:"";filter:brightness(1.5) contrast(1.5);mix-blend-mode:color-dodge;opacity:calc((var(--pointer-from-center) + .6)*.4)}.card[data-set=Vibrant] .card_glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(50,20%,90%,.75) 0,rgba(61,92,77,.65) 45%,#000 100%);filter:brightness(.9) contrast(2);opacity:calc(var(--card-opacity)*.75)}');o('.card[data-set=Shiny] .card_shine{--shift:1px;--imgSize:cover;background-blend-mode:soft-light,hard-light,overlay;background-image:var(--glitter),var(--glitter),conic-gradient(var(--sunpillar-clr-4),var(--sunpillar-clr-5),var(--sunpillar-clr-6),var(--sunpillar-clr-1),var(--sunpillar-clr-4)),radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),rgba(0,0,0,.98) 10%,hsla(0,0%,95%,.15) 90%);background-position:45% 45%,55% 55%,50%,50%;background-size:var(--glittersize) var(--glittersize),var(--glittersize) var(--glittersize),cover,cover;filter:brightness(calc(.4 + var(--pointer-from-center)*.2)) contrast(1) saturate(2.7);mix-blend-mode:color-dodge}.card[data-set=Shiny] .card_shine:after{background-image:var(--glitter);background-position:calc(50% - (var(--shift)*2)*var(--pointer-from-left) + var(--shift)) calc(50% - (var(--shift)*2)*var(--pointer-from-top) + var(--shift));background-size:var(--glittersize) var(--glittersize);filter:brightness(calc(var(--pointer-from-center)*.6 + .6)) contrast(1.5);mix-blend-mode:overlay}.card[data-set=Shiny] .card_shine:before{background-blend-mode:hard-light,multiply;background-image:var(--foil),linear-gradient(45deg,#f9c006,#ffea61),radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(10,20%,90%,.95) 10%,#000 70%);background-position:50%,50%,50%;background-size:var(--imgsize),cover,cover;filter:brightness(1.25) contrast(1.25) saturate(.35);-webkit-mask-image:none!important;mask-image:none!important;mix-blend-mode:lighten;opacity:.8}.card[data-set=Shiny] .card_shine{--r-clr-1:#942929;--r-clr-2:#98752f;--r-clr-3:#598f24;--r-clr-4:#248f8f;--r-clr-5:#248f8f;--r-clr-6:#2b639c;--r-clr-7:#5e247b;background-blend-mode:luminosity,soft-light;background-image:linear-gradient(-45deg,var(--r-clr-1),var(--r-clr-5)),var(--glitter),linear-gradient(-30deg,var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1));background-position:calc(25% + 50%*var(--pointer-from-left)) calc(25% + 50%*var(--pointer-from-top)),calc(50% - (var(--shift)*2)*var(--pointer-from-left) + var(--shift)) calc(50% - (var(--shift)*2)*var(--pointer-from-top) + var(--shift)),calc(25% + var(--pointer-x)/2) calc(25% + var(--pointer-y)/2);background-size:200% 200%,var(--glittersize) var(--glittersize),400% 400%;filter:brightness(calc(var(--pointer-from-center)*.5 + .75)) contrast(2) saturate(1)}.card[data-set=Shiny] .card_shine:after{background-blend-mode:soft-light;background-image:var(--glitter),linear-gradient(-60deg,var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1));background-position:calc(50% - (var(--shift)*2)*var(--pointer-from-left) - var(--shift)) calc(50% - (var(--shift)*2)*var(--pointer-from-top) - var(--shift)),var(--pointer-x) var(--pointer-y);background-size:var(--glittersize) var(--glittersize),400% 400%;content:"";filter:brightness(calc(var(--pointer-from-center)*.35 + .35)) contrast(2) saturate(1);-webkit-mask-image:none!important;mask-image:none!important;mix-blend-mode:exclusion}.card[data-set=Shiny] .card_shine:before{background-image:var(--foil);background-position:50%;background-size:var(--imgsize);content:"";filter:brightness(2.5) contrast(1);mix-blend-mode:multiply;opacity:calc((var(--pointer-from-center) + .4)*.6)}.card[data-set=Shiny] .card_glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),#ccc,hsla(0,0%,75%,.25) 30%,#373737 130%);filter:brightness(.9) contrast(2);mix-blend-mode:hard-light;opacity:calc(var(--pointer-from-center)*.9)}.card:not(.masked)[data-set=Shiny] .card_shine{--foil:ulr("/assets/img/illusion-mask.png");--imgsize:33%}');o('.card[data-set=Shiny_raycast] .card_shine,.card[data-set=Shiny_raycast] .card_shine:after{--space:5%;--angle:113deg;--img-size:cover;background-blend-mode:soft-light,hue,hard-light;background-image:var(--foil),repeating-linear-gradient(0deg,var(--sunpillar-clr-1) calc(var(--space)*1),var(--sunpillar-clr-2) calc(var(--space)*2),var(--sunpillar-clr-3) calc(var(--space)*3),var(--sunpillar-clr-4) calc(var(--space)*4),var(--sunpillar-clr-5) calc(var(--space)*5),var(--sunpillar-clr-6) calc(var(--space)*6),var(--sunpillar-clr-1) calc(var(--space)*7)),repeating-linear-gradient(var(--angle),#0e152e 0,#8fa3a3 3.8%,#8fc1c1 4.5%,#8fa3a3 5.2%,#0e152e 10%,#0e152e 12%),radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),rgba(0,0,0,.1) 12%,rgba(0,0,0,.15) 20%,rgba(0,0,0,.25) 120%);background-position:50%,0 var(--background-y),calc(var(--background-x) + var(--background-y)*.2) var(--background-y),var(--background-x) var(--background-y);background-size:var(--imgsize),200% 700%,300% 100%,200% 100%;filter:brightness(calc(var(--pointer-from-center)*.4 + .4)) contrast(1.4) saturate(2.25)}.card[data-set=Shiny_raycast] .card_shine:after{background-position:50%,50%,0 var(--background-y),calc(var(--background-x) + (var(--background-y)*0.2)*-1) calc(var(--background-y)*-1);background-size:var(--imgsize),200% 400%,195% 100%,200%,100%;content:"";filter:brightness(calc(var(--pointer-from-center)*.4 + .8)) contrast(1.5) saturate(1.25);mix-blend-mode:exclusion}.card[data-set=Shiny_raycast] .card_glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),#bfbfbf 5%,#555b5e 60%,#240f1d 150%);background-position:50%;background-size:120%,150;filter:brightness(1) contrast(1.2) saturate(1);mix-blend-mode:hard-light;opacity:calc(var(--card-opacity)*.75)}');o('.card[data-set=Glittery] .card_shine{--r-clr-1:#942929;--r-clr-2:#98752f;--r-clr-3:#598f24;--r-clr-4:#248f8f;--r-clr-5:#248f8f;--r-clr-6:#2b639c;--r-clr-7:#5e247b;background-blend-mode:luminosity,soft-light;background-image:linear-gradient(-45deg,var(--r-clr-1),var(--r-clr-5)),var(--glitter),linear-gradient(-30deg,var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1));background-position:calc(25% + 50%*var(--pointer-from-left)) calc(25% + 50%*var(--pointer-from-top)),50%,calc(25% + var(--pointer-x)/2) calc(25% + var(--pointer-y)/2);background-size:200% 200%,var(--glittersize) var(--glittersize),400% 400%;filter:brightness(calc(var(--pointer-from-center)*.25 + .6)) contrast(2.2) saturate(.75)}.card[data-set=Glittery] .card_shine:after{background-blend-mode:soft-light;background-image:var(--glitter),linear-gradient(-60deg,var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1),var(--r-clr-2),var(--r-clr-3),var(--r-clr-4),var(--r-clr-5),var(--r-clr-6),var(--r-clr-7),var(--r-clr-1));background-position:50%,var(--pointer-x) var(--pointer-y);background-size:var(--glittersize) var(--glittersize),400% 400%;content:"";filter:brightness(calc(var(--pointer-from-center)*.3 + .55)) contrast(2) saturate(1);-webkit-mask-image:none!important;mask-image:none!important;mix-blend-mode:color-dodge}.card[data-set=Glittery] .card_shine:before{background-blend-mode:difference;background-image:var(--foil);background-position:50%;background-size:var(--imgsize);content:"";filter:brightness(2.5) contrast(1);mix-blend-mode:darken;opacity:calc((var(--pointer-from-center) + .4)*.6)}.card[data-set=Glittery] .card_glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),#ccc,rgba(213,220,221,.25) 30%,#3c4144 120%);filter:brightness(.9) contrast(1.75);mix-blend-mode:hard-light;opacity:calc(var(--pointer-from-center)*.9)}'),exports.HoloCard=function(c){var i=c.img,n=c.radius,o=c.foil,d=void 0===o?"":o,s=c.mask,v=void 0===s?"":s,g=c.data_set,p=void 0===g?"Normal":g,f=c.enableEffect,b=void 0===f||f,u=a.useRef(null),m=a.useState({x:Math.random(),y:Math.random()})[0],h=a.useState({x:Math.floor(734*m.x),y:Math.floor(1280*m.y)})[0],y=a.useState({}),k=y[0],x=y[1],w=l(),_=w.isActive,z=w.isInteracting,S=w.setIsActive,M=w.setIsLoading,N=w.handleInteract,j=w.handleInteractEnd,I=w.springStyle,E={"--seedx":m.x,"--seedy":m.y,"--cosmosbg":"".concat(h.x,"px ").concat(h.y,"px")},Z=t(t({},E),k),A=["card","interactive",_?"active":"",z?"interacting":"",v?"masked":""].filter(Boolean).join(" ");return r.jsx(e.animated.div,t({ref:u,className:A,style:t(t({},I),void 0!==n&&{"--card-radius":"number"==typeof n?"".concat(n,"px"):n}),"data-set":p},{children:r.jsx("div",t({className:"card_translater"},{children:r.jsx(e.animated.button,t({className:"card_rotator",onClick:function(){S(!_)},onMouseMove:b?N:void 0,onMouseLeave:b?function(){return j()}:void 0,"aria-label":"Interactive card",tabIndex:0},{children:r.jsxs("div",t({className:"card_front",style:Z},{children:[r.jsx("img",{src:i,alt:"img alt",onLoad:function(){M(!1),(v||d)&&x({"--mask":"url(".concat(v,")"),"--foil":"url(".concat(d,")")})},loading:"lazy"}),r.jsx("div",{className:"card_shine"}),r.jsx("div",{className:"card_glare"})]}))}))}))}))},exports.useHolographicEffect=l;
//# sourceMappingURL=index.js.map