@jojovms/tilt-card-core 0.0.1 → 0.0.2

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { Tiltō } from './tilt';
+export { Tilto } from './tilt';
 export type { TiltOptions } from './tilt';

package/dist/index.js

@@ -3,4 +3,4 @@
       rotateX(${m}deg)
       rotateY(${d}deg)
       scale3d(${this.options.scale}, ${this.options.scale}, ${this.options.scale})
-    `,this.options.glare&&((r=this.glareElement)!=null&&r.firstChild)){const a=this.glareElement.firstChild,p=Math.atan2(e.clientX-(this.bounds.left+this.bounds.width/2),-(e.clientY-(this.bounds.top+this.bounds.height/2)))*(180/Math.PI),c=Math.sqrt(Math.pow(n-.5,2)+Math.pow(l-.5,2))*2;a.style.transform=`translate(-50%, -50%) rotate(${p}deg)`,a.style.opacity=(c*(this.options.glareMaxOpacity||.5)).toString()}});s(this,"onMouseLeave",()=>{var e;if(this.element.style.transition="transform 300ms ease-out",this.element.style.transform=`perspective(${this.options.perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`,this.options.glare&&((e=this.glareElement)!=null&&e.firstChild)){const t=this.glareElement.firstChild;t.style.opacity="0",t.style.transition="opacity 300ms"}});this.element=typeof e=="string"?document.querySelector(e):e,this.options={max:15,perspective:1e3,scale:1.05,glare:!1,glareMaxOpacity:.5,...t},this.element&&this.init()}init(){this.element.style.transformStyle="preserve-3d",this.element.style.transform=`perspective(${this.options.perspective}px)`,this.options.glare&&this.addGlare(),this.element.addEventListener("mouseenter",this.onMouseEnter),this.element.addEventListener("mousemove",this.onMouseMove),this.element.addEventListener("mouseleave",this.onMouseLeave)}addGlare(){this.glareElement=document.createElement("div"),this.glareElement.style.position="absolute",this.glareElement.style.top="0",this.glareElement.style.left="0",this.glareElement.style.width="100%",this.glareElement.style.height="100%",this.glareElement.style.overflow="hidden",this.glareElement.style.pointerEvents="none",this.glareElement.style.borderRadius=getComputedStyle(this.element).borderRadius;const e=document.createElement("div");e.style.position="absolute",e.style.top="50%",e.style.left="50%",e.style.pointerEvents="none",e.style.backgroundImage="linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",e.style.width="200%",e.style.height="200%",e.style.transform="translate(-50%, -50%) rotate(0deg)",e.style.opacity="0",e.style.transition="opacity 300ms",this.glareElement.appendChild(e),this.element.appendChild(this.glareElement)}destroy(){this.element.removeEventListener("mouseenter",this.onMouseEnter),this.element.removeEventListener("mousemove",this.onMouseMove),this.element.removeEventListener("mouseleave",this.onMouseLeave),this.glareElement&&this.glareElement.remove()}}exports.Tiltō=u;
+    `,this.options.glare&&((r=this.glareElement)!=null&&r.firstChild)){const a=this.glareElement.firstChild,p=Math.atan2(e.clientX-(this.bounds.left+this.bounds.width/2),-(e.clientY-(this.bounds.top+this.bounds.height/2)))*(180/Math.PI),c=Math.sqrt(Math.pow(n-.5,2)+Math.pow(l-.5,2))*2;a.style.transform=`translate(-50%, -50%) rotate(${p}deg)`,a.style.opacity=(c*(this.options.glareMaxOpacity||.5)).toString()}});s(this,"onMouseLeave",()=>{var e;if(this.element.style.transition="transform 300ms ease-out",this.element.style.transform=`perspective(${this.options.perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`,this.options.glare&&((e=this.glareElement)!=null&&e.firstChild)){const t=this.glareElement.firstChild;t.style.opacity="0",t.style.transition="opacity 300ms"}});this.element=typeof e=="string"?document.querySelector(e):e,this.options={max:15,perspective:1e3,scale:1.05,glare:!1,glareMaxOpacity:.5,...t},this.element&&this.init()}init(){this.element.style.transformStyle="preserve-3d",this.element.style.transform=`perspective(${this.options.perspective}px)`,this.options.glare&&this.addGlare(),this.element.addEventListener("mouseenter",this.onMouseEnter),this.element.addEventListener("mousemove",this.onMouseMove),this.element.addEventListener("mouseleave",this.onMouseLeave)}addGlare(){this.glareElement=document.createElement("div"),this.glareElement.style.position="absolute",this.glareElement.style.top="0",this.glareElement.style.left="0",this.glareElement.style.width="100%",this.glareElement.style.height="100%",this.glareElement.style.overflow="hidden",this.glareElement.style.pointerEvents="none",this.glareElement.style.borderRadius=getComputedStyle(this.element).borderRadius;const e=document.createElement("div");e.style.position="absolute",e.style.top="50%",e.style.left="50%",e.style.pointerEvents="none",e.style.backgroundImage="linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",e.style.width="200%",e.style.height="200%",e.style.transform="translate(-50%, -50%) rotate(0deg)",e.style.opacity="0",e.style.transition="opacity 300ms",this.glareElement.appendChild(e),this.element.appendChild(this.glareElement)}destroy(){this.element.removeEventListener("mouseenter",this.onMouseEnter),this.element.removeEventListener("mousemove",this.onMouseMove),this.element.removeEventListener("mouseleave",this.onMouseLeave),this.glareElement&&this.glareElement.remove()}}exports.Tilto=u;

package/dist/index.mjs

@@ -54,5 +54,5 @@ class v {
   }
 }
 export {
-  v as Tiltō
+  v as Tilto
 };

package/dist/index.umd.js

@@ -3,4 +3,4 @@
       rotateX(${p}deg)
       rotateY(${c}deg)
       scale3d(${this.options.scale}, ${this.options.scale}, ${this.options.scale})
-    `,this.options.glare&&((h=this.glareElement)!=null&&h.firstChild)){const d=this.glareElement.firstChild,g=Math.atan2(e.clientX-(this.bounds.left+this.bounds.width/2),-(e.clientY-(this.bounds.top+this.bounds.height/2)))*(180/Math.PI),u=Math.sqrt(Math.pow(l-.5,2)+Math.pow(r-.5,2))*2;d.style.transform=`translate(-50%, -50%) rotate(${g}deg)`,d.style.opacity=(u*(this.options.glareMaxOpacity||.5)).toString()}});i(this,"onMouseLeave",()=>{var e;if(this.element.style.transition="transform 300ms ease-out",this.element.style.transform=`perspective(${this.options.perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`,this.options.glare&&((e=this.glareElement)!=null&&e.firstChild)){const n=this.glareElement.firstChild;n.style.opacity="0",n.style.transition="opacity 300ms"}});this.element=typeof e=="string"?document.querySelector(e):e,this.options={max:15,perspective:1e3,scale:1.05,glare:!1,glareMaxOpacity:.5,...n},this.element&&this.init()}init(){this.element.style.transformStyle="preserve-3d",this.element.style.transform=`perspective(${this.options.perspective}px)`,this.options.glare&&this.addGlare(),this.element.addEventListener("mouseenter",this.onMouseEnter),this.element.addEventListener("mousemove",this.onMouseMove),this.element.addEventListener("mouseleave",this.onMouseLeave)}addGlare(){this.glareElement=document.createElement("div"),this.glareElement.style.position="absolute",this.glareElement.style.top="0",this.glareElement.style.left="0",this.glareElement.style.width="100%",this.glareElement.style.height="100%",this.glareElement.style.overflow="hidden",this.glareElement.style.pointerEvents="none",this.glareElement.style.borderRadius=getComputedStyle(this.element).borderRadius;const e=document.createElement("div");e.style.position="absolute",e.style.top="50%",e.style.left="50%",e.style.pointerEvents="none",e.style.backgroundImage="linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",e.style.width="200%",e.style.height="200%",e.style.transform="translate(-50%, -50%) rotate(0deg)",e.style.opacity="0",e.style.transition="opacity 300ms",this.glareElement.appendChild(e),this.element.appendChild(this.glareElement)}destroy(){this.element.removeEventListener("mouseenter",this.onMouseEnter),this.element.removeEventListener("mousemove",this.onMouseMove),this.element.removeEventListener("mouseleave",this.onMouseLeave),this.glareElement&&this.glareElement.remove()}}s.Tiltō=t,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+    `,this.options.glare&&((h=this.glareElement)!=null&&h.firstChild)){const d=this.glareElement.firstChild,g=Math.atan2(e.clientX-(this.bounds.left+this.bounds.width/2),-(e.clientY-(this.bounds.top+this.bounds.height/2)))*(180/Math.PI),u=Math.sqrt(Math.pow(l-.5,2)+Math.pow(r-.5,2))*2;d.style.transform=`translate(-50%, -50%) rotate(${g}deg)`,d.style.opacity=(u*(this.options.glareMaxOpacity||.5)).toString()}});i(this,"onMouseLeave",()=>{var e;if(this.element.style.transition="transform 300ms ease-out",this.element.style.transform=`perspective(${this.options.perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`,this.options.glare&&((e=this.glareElement)!=null&&e.firstChild)){const n=this.glareElement.firstChild;n.style.opacity="0",n.style.transition="opacity 300ms"}});this.element=typeof e=="string"?document.querySelector(e):e,this.options={max:15,perspective:1e3,scale:1.05,glare:!1,glareMaxOpacity:.5,...n},this.element&&this.init()}init(){this.element.style.transformStyle="preserve-3d",this.element.style.transform=`perspective(${this.options.perspective}px)`,this.options.glare&&this.addGlare(),this.element.addEventListener("mouseenter",this.onMouseEnter),this.element.addEventListener("mousemove",this.onMouseMove),this.element.addEventListener("mouseleave",this.onMouseLeave)}addGlare(){this.glareElement=document.createElement("div"),this.glareElement.style.position="absolute",this.glareElement.style.top="0",this.glareElement.style.left="0",this.glareElement.style.width="100%",this.glareElement.style.height="100%",this.glareElement.style.overflow="hidden",this.glareElement.style.pointerEvents="none",this.glareElement.style.borderRadius=getComputedStyle(this.element).borderRadius;const e=document.createElement("div");e.style.position="absolute",e.style.top="50%",e.style.left="50%",e.style.pointerEvents="none",e.style.backgroundImage="linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",e.style.width="200%",e.style.height="200%",e.style.transform="translate(-50%, -50%) rotate(0deg)",e.style.opacity="0",e.style.transition="opacity 300ms",this.glareElement.appendChild(e),this.element.appendChild(this.glareElement)}destroy(){this.element.removeEventListener("mouseenter",this.onMouseEnter),this.element.removeEventListener("mousemove",this.onMouseMove),this.element.removeEventListener("mouseleave",this.onMouseLeave),this.glareElement&&this.glareElement.remove()}}s.Tilto=t,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/dist/tilt.d.ts

@@ -5,7 +5,7 @@ export interface TiltOptions {
     glare?: boolean;
     glareMaxOpacity?: number;
 }
-export declare class Tiltō {
+export declare class Tilto {
     private element;
     private options;
     private glareElement;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jojovms/tilt-card-core",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Tiltō: A premium 3D tilt interaction effect for your cards.",
     "keywords": [
         "tilto",
@@ -35,4 +35,4 @@
         "vite": "^5.0.10",
         "vite-plugin-dts": "^3.6.4"
     }
-}
+}