v1.1.0 – Rebrand GlyphFX.js to AnimText with letter/word/line animations, fixed random delay bug, added base duration & full docs

Author: yesiamrocks

CONTRIBUTING.md

@@ -0,0 +1,37 @@
+# Changelog
+
+## [1.1.0] - 2025-07-18
+
+### Initial Public Release – Rebranded from GlyphFX.js → AnimText
+
+#### Features
+
+- New name: **AnimText** – semantic, memorable, and focused on text animations.
+- Animate text by:
+  - **Letter**: `data-at-sequence`, `data-at-random`, `data-at-reverse`
+  - **Word**: `data-at-word`
+  - **Line**: `data-at-line` (supports dot or `<br>` separation)
+- Attribute-driven animation control (`data-at-*`)
+- **Custom class support** for animation effects (`ca__fx-*` from cssanimation.io)
+- Supports multiple class names for staggering effects
+- Supports **multiple delay values** via `data-at-delay`
+- Supports global override via `data-at-base-duration`
+- Includes `aria-hidden="true"` for accessibility compliance
+- Automatically injects default styles based on configured selector
+
+#### Fixes
+
+- Corrected delay logic for `random` letter animations (no duplicate delays)
+- Improved DOM clone logic to prevent detached element issues
+- Added internal caching for computed animation durations
+- Improved robustness for malformed attribute values
+
+#### Debug Mode
+
+- Set `window.__ANIMTEXT_DEBUG = true` to enable detailed logging and safe fallback warnings
+
+#### Docs & Distribution
+
+- Complete README with live examples, install instructions, and feature table
+- CDN ready via jsDelivr and unpkg
+- NPM published as `animtext`

README.md

@@ -1,15 +1,15 @@
-# 🔡 Amazing Text & Letter Animations
+# Amazing Text & Letter Animations
 
 ![Plugin](https://img.shields.io/badge/Type-Text%20Enhancer-4B9CE2?style=for-the-badge)
 ![Vanilla JS](https://img.shields.io/badge/JS-Vanilla%20JS-brightgreen?style=for-the-badge)
 ![No Dependencies](https://img.shields.io/badge/Dependencies-None-lightgrey?style=for-the-badge)
 [![Built for](https://img.shields.io/badge/Built%20for-cssanimation-blueviolet?style=for-the-badge)](https://github.com/yesiamrocks/cssanimation)
-[![npm](https://img.shields.io/npm/v/glyphfx?style=for-the-badge)](https://www.npmjs.com/package/glyphfx)
-[![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/glyphfx?style=for-the-badge)](https://cdn.jsdelivr.net/npm/glyphfx@latest/dist/)
-[![unpkg](https://img.shields.io/badge/CDN-unpkg-blue?style=for-the-badge)](https://unpkg.com/browse/glyphfx/)
-[![View Demo](https://img.shields.io/badge/🎬%20Live-Demo-green?style=for-the-badge)](https://yesiamrocks.github.io/GlyphFX/)
+[![npm](https://img.shields.io/npm/v/animtext?style=for-the-badge)](https://www.npmjs.com/package/animtext)
+[![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/animtext?style=for-the-badge)](https://cdn.jsdelivr.net/npm/animtext@latest/dist/)
+[![unpkg](https://img.shields.io/badge/CDN-unpkg-blue?style=for-the-badge)](https://unpkg.com/browse/animtext/)
+[![View Demo](https://img.shields.io/badge/🎬%20Live-Demo-green?style=for-the-badge)](https://yesiamrocks.github.io/animtext/)
 
-`glyphfx.js` plugin is a lightweight, CSS-only enhancement script that brings **letter-by-letter, word-by-word, and line-by-line** animations to your projects. It's designed to work seamlessly with [cssanimation](https://cssanimation.io), for robust and customizable text effects.
+**AnimText** is a lightweight JavaScript enhancer for animating text with **letter-by-letter, word-by-word, and line-by-line** animations to your projects. It's designed to work seamlessly with [{css}animation](https://github.com/yesiamrocks/cssanimation), for robust and customizable text effects.
 
 ## Key Features
 
@@ -20,106 +20,118 @@
 - Random & Reverse Effects: Get creative with animation order.
 - Smart Handling: Safely handles whitespace and provides animation class fallbacks.
 
-## Letter Animation Installation
+## Installation
 
 ### Via NPM
 
 ```bash
-npm install glyphfx
+npm install animtext
 ```
 
-For plain HTML, include the `glyphfx.js`, plugin just before your closing `</body>` tag:
+For plain HTML, include the `animtext.js`, plugin just before your closing `</body>` tag:
 
 ### JS Initialization
 
 ```js
-import glyphfx from "glyphfx";
+import animtext from "animtext";
 
-glyphfx.init();
+animtext.init();
 // or with debug mode
-glyphfx.init({ dev: true });
+animtext.init({ dev: true });
 ```
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/glyphfx@latest/dist/glyphfx.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/animtext@latest/dist/animtext.min.js"></script>
 ```
 
-GlyphFX requires @hellouxpavel/cssanimation to function. It provides the actual animation classes (like ca\_\_fx-fadeIn) used in the HTML examples.
+animtext requires @hellouxpavel/cssanimation to function. It provides the actual animation classes (like ca\_\_fx-fadeIn) used in the HTML examples.
 
 ```bash
 npm install @hellouxpavel/cssanimation
 ```
 
+## Getting Started
+
+```html
+<h1 class="cssanimation" data-at-sequence="ca__fx-fadeIn">Hello AnimText!</h1>
+```
+
+This will animate the letters of the heading using your chosen animation class.
+
 ## Letter Animation Usage
 
-Every animated text block needs the `.cssanimation` class along with a `gf__*` attribute to define how it animates.
+Every animated text block needs the `.cssanimation` class along with a `data-at-*` attribute to define how it animates.
 
 ### 1. Letter-by-Letter Animation
 
 Animate text one letter at a time with different sequencing styles:
 
-**➜ Sequential (in order):** `gf__sequence`
+**➜ Sequential (in order):** `data-at-sequence`
 
 ```html
-<h1 class="cssanimation" gf__sequence="ca__fx-fadeIn">Letters Animate</h1>
+<h1 class="cssanimation" data-at-sequence="ca__fx-fadeIn">Letters Animate</h1>
 ```
 
-**➜ Randomized order** `gf__random`
+**➜ Randomized order** `data-at-random`
 
 ```html
-<p class="cssanimation" gf__random="ca__fx-bounceInTop">Randomized entry!</p>
+<p class="cssanimation" data-at-random="ca__fx-bounceInTop">
+  Randomized entry!
+</p>
 ```
 
-**➜ Reverse (last letter first)** `gf__reverse`
+**➜ Reverse (last letter first)** `data-at-reverse`
 
 ```html
-<h3 class="cssanimation" gf__reverse="ca__fx-moveFromTop">Backwards Flow</h3>
+<h3 class="cssanimation" data-at-reverse="ca__fx-moveFromTop">
+  Backwards Flow
+</h3>
 ```
 
 ---
 
-### 2. Word-by-Word Animation `gf__word`
+### 2. Word-by-Word Animation `data-at-word`
 
 ```html
-<h2 class="cssanimation" gf__word="ca__fx-fadeIn">
+<h2 class="cssanimation" data-at-word="ca__fx-fadeIn">
   Each word animates uniquely
 </h2>
 ```
 
-### 3. Line-by-line Animation `gf__line`
+### 3. Line-by-line Animation `data-at-line`
 
 ```html
-<p class="cssanimation" gf__line="ca__fx-fadeIn">
+<p class="cssanimation" data-at-line="ca__fx-fadeIn">
   First line<br />
   Second line<br />
   Third line
 </p>
 ```
 
-Split lines by periods `"."` or by `<br>` / `\n`. Use `gf__separator="dot"` for period separation.
+Split lines by periods `"."` or by `<br>` / `\n`. Use `data-at-separator="dot"` for period separation.
 
 ```html
-<p class="cssanimation" gf__line="ca__fx-fadeIn" gf__separator="dot">
+<p class="cssanimation" data-at-line="ca__fx-fadeIn" data-at-separator="dot">
   Step 1. Step 2. Step 3.
 </p>
 ```
 
-You don't need to add `gf__separator` for `<br>` or newlines, this is the **default behavior**.
+You don't need to add `data-at-separator` for `<br>` or newlines, this is the **default behavior**.
 
 **🔥You can assign different animation classes and delays to each word and line! Space-separate your class names and delay values.**
 
 ```html
 <h2
   class="cssanimation"
-  gf__word="ca__fx-fadeIn ca__fx-moveFromTop ca__fx-moveFromBottom ca__fx-moveFromRight">
+  data-at-word="ca__fx-fadeIn ca__fx-moveFromTop ca__fx-moveFromBottom ca__fx-moveFromRight">
   Each word animates uniquely
 </h2>
 ```
 
 ```html
 <p
   class="cssanimation"
-  gf__line="ca__fx-blurIn ca__fx-bounceFromTop ca__fx-bounceX">
+  data-at-line="ca__fx-blurIn ca__fx-bounceFromTop ca__fx-bounceX">
   First line<br />
   Second line<br />
   Third line
@@ -128,69 +140,72 @@ You don't need to add `gf__separator` for `<br>` or newlines, this is the **defa
 
 [Check out this Text & Letter Animations Preview Tool to easily generate the animation code for your text.](https://yesiamrocks.github.io/cssanimation/text-animation.html)
 
-## `gf__delay` in Detail
+## `data-at-delay` in Detail
 
-The `gf__delay` attribute specifies the delay before each animated unit (letter, word, or line) begins its animation. The values are in milliseconds (ms).
+The `data-at-delay` attribute specifies the delay before each animated unit (letter, word, or line) begins its animation. The values are in milliseconds (ms).
 
 **Single Value:** If you provide a single value, that delay will be applied to every unit.
 
 ```html
-<h1 class="cssanimation" gf__sequence="ca__fx-fadeIn" gf__delay="100">
+<h1 class="cssanimation" data-at-sequence="ca__fx-fadeIn" data-at-delay="100">
   Each letter delays by 100ms
 </h1>
 ```
 
 **Multiple Values:** This is where it gets powerful! You can provide multiple space-separated values. These values will be applied sequentially to each unit. If you provide fewer delay values than there are units, the last delay value will repeat for the remaining units.
 
 ```html
-<h2 class="cssanimation" gf__word="ca__fx-fadeIn" gf__delay="0 200 400">
+<h2 class="cssanimation" data-at-word="ca__fx-fadeIn" data-at-delay="0 200 400">
   First word, then 200ms, then 400ms, then 400ms
 </h2>
 ```
 
-This allows you to create rhythmic or staggered entry effects easily, like `gf__delay="50 100 100"` as in your example. The first unit gets 50ms delay, and all subsequent units get 100ms delay.
+This allows you to create rhythmic or staggered entry effects easily, like `data-at-delay="50 100 100"` as in your example. The first unit gets 50ms delay, and all subsequent units get 100ms delay.
 
-## `gf__base-duration` in Detail
+## `data-at-base-duration` in Detail
 
-The `gf__base-duration` attribute provides a simple way to set a global default animation duration for all units (letters, words, or lines) in milliseconds (ms).
+The `data-at-base-duration` attribute provides a simple way to set a global default animation duration for all units (letters, words, or lines) in milliseconds (ms).
 
 This value is used to explicitly set the duration for all units, overriding any `animation-duration` or `transition-duration` that might be detected from the CSS classes applied to the element.
 
 ```html
-<h3 class="cssanimation" gf__sequence="ca__fx-fadeIn" gf__base-duration="750">
+<h3
+  class="cssanimation"
+  data-at-sequence="ca__fx-fadeIn"
+  data-at-base-duration="750">
   Global base duration
 </h3>
 ```
 
 **Precedence:**
 
-1. `gf__base-duration` (global override)
-2. CSS-defined duration (auto-detected from your animation class if `gf__base-duration` is absent)
+1. `data-at-base-duration` (global override)
+2. CSS-defined duration (auto-detected from your animation class if `data-at-base-duration` is absent)
 3. Internal library default (if no duration is specified anywhere)
 
-This means `gf__base-duration` gives you a convenient way to set a project-wide or component-wide default duration without needing to edit CSS.
+This means `data-at-base-duration` gives you a convenient way to set a project-wide or component-wide default duration without needing to edit CSS.
 
 ## Supported Attributes for Text Animations Plugin
 
-| Attribute           | Description                                                                      |
-| ------------------- | -------------------------------------------------------------------------------- |
-| `gf__sequence`      | Animates letter-by-letter, in order.                                             |
-| `gf__random`        | Animates letter-by-letter, in a randomized order.                                |
-| `gf__reverse`       | Animates letter-by-letter, in reverse order (last letter first).                 |
-| `gf__word`          | Animates word-by-word.                                                           |
-| `gf__line`          | Animates line-by-line.                                                           |
-| `gf__delay`         | Accepts one or more delay values (e.g., `100 300 500`) in milliseconds per unit. |
-| `gf__base-duration` | Optional base animation duration per unit (in ms)                                |
-| `gf__separator`     | Use `dot` to split on periods `( . )`. Default: line breaks (`<br>` or `\n`)     |
+| Attribute               | Description                                                                      |
+| ----------------------- | -------------------------------------------------------------------------------- |
+| `data-at-sequence`      | Animates letter-by-letter, in order.                                             |
+| `data-at-random`        | Animates letter-by-letter, in a randomized order.                                |
+| `data-at-reverse`       | Animates letter-by-letter, in reverse order (last letter first).                 |
+| `data-at-word`          | Animates word-by-word.                                                           |
+| `data-at-line`          | Animates line-by-line.                                                           |
+| `data-at-delay`         | Accepts one or more delay values (e.g., `100 300 500`) in milliseconds per unit. |
+| `data-at-base-duration` | Optional base animation duration per unit (in ms)                                |
+| `data-at-separator`     | Use `dot` to split on periods `( . )`. Default: line breaks (`<br>` or `\n`)     |
 
 **Example: Full Setup**
 
 ```html
 <h2
   class="cssanimation"
-  gf__word="ca__fx-fadeIn ca__fx-fadeInLeft ca__fx-slinkyDrop ca__fx-jiggleTransform"
-  gf__delay="200 300 400"
-  gf__duration="1000">
+  data-at-word="ca__fx-fadeIn ca__fx-fadeInLeft ca__fx-slinkyDrop ca__fx-jiggleTransform"
+  data-at-delay="200 300 400"
+  data-at-duration="1000">
   Animate each word smoothly
 </h2>
 ```
@@ -201,6 +216,6 @@ This means `gf__base-duration` gives you a convenient way to set a project-wide
 - You can provide fewer classes or delay values than units; the last value will simply repeat for the remaining units, making it easy to apply a pattern.
 - If you pass more classes or values than needed, the extra elements are skipped, and a warning might be logged to your console to help with debugging.
 - Delay and duration values are parsed safely; non-numeric strings will fall back to default behaviors to prevent errors.
-- Animation duration is determined in this order of precedence: `gf__base-duration` > CSS-detected duration > internal default.
+- Animation duration is determined in this order of precedence: `data-at-base-duration` > CSS-detected duration > internal default.
 
 [← Return to the main README](./README.md)

dist/glyphfx.js dist/animtext.jsdist/glyphfx.js renamed to dist/animtext.js

@@ -1,11 +1,11 @@
 /*!
- * glyphfx.js
- * Title: glyphfx
+ * animtext.js
+ * Title: animtext
  * Description: A lightweight JavaScript utility to split text into letters with animation-ready wrappers. Perfect for GSAP, cssanimation, or any custom animation workflow.
  *
- * Version: 1.0.2
+ * Version: 1.1.0
  * Author: Shafayetul Islam Pavel
- * Website: https://github.com/yesiamrocks/glyphfx#readme
+ * Website: https://github.com/yesiamrocks/animtext#readme
  * LinkedIn: https://www.linkedin.com/in/shafayetul/
  * Email: hello@cssanimation.io
  * GitHub: https://github.com/yesiamrocks

dist/glyphfx.min.js dist/animtext.min.jsdist/glyphfx.min.js renamed to dist/animtext.min.js

@@ -1,11 +1,11 @@
 /*!
- * glyphfx.js
- * Title: glyphfx
+ * animtext.js
+ * Title: animtext
  * Description: A lightweight JavaScript utility to split text into letters with animation-ready wrappers. Perfect for GSAP, cssanimation, or any custom animation workflow.
  *
- * Version: 1.0.2
+ * Version: 1.1.0
  * Author: Shafayetul Islam Pavel
- * Website: https://github.com/yesiamrocks/glyphfx#readme
+ * Website: https://github.com/yesiamrocks/animtext#readme
  * LinkedIn: https://www.linkedin.com/in/shafayetul/
  * Email: hello@cssanimation.io
  * GitHub: https://github.com/yesiamrocks