@hortonstudio/main 1.2.24 → 1.2.26

package/.claude/settings.local.json

@@ -33,7 +33,9 @@
       "Bash(ls:*)",
       "Bash(cp:*)",
       "Bash(git remote remove:*)",
-      "Bash(tree:*)"
+      "Bash(tree:*)",
+      "Bash(grep:*)",
+      "Bash(git reset:*)"
     ],
     "deny": []
   }

package/animations/hero.js

@@ -174,45 +174,18 @@ export async function init() {
         return;
     }
     
-    // Check if there's a persistent config stored globally
-    const api = window[API_NAME] || {};
-    console.log('🔄 Hero animations init - full API object:', api);
-    console.log('🔄 Hero animations init - _persistentConfigs:', api._persistentConfigs);
-    console.log('🔄 Hero animations init - checking persistent config:', api._persistentConfigs?.heroAnimations);
-    
-    // Ensure _persistentConfigs exists
-    if (!api._persistentConfigs) {
-        api._persistentConfigs = {};
-        console.log('🏗️ Hero animations - created _persistentConfigs object');
-    }
-    
-    if (api._persistentConfigs?.heroAnimations) {
-        console.log('📝 Hero animations - applying persistent config:', api._persistentConfigs.heroAnimations);
-        // Merge persistent config into current config
-        updateConfig(api._persistentConfigs.heroAnimations);
-        console.log('✅ Hero animations - config after merge:', config);
-    }
-    
     if (prefersReducedMotion()) {
         // For reduced motion, just show elements without animation
         showHeroElementsWithoutAnimation();
         
         // Still expose the API for consistency
-        api.heroAnimations = {
+        window[API_NAME] = window[API_NAME] || {};
+        window[API_NAME].heroAnimations = {
             config: config,
-            updateConfig: (newConfig) => {
-                console.log('🔧 Hero animations - updateConfig called with:', newConfig);
-                updateConfig(newConfig);
-                // Store config in persistent storage for restart persistence
-                api._persistentConfigs = api._persistentConfigs || {};
-                api._persistentConfigs.heroAnimations = { ...config };
-                console.log('💾 Hero animations - stored persistent config:', api._persistentConfigs.heroAnimations);
-                console.log('💾 Hero animations - full _persistentConfigs after store:', api._persistentConfigs);
-            },
+            updateConfig: updateConfig,
             start: startHeroAnimations,
             kill: killHeroAnimations,
             restart: () => {
-                console.log('🔄 Hero animations - restart called');
                 killHeroAnimations();
                 startHeroAnimations();
             }
@@ -270,7 +243,7 @@ export async function init() {
     headingElements.forEach(el => {
         if (el.firstElementChild) {
             // Get the heroconfig attribute to determine animation type
-            const heroConfig = el.getAttribute('data-hs-heroconfig') || 'word'; // default to word if not specified
+            const heroConfig = el.getAttribute('data-hs-heroconfig') || 'line'; // default to line if not specified
             
             if (heroConfig === 'appear') {
                 headingAppearElements.push(el.firstElementChild);
@@ -346,7 +319,7 @@ export async function init() {
         if (heading.length > 0) {
             headingSplitElements.forEach((parent, index) => {
                 const textElement = heading[index];
-                const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
+                const splitType = parent.getAttribute('data-hs-heroconfig') || 'line';
                 
                 let splitConfig = {};
                 let elementsClass = '';
@@ -610,25 +583,87 @@ export async function init() {
         });
     
     // API exposure
-    api.heroAnimations = {
+    window[API_NAME] = window[API_NAME] || {};
+    window[API_NAME].heroAnimations = {
         config: config,
-        updateConfig: (newConfig) => {
-            console.log('🔧 Hero animations - updateConfig called with:', newConfig);
-            updateConfig(newConfig);
-            // Store config in persistent storage for restart persistence
-            api._persistentConfigs = api._persistentConfigs || {};
-            api._persistentConfigs.heroAnimations = { ...config };
-            console.log('💾 Hero animations - stored persistent config:', api._persistentConfigs.heroAnimations);
-            console.log('💾 Hero animations - full _persistentConfigs after store:', api._persistentConfigs);
-        },
+        updateConfig: updateConfig,
         start: startHeroAnimations,
         kill: killHeroAnimations,
         restart: () => {
-            console.log('🔄 Hero animations - restart called');
             killHeroAnimations();
             startHeroAnimations();
         }
     };
     
+    // Add resize listener for responsive line splits
+    let heroResizeTimeout;
+    window.addEventListener('resize', () => {
+        clearTimeout(heroResizeTimeout);
+        heroResizeTimeout = setTimeout(() => {
+            // Only refresh line splits, not chars or words
+            const hasLineSplits = headingSplits.some(split => split.elementsClass === 'lines') || 
+                                 subheadingSplits.some(split => split.elementsClass === 'lines');
+            
+            if (hasLineSplits) {
+                // Kill current line splits
+                headingSplits.forEach((split, index) => {
+                    if (split.elementsClass === 'lines' && split.revert) {
+                        split.revert();
+                    }
+                });
+                
+                subheadingSplits.forEach((split, index) => {
+                    if (split.elementsClass === 'lines' && split.revert) {
+                        split.revert();
+                    }
+                });
+                
+                // Re-initialize line splits after resize
+                document.fonts.ready.then(() => {
+                    // Re-split line elements
+                    headingSplitElements.forEach((parent, index) => {
+                        const textElement = heading[index];
+                        const splitType = parent.getAttribute('data-hs-heroconfig') || 'line';
+                        
+                        if (splitType === 'line') {
+                            const splitConfig = {
+                                type: "lines",
+                                mask: "lines",
+                                linesClass: "line"
+                            };
+                            
+                            const split = new SplitText(textElement, splitConfig);
+                            split.elementsClass = 'lines';
+                            headingSplits[index] = split;
+                            
+                            gsap.set(split.lines, { yPercent: 0 });
+                        }
+                    });
+                    
+                    subheadingSplitElements.forEach((parent, index) => {
+                        const textElement = subheading[index];
+                        const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
+                        
+                        if (splitType === 'line') {
+                            const splitConfig = {
+                                type: "lines",
+                                mask: "lines",
+                                linesClass: "line"
+                            };
+                            
+                            const split = new SplitText(textElement, splitConfig);
+                            split.elementsClass = 'lines';
+                            subheadingSplits[index] = split;
+                            
+                            gsap.set(split.lines, { yPercent: 0 });
+                        }
+                    });
+                });
+            }
+            
+            ScrollTrigger.refresh();
+        }, 100);
+    });
+    
     return { result: 'anim-hero initialized' };
 }

package/animations/text.js

@@ -11,7 +11,7 @@ const config = {
     },
     wordSplit: {
         duration: 1.5,
-        stagger: 0.075,
+        stagger: 0.05,
         yPercent: 110,
         ease: "power4.out",
         start: "top 97%"
@@ -25,7 +25,7 @@ const config = {
     },
     charSplit: {
         duration: 1.2,
-        stagger: 0.03,
+        stagger: 0.015,
         yPercent: 110,
         ease: "power4.out",
         start: "top 97%"
@@ -115,7 +115,7 @@ const CharSplitAnimations = {
         
         elements.forEach((textElement) => {
             const split = SplitText.create(textElement, {
-                type: "chars",
+                type: "words,chars",
                 mask: "chars",
                 charsClass: "char",
             });
@@ -343,25 +343,6 @@ async function initAnimations() {
 }
 
 export async function init() {
-    // Check if there's a persistent config stored globally
-    const api = window[API_NAME] || {};
-    console.log('🔄 Text animations init - full API object:', api);
-    console.log('🔄 Text animations init - _persistentConfigs:', api._persistentConfigs);
-    console.log('🔄 Text animations init - checking persistent config:', api._persistentConfigs?.textAnimations);
-    
-    // Ensure _persistentConfigs exists
-    if (!api._persistentConfigs) {
-        api._persistentConfigs = {};
-        console.log('🏗️ Text animations - created _persistentConfigs object');
-    }
-    
-    if (api._persistentConfigs?.textAnimations) {
-        console.log('📝 Text animations - applying persistent config:', api._persistentConfigs.textAnimations);
-        // Merge persistent config into current config
-        updateConfig(api._persistentConfigs.textAnimations);
-        console.log('✅ Text animations - config after merge:', config);
-    }
-    
     if (prefersReducedMotion()) {
         // For reduced motion, just show elements without animation
         showElementsWithoutAnimation();
@@ -370,23 +351,35 @@ export async function init() {
         initAnimations();
     }
     
-    window.addEventListener('resize', ScrollTrigger.refresh());
+    let resizeTimeout;
+    window.addEventListener('resize', () => {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+            // Kill and restart line split animations on resize
+            const lineSplitElements = document.querySelectorAll(".a-line-split > *:first-child");
+            lineSplitElements.forEach((textElement) => {
+                if (textElement.splitTextInstance) {
+                    textElement.splitTextInstance.revert();
+                    delete textElement.splitTextInstance;
+                }
+            });
+            
+            // Re-initialize line splits after resize
+            LineSplitAnimations.initial().then(() => {
+                LineSplitAnimations.animate();
+            });
+            
+            ScrollTrigger.refresh();
+        }, 100);
+    });
 
+    const api = window[API_NAME] || {};
     api.textAnimations = {
         config: config,
-        updateConfig: (newConfig) => {
-            console.log('🔧 Text animations - updateConfig called with:', newConfig);
-            updateConfig(newConfig);
-            // Store config in persistent storage for restart persistence
-            api._persistentConfigs = api._persistentConfigs || {};
-            api._persistentConfigs.textAnimations = { ...config };
-            console.log('💾 Text animations - stored persistent config:', api._persistentConfigs.textAnimations);
-            console.log('💾 Text animations - full _persistentConfigs after store:', api._persistentConfigs);
-        },
+        updateConfig: updateConfig,
         start: startTextAnimations,
         kill: killTextAnimations,
         restart: () => {
-            console.log('🔄 Text animations - restart called');
             killTextAnimations();
             startTextAnimations();
         }

package/configure-example.js

@@ -0,0 +1,32 @@
+function configure() {
+  // Check if hsmain is loaded AND the specific animation modules are available
+  if (!window.hsmain?.loaded || 
+      !window.hsmain?.textAnimations?.updateConfig || 
+      !window.hsmain?.heroAnimations?.updateConfig) {
+    setTimeout(configure, 10);
+    return;
+  }
+  
+  const api = window.hsmain;
+  
+  try {
+    api.textAnimations.updateConfig({
+      // your text animation config
+    });
+    
+    api.heroAnimations.updateConfig({
+      headingSplit: {
+        // your hero animation config
+      }
+    });
+    
+    api.textAnimations.restart();
+    api.heroAnimations.restart();
+  } catch (error) {
+    console.warn('Animation configuration failed:', error);
+    // Retry after a short delay if needed
+    setTimeout(configure, 50);
+  }
+}
+
+configure();

package/index.js

@@ -1,4 +1,4 @@
-// Version: 1.2.24
+// Version:1.2.26
 
 const API_NAME = 'hsmain';
 
@@ -109,18 +109,12 @@ const initializeHsMain = async () => {
 
   const readyCallbacks = [];
 
-  // Initialize persistent config storage first, preserving any existing configs
-  const existingConfigs = window[API_NAME]?._persistentConfigs || {};
-  console.log('🏗️ Initializing main API - existing persistent configs:', existingConfigs);
-  
   window[API_NAME] = {
     scripts,
     modules: {},
     process: new Set(),
     load: loadModule,
     loaded: false,
-    // Persistent config storage
-    _persistentConfigs: existingConfigs,
     push(...items) {
       for (const [moduleName, callback] of items) {
         if (typeof callback === 'function') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.2.24",
+  "version": "1.2.26",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",