@jojovms/tilt-card-core 0.0.1

package/README.md

@@ -0,0 +1,28 @@
+# @jojovms/tilt-card-core
+
+A premium 3D tilt effect library for your UI.
+
+## Installation
+```bash
+npm install @jojovms/tilt-card-core
+```
+
+## Usage
+```javascript
+import { Tiltō } from '@jojovms/tilt-card-core';
+
+new Tiltō('#my-card', {
+  max: 15,
+  scale: 1.05,
+  glare: true
+});
+```
+
+## Options
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `max` | number | 15 | Max tilt rotation (deg) |
+| `perspective` | number | 1000 | Transform perspective |
+| `scale` | number | 1.05 | Element scale on hover |
+| `glare` | boolean | false | Enable glare effect |
+| `glareMaxOpacity` | number | 0.5 | Max opacity of glare |

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";var g=Object.defineProperty;var y=(i,e,t)=>e in i?g(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var s=(i,e,t)=>y(i,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class u{constructor(e,t={}){s(this,"element");s(this,"options");s(this,"glareElement",null);s(this,"bounds",null);s(this,"onMouseEnter",()=>{var e;this.bounds=this.element.getBoundingClientRect(),this.element.style.transition="none",(e=this.glareElement)!=null&&e.firstChild&&(this.glareElement.firstChild.style.transition="opacity 100ms")});s(this,"onMouseMove",e=>{var r;if(!this.bounds)return;const t=e.clientX-this.bounds.left,h=e.clientY-this.bounds.top,n=t/this.bounds.width,l=h/this.bounds.height,o=this.options.max||15,m=(.5-l)*o*2,d=(n-.5)*o*2;if(this.element.style.transform=`
+      perspective(${this.options.perspective}px)
+      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;

package/dist/index.mjs

@@ -0,0 +1,58 @@
+var g = Object.defineProperty;
+var y = (i, e, t) => e in i ? g(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var s = (i, e, t) => y(i, typeof e != "symbol" ? e + "" : e, t);
+class v {
+  constructor(e, t = {}) {
+    s(this, "element");
+    s(this, "options");
+    s(this, "glareElement", null);
+    s(this, "bounds", null);
+    s(this, "onMouseEnter", () => {
+      var e;
+      this.bounds = this.element.getBoundingClientRect(), this.element.style.transition = "none", (e = this.glareElement) != null && e.firstChild && (this.glareElement.firstChild.style.transition = "opacity 100ms");
+    });
+    s(this, "onMouseMove", (e) => {
+      var r;
+      if (!this.bounds) return;
+      const t = e.clientX - this.bounds.left, h = e.clientY - this.bounds.top, n = t / this.bounds.width, l = h / this.bounds.height, o = this.options.max || 15, m = (0.5 - l) * o * 2, d = (n - 0.5) * o * 2;
+      if (this.element.style.transform = `
+      perspective(${this.options.perspective}px)
+      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 - 0.5, 2) + Math.pow(l - 0.5, 2)) * 2;
+        a.style.transform = `translate(-50%, -50%) rotate(${p}deg)`, a.style.opacity = (c * (this.options.glareMaxOpacity || 0.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: 0.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();
+  }
+}
+export {
+  v as Tiltō
+};

package/dist/index.umd.js

@@ -0,0 +1,6 @@
+(function(s,t){typeof exports=="object"&&typeof module<"u"?t(exports):typeof define=="function"&&define.amd?define(["exports"],t):(s=typeof globalThis<"u"?globalThis:s||self,t(s.TiltCardCore={}))})(this,function(s){"use strict";var y=Object.defineProperty;var f=(s,t,o)=>t in s?y(s,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):s[t]=o;var i=(s,t,o)=>f(s,typeof t!="symbol"?t+"":t,o);class t{constructor(e,n={}){i(this,"element");i(this,"options");i(this,"glareElement",null);i(this,"bounds",null);i(this,"onMouseEnter",()=>{var e;this.bounds=this.element.getBoundingClientRect(),this.element.style.transition="none",(e=this.glareElement)!=null&&e.firstChild&&(this.glareElement.firstChild.style.transition="opacity 100ms")});i(this,"onMouseMove",e=>{var h;if(!this.bounds)return;const n=e.clientX-this.bounds.left,m=e.clientY-this.bounds.top,l=n/this.bounds.width,r=m/this.bounds.height,a=this.options.max||15,p=(.5-r)*a*2,c=(l-.5)*a*2;if(this.element.style.transform=`
+      perspective(${this.options.perspective}px)
+      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"})});

package/dist/tilt.d.ts

@@ -0,0 +1,20 @@
+export interface TiltOptions {
+    max?: number;
+    perspective?: number;
+    scale?: number;
+    glare?: boolean;
+    glareMaxOpacity?: number;
+}
+export declare class Tiltō {
+    private element;
+    private options;
+    private glareElement;
+    private bounds;
+    constructor(target: string | HTMLElement, options?: TiltOptions);
+    private init;
+    private addGlare;
+    private onMouseEnter;
+    private onMouseMove;
+    private onMouseLeave;
+    destroy(): void;
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "@jojovms/tilt-card-core",
+    "version": "0.0.1",
+    "description": "Tiltō: A premium 3D tilt interaction effect for your cards.",
+    "keywords": [
+        "tilto",
+        "tilt-card",
+        "3d",
+        "hover",
+        "ui",
+        "framework",
+        "jojovms"
+    ],
+    "author": "Shijo Shaji (https://shijoshaji.in)",
+    "homepage": "https://shijoshaji.in",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/shijoshaji/tilt-card.git",
+        "directory": "core"
+    },
+    "bugs": {
+        "url": "https://github.com/shijoshaji/tilt-card/issues"
+    },
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "build": "vite build"
+    },
+    "files": [
+        "dist"
+    ],
+    "devDependencies": {
+        "typescript": "^5.3.3",
+        "vite": "^5.0.10",
+        "vite-plugin-dts": "^3.6.4"
+    }
+}