@hortonstudio/main 1.2.8 → 1.2.11

package/animations/hero.js

@@ -1,5 +1,10 @@
 const API_NAME = 'hsmain';
 
+// Check for reduced motion preference
+const prefersReducedMotion = () => {
+    return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
+
 // Animation timing (in seconds)
 const timing = {
     announce: 0,
@@ -119,12 +124,76 @@ function startHeroAnimations() {
     init();
 }
 
+function showHeroElementsWithoutAnimation() {
+    // Simply show all hero elements without any animation or split text
+    const allHeroElements = [
+        ...document.querySelectorAll('[data-hs-hero="announce"]'),
+        ...document.querySelectorAll('[data-hs-hero="nav"]'),
+        ...document.querySelectorAll('[data-hs-hero="nav-menu"]'),
+        ...document.querySelectorAll('[data-hs-hero="nav-logo"]'),
+        ...document.querySelectorAll('[data-hs-hero="nav-button"] > *:first-child'),
+        ...document.querySelectorAll('[data-hs-hero="nav-list"] > * > *:first-child'),
+        ...document.querySelectorAll('[data-hs-hero="heading"] > *:first-child'),
+        ...document.querySelectorAll('[data-hs-hero="subheading"] > *:first-child'),
+        ...document.querySelectorAll('[data-hs-hero="tag"] > *:first-child'),
+        ...document.querySelectorAll('[data-hs-hero="button"] > *'),
+        ...document.querySelectorAll('[data-hs-hero="image"]'),
+        ...document.querySelectorAll('[data-hs-hero="appear"]')
+    ];
+    
+    allHeroElements.forEach(element => {
+        if (element) {
+            gsap.set(element, { 
+                autoAlpha: 1, 
+                opacity: 1, 
+                y: 0, 
+                yPercent: 0 
+            });
+            // Remove any pointer-events restrictions
+            element.style.pointerEvents = '';
+        }
+    });
+
+    // Restore page-wide tabbing
+    const allFocusableElements = document.querySelectorAll('[data-original-tabindex]');
+    allFocusableElements.forEach(el => {
+        el.style.pointerEvents = '';
+        const originalTabindex = el.getAttribute('data-original-tabindex');
+        if (originalTabindex === '0') {
+            el.removeAttribute('tabindex');
+        } else {
+            el.setAttribute('tabindex', originalTabindex);
+        }
+        el.removeAttribute('data-original-tabindex');
+    });
+}
+
 export async function init() {
     if (typeof window.gsap === "undefined") {
         console.error('GSAP not found - hero animations disabled');
         return;
     }
     
+    if (prefersReducedMotion()) {
+        // For reduced motion, just show elements without animation
+        showHeroElementsWithoutAnimation();
+        
+        // Still expose the API for consistency
+        window[API_NAME] = window[API_NAME] || {};
+        window[API_NAME].heroAnimations = {
+            config: config,
+            updateConfig: updateConfig,
+            start: startHeroAnimations,
+            kill: killHeroAnimations,
+            restart: () => {
+                killHeroAnimations();
+                startHeroAnimations();
+            }
+        };
+        
+        return { result: 'anim-hero initialized (reduced motion)' };
+    }
+    
     gsap.registerPlugin(ScrollTrigger, SplitText);
     
     // Element selection

package/animations/text.js

@@ -1,5 +1,10 @@
 const API_NAME = 'hsmain';
 
+// Check for reduced motion preference
+const prefersReducedMotion = () => {
+    return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
+
 const config = {
     global: {
         animationDelay: 0
@@ -62,6 +67,12 @@ function killTextAnimations() {
 }
 
 function startTextAnimations() {
+    if (prefersReducedMotion()) {
+        // For reduced motion, just show elements without animation
+        showElementsWithoutAnimation();
+        return;
+    }
+    
     setInitialStates().then(() => {
         initAnimations();
     });
@@ -73,14 +84,36 @@ function waitForFonts() {
     return document.fonts.ready;
 }
 
+function showElementsWithoutAnimation() {
+    // Simply show all text elements without any animation or split text
+    const allTextElements = [
+        ...document.querySelectorAll(".a-char-split > *:first-child"),
+        ...document.querySelectorAll(".a-word-split > *:first-child"),
+        ...document.querySelectorAll(".a-line-split > *:first-child"),
+        ...document.querySelectorAll('.a-appear')
+    ];
+    
+    allTextElements.forEach(element => {
+        gsap.set(element, { 
+            autoAlpha: 1, 
+            y: 0, 
+            yPercent: 0, 
+            opacity: 1 
+        });
+    });
+}
+
 const CharSplitAnimations = {
     async initial() {
         await waitForFonts();
         
+        if (prefersReducedMotion()) {
+            return;
+        }
+        
         const elements = document.querySelectorAll(".a-char-split > *:first-child");
         
-        elements.forEach((textElement, index) => {
-            
+        elements.forEach((textElement) => {
             const split = SplitText.create(textElement, {
                 type: "chars",
                 mask: "chars",
@@ -98,6 +131,10 @@ const CharSplitAnimations = {
     async animate() {
         await waitForFonts();
 
+        if (prefersReducedMotion()) {
+            return;
+        }
+
         document.querySelectorAll(".a-char-split > *:first-child").forEach((textElement) => {
             const chars = textElement.querySelectorAll('.char');
             const tl = gsap.timeline({
@@ -127,10 +164,13 @@ const WordSplitAnimations = {
     async initial() {
         await waitForFonts();
         
+        if (prefersReducedMotion()) {
+            return;
+        }
+        
         const elements = document.querySelectorAll(".a-word-split > *:first-child");
         
-        elements.forEach((textElement, index) => {
-            
+        elements.forEach((textElement) => {
             const split = SplitText.create(textElement, {
                 type: "words",
                 mask: "words",
@@ -148,6 +188,10 @@ const WordSplitAnimations = {
     async animate() {
         await waitForFonts();
 
+        if (prefersReducedMotion()) {
+            return;
+        }
+
         document.querySelectorAll(".a-word-split > *:first-child").forEach((textElement) => {
             const words = textElement.querySelectorAll('.word');
             const tl = gsap.timeline({
@@ -177,10 +221,13 @@ const LineSplitAnimations = {
     async initial() {
         await waitForFonts();
         
+        if (prefersReducedMotion()) {
+            return;
+        }
+        
         const elements = document.querySelectorAll(".a-line-split > *:first-child");
         
-        elements.forEach((textElement, index) => {
-            
+        elements.forEach((textElement) => {
             const split = SplitText.create(textElement, {
                 type: "lines",
                 mask: "lines",
@@ -198,6 +245,10 @@ const LineSplitAnimations = {
     async animate() {
         await waitForFonts();
 
+        if (prefersReducedMotion()) {
+            return;
+        }
+
         document.querySelectorAll(".a-line-split > *:first-child").forEach((textElement) => {
             const lines = textElement.querySelectorAll('.line');
             const tl = gsap.timeline({
@@ -227,6 +278,10 @@ const AppearAnimations = {
     async initial() {
         await waitForFonts();
 
+        if (prefersReducedMotion()) {
+            return;
+        }
+
         const elements = document.querySelectorAll('.a-appear');
         elements.forEach(element => {
             gsap.set(element, {
@@ -239,6 +294,10 @@ const AppearAnimations = {
     async animate() {
         await waitForFonts();
 
+        if (prefersReducedMotion()) {
+            return;
+        }
+
         document.querySelectorAll('.a-appear').forEach(element => {
             const tl = gsap.timeline({
                 scrollTrigger: {
@@ -284,8 +343,13 @@ async function initAnimations() {
 }
 
 export async function init() {
-    await setInitialStates();
-    initAnimations();
+    if (prefersReducedMotion()) {
+        // For reduced motion, just show elements without animation
+        showElementsWithoutAnimation();
+    } else {
+        await setInitialStates();
+        initAnimations();
+    }
     
     window.addEventListener('resize', ScrollTrigger.refresh());
 

package/index.js

@@ -1,16 +1,11 @@
-// ver 1.2.6
+// ver 1.2.11
 
 const API_NAME = 'hsmain';
 
-console.log(`🟢 ${API_NAME} v1.2.6 initializing...`);
-console.log('🔍 DOM state:', document.readyState);
-console.log('🔍 Script URL:', import.meta.url);
-
 // Main initialization function
 const initializeHsMain = () => {
     // Handle existing API
     if (window[API_NAME] && !Array.isArray(window[API_NAME]) && window[API_NAME].loaded) {
-        console.log('⚠️ API already loaded, skipping initialization');
         return;
     }
 
@@ -39,8 +34,6 @@ const initializeHsMain = () => {
 
     // Dynamic module loader (like Finsweet)
     const loadModule = async (moduleName) => {
-        console.log(`📦 Loading module: ${moduleName}`);
-        
         switch (moduleName) {
             case "data-hs-anim-text":
                 return import(new URL('./animations/text.js', import.meta.url).href);
@@ -57,7 +50,6 @@ const initializeHsMain = () => {
             case "smooth-scroll":
                 return import(new URL('./autoInit/smooth-scroll.js', import.meta.url).href);
             default:
-                console.error(`❌ Unsupported module: ${moduleName}`);
                 throw new Error(`${API_NAME} module "${moduleName}" is not supported.`);
         }
     };
@@ -83,22 +75,17 @@ const initializeHsMain = () => {
 
     // Find script tags (Finsweet approach)
     const scripts = [...document.querySelectorAll(`script[type="module"][src="${import.meta.url}"]`)];
-    console.log(`📄 Found ${scripts.length} matching script tags`);
 
     // Module loading function
     const loadHsModule = async (moduleName) => {
-        console.log(`🔄 loadHsModule called for: ${moduleName}`);
-        
         const apiInstance = window[API_NAME];
         
         // Check if already processing
         if (apiInstance.process.has(moduleName)) {
-            console.log(`⚠️ Module ${moduleName} already processing`);
             return apiInstance.modules[moduleName]?.loading;
         }
         
         // Add to processing set
-        console.log(`➕ Adding ${moduleName} to process set`);
         apiInstance.process.add(moduleName);
         
         // Create module object
@@ -112,14 +99,9 @@ const initializeHsMain = () => {
         });
         
         try {
-            console.log(`📦 Importing ${moduleName}...`);
             const { init, version } = await loadModule(moduleName);
-            console.log(`✅ ${moduleName} imported, version: ${version}`);
-            
-            console.log(`🔧 Initializing ${moduleName}...`);
             const initResult = await init();
             const { result, destroy } = initResult || {};
-            console.log(`✅ ${moduleName} initialized:`, result);
             
             moduleObj.version = version;
             
@@ -141,7 +123,6 @@ const initializeHsMain = () => {
             return result;
             
         } catch (error) {
-            console.error(`❌ Failed to load ${moduleName}:`, error);
             moduleObj.reject?.(error);
             apiInstance.process.delete(moduleName);
             throw error;
@@ -219,19 +200,13 @@ const initializeHsMain = () => {
 
     // Process modules from script tags
     const processScriptModules = () => {
-        console.log(`⚙️ Processing ${scripts.length} script tags`);
-        
         for (const script of scripts) {
-            console.log(`🏷️ Processing script:`, script.src);
-            
             // Check for auto mode
             const autoMode = script.getAttribute('data-hs-auto') === 'true';
-            console.log(`🔍 Auto mode: ${autoMode}`);
             
             // Load modules based on script attributes
             for (const moduleName of Object.keys(allModules)) {
                 if (script.hasAttribute(moduleName)) {
-                    console.log(`✅ Found attribute for: ${moduleName}`);
                     loadHsModule(moduleName);
                 }
             }
@@ -239,7 +214,6 @@ const initializeHsMain = () => {
             // Auto-discovery mode
             if (autoMode) {
                 waitDOMReady().then(() => {
-                    console.log(`🔍 Starting auto-discovery...`);
                     const foundModules = new Set();
                     const allElements = document.querySelectorAll('*');
                     
@@ -253,7 +227,6 @@ const initializeHsMain = () => {
                         }
                     }
                     
-                    console.log(`🔍 Auto-discovered modules:`, [...foundModules]);
                     for (const moduleName of foundModules) {
                         loadHsModule(moduleName);
                     }
@@ -262,7 +235,6 @@ const initializeHsMain = () => {
         }
         
         // Always load auto-init modules
-        console.log(`🔄 Loading auto-init modules:`, Object.keys(autoInitModules));
         for (const moduleName of Object.keys(autoInitModules)) {
             loadHsModule(moduleName);
         }
@@ -288,40 +260,31 @@ const initializeHsMain = () => {
 
     // Main initialization
     const initializeMain = async () => {
-        console.log(`🚀 Starting main initialization...`);
-        
         // Process script modules
         processScriptModules();
         
         // Wait for Webflow
-        console.log(`⏳ Waiting for Webflow...`);
         await waitWebflowReady();
-        console.log(`✅ Webflow ready`);
         
         // Mark as loaded
         window[API_NAME].loaded = true;
         
         // Run all registered post-Webflow callbacks
-        console.log(`🔄 Running ${postWebflowCallbacks.length} post-Webflow callbacks`);
-        postWebflowCallbacks.forEach((callback, index) => {
+        postWebflowCallbacks.forEach((callback) => {
             try {
-                console.log(`📞 Executing callback ${index + 1}/${postWebflowCallbacks.length}`);
                 callback();
             } catch (error) {
-                console.error(`❌ Callback ${index + 1} failed:`, error);
+                // Silent fail for callbacks
             }
         });
-        
-        console.log(`🎉 ${API_NAME} fully loaded and ready!`);
     };
 
     // Process any early requests
-    console.log(`📝 Processing ${existingRequests.length} early requests`);
     window[API_NAME].push(...existingRequests);
 
     // Start initialization
-    initializeMain().catch(error => {
-        console.error(`❌ Failed to initialize ${API_NAME}:`, error);
+    initializeMain().catch(() => {
+        // Silent fail for initialization
     });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.2.8",
+  "version": "1.2.11",
   "main": "index.js",
   "type": "module",
   "scripts": {