npm - typography-toolkit - Versions diffs - 1.0.0 - Mend

typography-toolkit 1.0.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.

Files changed (5) hide show

package/README.md +207 -0
package/dist/typography-toolkit.es.js +210 -0
package/dist/typography-toolkit.iife.js +1 -0
package/dist/typography-toolkit.umd.js +1 -0
package/package.json +39 -0

package/README.md ADDED Viewed

@@ -0,0 +1,207 @@
+# Typography Toolkit
+Letter-by-letter text animations with proximity-based disintegration effects. Create animated text where each letter moves independently with base animations (falling, splitting, glitching, floating) and reacts to cursor proximity.
+## Features
+- **Letter-by-Letter Control** - Each letter is a separate DOM element with independent animations
+- **Base Animations** - Falling, splitting, glitching, and floating animations
+- **Proximity-Based Disintegration** - Letters react to cursor without direct interaction
+- **DOM-Based** - Uses CSS transforms (GPU-accelerated), accessible, and styleable
+- **Modular & Extensible** - Easy to add new animation types and behaviors
+- **Zero Dependencies** - Vanilla TypeScript/JavaScript
+## Installation
+### npm
+```bash
+npm install typography-toolkit
+```
+### CDN (UMD)
+```html
+<script src="https://unpkg.com/typography-toolkit/dist/typography-toolkit.umd.js"></script>
+<script>
+  const { AnimatedText } = TypographyToolkit;
+</script>
+```
+### ES Modules
+```javascript
+import { AnimatedText } from 'typography-toolkit';
+```
+## Quick Start
+### Basic Usage
+```javascript
+import { AnimatedText } from 'typography-toolkit';
+const text = new AnimatedText({
+  text: 'HELLO',
+  container: document.body,
+  animations: ['falling', 'glitching']
+});
+// Clean up when done
+setTimeout(() => text.destroy(), 10000);
+```
+### With Disintegration
+```javascript
+const text = new AnimatedText({
+  text: 'FEED ME',
+  container: document.body,
+  animations: ['falling', 'splitting'],
+  disintegration: {
+    enabled: true,
+    radius: 80,
+    behaviors: ['fall-away', 'explode'],
+    strength: 0.8
+  },
+  style: {
+    fontFamily: 'Arial',
+    fontSize: 24,
+    color: 'rgba(60, 60, 60, 0.8)'
+  }
+});
+```
+### Advanced Usage
+```javascript
+const text = new AnimatedText({
+  text: 'ANIMATED TEXT',
+  container: document.getElementById('container'),
+  animations: ['falling', 'splitting', 'glitching', 'floating'],
+  cycle: true, // Cycle through animation types per letter
+  speed: 1.5, // Animation speed multiplier
+  amplitude: 1.2, // Animation amplitude multiplier
+  disintegration: {
+    enabled: true,
+    radius: 100,
+    behaviors: ['fall-away', 'split-apart', 'explode'],
+    strength: 1.0
+  },
+  style: {
+    fontFamily: 'Georgia, serif',
+    fontSize: 32,
+    color: 'rgba(100, 50, 50, 0.9)',
+    fontWeight: 'bold'
+  },
+  position: {
+    x: 100,
+    y: 200
+  },
+  fadeOut: 8000 // Auto-destroy after 8 seconds
+});
+```
+## API Reference
+### `AnimatedText`
+Main class for creating animated text.
+#### Constructor Options
+```typescript
+interface AnimatedTextOptions {
+  text: string;                    // Text to animate
+  container: HTMLElement;           // Container element
+  animations?: AnimationType[];    // Animation types (default: all)
+  cycle?: boolean;                  // Cycle through types per letter (default: true)
+  speed?: number;                   // Speed multiplier (default: 1.0)
+  amplitude?: number;               // Amplitude multiplier (default: 1.0)
+  disintegration?: DisintegrationOptions; // Disintegration config
+  style?: StyleOptions;             // CSS style options
+  position?: { x?: number; y?: number }; // Position (default: random)
+  fadeOut?: number;                 // Auto-destroy after ms (default: 0 = never)
+}
+```
+#### Methods
+- `destroy()` - Clean up and remove the animated text
+- `getElement()` - Get the text container element
+### Animation Types
+- `'falling'` - Letters drift downward
+- `'splitting'` - Letters drift outward horizontally
+- `'glitching'` - Letters randomly shift position
+- `'floating'` - Letters slowly rise
+### Disintegration Behaviors
+- `'fall-away'` - Letters drop down when cursor approaches
+- `'split-apart'` - Letters spread horizontally
+- `'explode'` - Letters scatter in all directions
+### Style Options
+```typescript
+interface StyleOptions {
+  fontFamily?: string;
+  fontSize?: number;
+  color?: string;
+  fontWeight?: string;
+}
+```
+## Examples
+### Simple Falling Text
+```javascript
+const text = new AnimatedText({
+  text: 'FALLING',
+  container: document.body,
+  animations: ['falling']
+});
+```
+### Glitching Text with Disintegration
+```javascript
+const text = new AnimatedText({
+  text: 'GLITCH',
+  container: document.body,
+  animations: ['glitching'],
+  disintegration: {
+    enabled: true,
+    radius: 60,
+    behaviors: ['explode']
+  }
+});
+```
+### Multiple Animation Types
+```javascript
+const text = new AnimatedText({
+  text: 'VARIED',
+  container: document.body,
+  animations: ['falling', 'splitting', 'glitching', 'floating'],
+  cycle: true // Each letter uses different animation
+});
+```
+## Performance
+- Uses `requestAnimationFrame` for smooth 60fps animations
+- CSS transforms are GPU-accelerated
+- Efficient proximity calculations
+- Automatic cleanup on destroy
+## Browser Support
+- Modern browsers with ES2020 support
+- Requires `requestAnimationFrame` API
+- CSS transforms support
+## License
+MIT

package/dist/typography-toolkit.es.js ADDED Viewed

@@ -0,0 +1,210 @@
+class y {
+  update(t, o, s, i = {}) {
+    const e = i.speed || 1, a = i.amplitude || 20, l = o * 0.2, r = (s * 10 * e + l * 5) % a - a / 2;
+    return {
+      ...t,
+      y: r
+    };
+  }
+}
+class x {
+  update(t, o, s, i = {}) {
+    const e = i.speed || 1, a = i.amplitude || 4, l = o * 0.2, h = Math.sin(s * 0.5 * e + l) * a;
+    return {
+      ...t,
+      x: h
+    };
+  }
+}
+class C {
+  constructor() {
+    this.lastUpdate = 0, this.glitchX = 0, this.glitchY = 0, this.glitchRot = 0;
+  }
+  update(t, o, s, i = {}) {
+    const e = i.amplitude || 3;
+    return s - this.lastUpdate > 0.1 && (this.glitchX = (Math.random() - 0.5) * e, this.glitchY = (Math.random() - 0.5) * (e * 0.67), this.glitchRot = (Math.random() - 0.5) * e, this.lastUpdate = s), {
+      ...t,
+      x: this.glitchX,
+      y: this.glitchY,
+      rotation: this.glitchRot
+    };
+  }
+}
+class T {
+  update(t, o, s, i = {}) {
+    const e = i.speed || 1, a = i.amplitude || 15, l = o * 0.2, r = -((s * 8 * e + l * 4) % a - a / 2);
+    return {
+      ...t,
+      y: r
+    };
+  }
+}
+function b(c, t) {
+  const { x: o, y: s, rotation: i, scale: e, opacity: a } = t;
+  c.style.transform = `translate(${o}px, ${s}px) rotate(${i}deg) scale(${e})`, c.style.opacity = a.toString();
+}
+function v(c, t, o, s, i, e) {
+  if (!e.enabled)
+    return {
+      state: { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1 },
+      applied: !1
+    };
+  const a = e.radius || 80, l = e.strength || 1, h = e.behaviors || ["fall-away", "split-apart", "explode"], r = o - c, d = s - t, m = Math.sqrt(r * r + d * d);
+  if (m >= a)
+    return {
+      state: { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1 },
+      applied: !1
+    };
+  const n = (1 - m / a) * l, u = Math.atan2(d, r), M = h[i % h.length];
+  let p;
+  switch (M) {
+    case "fall-away":
+      const w = Math.cos(u) * n * 20, A = Math.sin(u) * n * 40 + n * 30;
+      p = {
+        x: w,
+        y: A,
+        rotation: n * 15,
+        scale: 1,
+        opacity: 1 - n * 0.6
+      };
+      break;
+    case "split-apart":
+      const f = i % 2 === 0 ? 1 : -1;
+      p = {
+        x: f * n * 50,
+        y: (Math.random() - 0.5) * n * 10,
+        rotation: n * 10 * f,
+        scale: 1,
+        opacity: 1 - n * 0.6
+      };
+      break;
+    case "explode":
+      const g = u + (Math.random() - 0.5) * 0.5;
+      p = {
+        x: Math.cos(g) * n * 40,
+        y: Math.sin(g) * n * 40,
+        rotation: n * 30,
+        scale: 1 + n * 0.4,
+        opacity: 1 - n * 0.6
+      };
+      break;
+    default:
+      p = { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1 };
+  }
+  return {
+    state: p,
+    applied: !0
+  };
+}
+class F {
+  constructor(t) {
+    this.letters = [], this.animationFrame = null, this.mouseX = 0, this.mouseY = 0, this.mouseMoveHandler = null, this.startTime = Date.now(), this.isDestroyed = !1, this.container = t.container, this.animationTypes = t.animations || ["falling", "splitting", "glitching", "floating"], this.cycle = t.cycle !== !1, this.speed = t.speed || 1, this.amplitude = t.amplitude || 1, this.disintegration = t.disintegration || { enabled: !1 }, this.style = t.style || {}, this.fadeOut = t.fadeOut || 0, this.textContainer = document.createElement("div"), this.textContainer.style.position = "absolute", this.textContainer.style.pointerEvents = "none", this.textContainer.style.zIndex = "1", t.position && (t.position.x !== void 0 && (this.textContainer.style.left = `${t.position.x}px`), t.position.y !== void 0 && (this.textContainer.style.top = `${t.position.y}px`)), this.createLetters(t.text), this.setupMouseTracking(), this.startAnimation(), this.fadeOut > 0 && setTimeout(() => this.destroy(), this.fadeOut);
+  }
+  createLetters(t) {
+    t.toUpperCase().split("").forEach((s, i) => {
+      if (s === " ") {
+        const l = document.createTextNode(" ");
+        this.textContainer.appendChild(l);
+        return;
+      }
+      const e = document.createElement("span");
+      e.className = "animated-letter", e.textContent = s, e.dataset.index = i.toString(), e.dataset.char = s, this.applyStyle(e), e.style.display = "inline-block", e.style.position = "relative", e.style.transition = "transform 0.1s ease-out", this.textContainer.appendChild(e);
+      const a = e.getBoundingClientRect();
+      this.letters.push({
+        element: e,
+        index: i,
+        char: s,
+        baseX: a.left,
+        baseY: a.top
+      });
+    }), this.container.appendChild(this.textContainer);
+  }
+  applyStyle(t) {
+    this.style.fontFamily && (t.style.fontFamily = this.style.fontFamily), this.style.fontSize && (t.style.fontSize = `${this.style.fontSize}px`), this.style.color && (t.style.color = this.style.color), this.style.fontWeight && (t.style.fontWeight = this.style.fontWeight);
+  }
+  setupMouseTracking() {
+    this.disintegration.enabled && (this.mouseMoveHandler = (t) => {
+      this.mouseX = t.clientX, this.mouseY = t.clientY;
+    }, document.addEventListener("mousemove", this.mouseMoveHandler));
+  }
+  startAnimation() {
+    const t = () => {
+      if (this.isDestroyed) return;
+      const o = (Date.now() - this.startTime) * 1e-3;
+      this.letters.forEach((s, i) => {
+        const e = s.element.getBoundingClientRect(), a = e.left + e.width / 2, l = e.top + e.height / 2, h = v(
+          a,
+          l,
+          this.mouseX,
+          this.mouseY,
+          i,
+          this.disintegration
+        );
+        let r;
+        if (h.applied)
+          r = h.state;
+        else {
+          const d = this.getAnimationType(i);
+          r = this.getAnimation(d).update(
+            { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1 },
+            i,
+            o,
+            {
+              speed: this.speed,
+              amplitude: this.amplitude * (d === "falling" || d === "floating" ? 20 : 4)
+            }
+          );
+        }
+        b(s.element, r);
+      }), this.animationFrame = requestAnimationFrame(t);
+    };
+    this.animationFrame = requestAnimationFrame(t);
+  }
+  getAnimationType(t) {
+    return this.cycle ? this.animationTypes[t % this.animationTypes.length] : this.animationTypes[0];
+  }
+  getAnimation(t) {
+    switch (t) {
+      case "falling":
+        return new y();
+      case "splitting":
+        return new x();
+      case "glitching":
+        return new C();
+      case "floating":
+        return new T();
+      default:
+        return new y();
+    }
+  }
+  /**
+   * Destroy the animated text instance
+   */
+  destroy() {
+    this.isDestroyed || (this.isDestroyed = !0, this.animationFrame !== null && cancelAnimationFrame(this.animationFrame), this.mouseMoveHandler && document.removeEventListener("mousemove", this.mouseMoveHandler), this.textContainer.style.transition = "opacity 3s ease", this.textContainer.style.opacity = "0", setTimeout(() => {
+      this.textContainer.parentNode && this.textContainer.parentNode.removeChild(this.textContainer);
+    }, 3e3));
+  }
+  /**
+   * Get the text container element
+   */
+  getElement() {
+    return this.textContainer;
+  }
+}
+typeof window < "u" && (window.TypographyToolkit = {
+  AnimatedText: F,
+  FallingAnimation: y,
+  SplittingAnimation: x,
+  GlitchingAnimation: C,
+  FloatingAnimation: T,
+  calculateDisintegration: v
+});
+export {
+  F as AnimatedText,
+  y as FallingAnimation,
+  T as FloatingAnimation,
+  C as GlitchingAnimation,
+  x as SplittingAnimation,
+  v as calculateDisintegration
+};

package/dist/typography-toolkit.iife.js ADDED Viewed

@@ -0,0 +1 @@

+ var TypographyToolkit=function(d){"use strict";class u{update(t,o,n,i={}){const e=i.speed||1,s=i.amplitude||20,l=o*.2,r=(n*10*e+l*5)%s-s/2;return{...t,y:r}}}class y{update(t,o,n,i={}){const e=i.speed||1,s=i.amplitude||4,l=o*.2,h=Math.sin(n*.5*e+l)*s;return{...t,x:h}}}class f{constructor(){this.lastUpdate=0,this.glitchX=0,this.glitchY=0,this.glitchRot=0}update(t,o,n,i={}){const e=i.amplitude||3;return n-this.lastUpdate>.1&&(this.glitchX=(Math.random()-.5)*e,this.glitchY=(Math.random()-.5)*(e*.67),this.glitchRot=(Math.random()-.5)*e,this.lastUpdate=n),{...t,x:this.glitchX,y:this.glitchY,rotation:this.glitchRot}}}class g{update(t,o,n,i={}){const e=i.speed||1,s=i.amplitude||15,l=o*.2,r=-((n*8*e+l*4)%s-s/2);return{...t,y:r}}}function w(c,t){const{x:o,y:n,rotation:i,scale:e,opacity:s}=t;c.style.transform=`translate(${o}px, ${n}px) rotate(${i}deg) scale(${e})`,c.style.opacity=s.toString()}function x(c,t,o,n,i,e){if(!e.enabled)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const s=e.radius||80,l=e.strength||1,h=e.behaviors||["fall-away","split-apart","explode"],r=o-c,m=n-t,C=Math.sqrt(r*r+m*m);if(C>=s)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const a=(1-C/s)*l,T=Math.atan2(m,r),b=h[i%h.length];let p;switch(b){case"fall-away":const F=Math.cos(T)*a*20,S=Math.sin(T)*a*40+a*30;p={x:F,y:S,rotation:a*15,scale:1,opacity:1-a*.6};break;case"split-apart":const A=i%2===0?1:-1;p={x:A*a*50,y:(Math.random()-.5)*a*10,rotation:a*10*A,scale:1,opacity:1-a*.6};break;case"explode":const M=T+(Math.random()-.5)*.5;p={x:Math.cos(M)*a*40,y:Math.sin(M)*a*40,rotation:a*30,scale:1+a*.4,opacity:1-a*.6};break;default:p={x:0,y:0,rotation:0,scale:1,opacity:1}}return{state:p,applied:!0}}class v{constructor(t){this.letters=[],this.animationFrame=null,this.mouseX=0,this.mouseY=0,this.mouseMoveHandler=null,this.startTime=Date.now(),this.isDestroyed=!1,this.container=t.container,this.animationTypes=t.animations||["falling","splitting","glitching","floating"],this.cycle=t.cycle!==!1,this.speed=t.speed||1,this.amplitude=t.amplitude||1,this.disintegration=t.disintegration||{enabled:!1},this.style=t.style||{},this.fadeOut=t.fadeOut||0,this.textContainer=document.createElement("div"),this.textContainer.style.position="absolute",this.textContainer.style.pointerEvents="none",this.textContainer.style.zIndex="1",t.position&&(t.position.x!==void 0&&(this.textContainer.style.left=`${t.position.x}px`),t.position.y!==void 0&&(this.textContainer.style.top=`${t.position.y}px`)),this.createLetters(t.text),this.setupMouseTracking(),this.startAnimation(),this.fadeOut>0&&setTimeout(()=>this.destroy(),this.fadeOut)}createLetters(t){t.toUpperCase().split("").forEach((n,i)=>{if(n===" "){const l=document.createTextNode(" ");this.textContainer.appendChild(l);return}const e=document.createElement("span");e.className="animated-letter",e.textContent=n,e.dataset.index=i.toString(),e.dataset.char=n,this.applyStyle(e),e.style.display="inline-block",e.style.position="relative",e.style.transition="transform 0.1s ease-out",this.textContainer.appendChild(e);const s=e.getBoundingClientRect();this.letters.push({element:e,index:i,char:n,baseX:s.left,baseY:s.top})}),this.container.appendChild(this.textContainer)}applyStyle(t){this.style.fontFamily&&(t.style.fontFamily=this.style.fontFamily),this.style.fontSize&&(t.style.fontSize=`${this.style.fontSize}px`),this.style.color&&(t.style.color=this.style.color),this.style.fontWeight&&(t.style.fontWeight=this.style.fontWeight)}setupMouseTracking(){this.disintegration.enabled&&(this.mouseMoveHandler=t=>{this.mouseX=t.clientX,this.mouseY=t.clientY},document.addEventListener("mousemove",this.mouseMoveHandler))}startAnimation(){const t=()=>{if(this.isDestroyed)return;const o=(Date.now()-this.startTime)*.001;this.letters.forEach((n,i)=>{const e=n.element.getBoundingClientRect(),s=e.left+e.width/2,l=e.top+e.height/2,h=x(s,l,this.mouseX,this.mouseY,i,this.disintegration);let r;if(h.applied)r=h.state;else{const m=this.getAnimationType(i);r=this.getAnimation(m).update({x:0,y:0,rotation:0,scale:1,opacity:1},i,o,{speed:this.speed,amplitude:this.amplitude*(m==="falling"||m==="floating"?20:4)})}w(n.element,r)}),this.animationFrame=requestAnimationFrame(t)};this.animationFrame=requestAnimationFrame(t)}getAnimationType(t){return this.cycle?this.animationTypes[t%this.animationTypes.length]:this.animationTypes[0]}getAnimation(t){switch(t){case"falling":return new u;case"splitting":return new y;case"glitching":return new f;case"floating":return new g;default:return new u}}destroy(){this.isDestroyed||(this.isDestroyed=!0,this.animationFrame!==null&&cancelAnimationFrame(this.animationFrame),this.mouseMoveHandler&&document.removeEventListener("mousemove",this.mouseMoveHandler),this.textContainer.style.transition="opacity 3s ease",this.textContainer.style.opacity="0",setTimeout(()=>{this.textContainer.parentNode&&this.textContainer.parentNode.removeChild(this.textContainer)},3e3))}getElement(){return this.textContainer}}return typeof window<"u"&&(window.TypographyToolkit={AnimatedText:v,FallingAnimation:u,SplittingAnimation:y,GlitchingAnimation:f,FloatingAnimation:g,calculateDisintegration:x}),d.AnimatedText=v,d.FallingAnimation=u,d.FloatingAnimation=g,d.GlitchingAnimation=f,d.SplittingAnimation=y,d.calculateDisintegration=x,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"}),d}({});

package/dist/typography-toolkit.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "name": "typography-toolkit",
+  "version": "1.0.0",
+  "description": "Letter-by-letter text animations with proximity-based disintegration effects",
+  "main": "dist/typography-toolkit.umd.js",
+  "module": "dist/typography-toolkit.esm.js",
+  "types": "dist/index.d.ts",
+  "unpkg": "dist/typography-toolkit.umd.js",
+  "jsdelivr": "dist/typography-toolkit.umd.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "typography",
+    "animation",
+    "text",
+    "letters",
+    "disintegration",
+    "interactive",
+    "dom"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mathonsunday/typography-toolkit.git"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "@types/node": "^20.0.0"
+  }
+}