@hortonstudio/main 1.0.1 → 1.1.0

package/.claude/settings.local.json

@@ -0,0 +1,18 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__webflow__pages_get_content",
+      "WebFetch(domain:compassfacilities.webflow.io)",
+      "mcp__webflow__collections_list",
+      "mcp__webflow__collections_get",
+      "mcp__webflow__sites_list",
+      "mcp__webflow__site_applied_scripts_list",
+      "mcp__webflow__site_registered_scripts_list",
+      "mcp__webflow__add_inline_site_script",
+      "Bash(mv:*)",
+      "WebFetch(domain:www.compassfacilities.com)",
+      "mcp__webflow__pages_list"
+    ],
+    "deny": []
+  }
+}

package/CLAUDE.md

@@ -0,0 +1,45 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is `@hortonstudio/main` - an animation and utility library for client websites, primarily designed for Webflow integration. The library uses a modular ES6 system with dynamic loading based on HTML data attributes.
+
+## Architecture
+
+**Main API**: `window.hsmain` (configurable via `API_NAME` constant in index.js)
+
+**Module Categories**:
+- Animation modules: `data-hs-anim-*` attributes trigger loading
+- Utility modules: `data-hs-util-*` attributes trigger loading  
+- Auto-init modules: Always loaded automatically
+
+**Dependencies**: Requires GSAP with ScrollTrigger and SplitText plugins
+
+**Integration**: Designed for Webflow with `Webflow.ready()` callback system
+
+## Module Loading System
+
+Modules are loaded via script tag attributes:
+```html
+<script src="index.js" data-hs-main data-hs-anim-hero data-hs-util-toc></script>
+```
+
+Each module exports an `init()` function returning `{ result: 'module-name initialized' }`.
+
+## Key Animation Patterns
+
+**Hero animations** (`hero.js`): Orchestrated timeline with navigation reveals, split text headings, and staggered element appearances. Uses data attributes like `data-hs-hero="heading"` and `data-hs-split="word|line|char"`.
+
+**Text animations** (`text.js`): Scroll-triggered animations using CSS classes `.a-word-split`, `.a-line-split`, `.a-char-split`, `.a-appear` on parent elements, targeting first child for animation.
+
+**Configuration**: All modules expose config objects via `window.hsmain.moduleAnimations.config` with `updateConfig()` methods for runtime modification.
+
+## Important Implementation Details
+
+- All animations wait for `document.fonts.ready` before initialization
+- Split text instances are automatically cleaned up after animations complete
+- CSS utility classes like `.u-overflow-clip` are dynamically added/removed for animation masking
+- The library handles Webflow DOM changes by calling `Webflow.ready()` after module loading
+- Navigation accessibility is temporarily disabled during hero animations then restored

package/animations/hero.js

@@ -0,0 +1,530 @@
+const API_NAME = 'hsmain';
+
+// Animation timing (in seconds)
+const timing = {
+    announce: 0,
+    nav: 0.1,
+    navLogo: 0.3,
+    navList: 0.35,
+    navMenu: 0.35,
+    navButton: 0.5,
+    tag: 0.1,
+    heading: 0.15,
+    subheading: 0.25,
+    button: 0.35,
+    image: 0.5,
+    appear: 0.6
+};
+
+// Hero Animations Module
+let heroTimeline = null;
+let headingSplits = [];
+let subheadingSplits = [];
+let heroTimeout = null; // Track the setTimeout
+
+const config = {
+    global: {
+        animationDelay: 0.2
+    },
+    headingSplit: {
+        duration: 1.5,
+        stagger: 0.1,
+        yPercent: 110,
+        ease: "power4.out"
+    },
+    subheadingSplit: {
+        duration: 1.5,
+        stagger: 0.1,
+        yPercent: 110,
+        ease: "power4.out"
+    },
+    appear: {
+        y: 50,
+        duration: 1.5,
+        ease: "power3.out"
+    },
+    navStagger: {
+        duration: 1.5,
+        stagger: 0.1,
+        ease: "power3.out"
+    },
+    nav: {
+        duration: 1,
+        ease: "power3.out"
+    }
+};
+
+function updateConfig(newConfig) {
+    function deepMerge(target, source) {
+        for (const key in source) {
+            if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+                target[key] = target[key] || {};
+                deepMerge(target[key], source[key]);
+            } else {
+                target[key] = source[key];
+            }
+        }
+        return target;
+    }
+    
+    deepMerge(config, newConfig);
+}
+
+function killHeroAnimations() {
+    if (heroTimeout) {
+        clearTimeout(heroTimeout);
+        heroTimeout = null;
+    }
+    
+    if (heroTimeline) {
+        heroTimeline.kill();
+        heroTimeline = null;
+    }
+    
+    headingSplits.forEach(split => {
+        if (split && split.revert) {
+            split.revert();
+        }
+    });
+    headingSplits = [];
+    
+    subheadingSplits.forEach(split => {
+        if (split && split.revert) {
+            split.revert();
+        }
+    });
+    subheadingSplits = [];
+    
+    // Restore page-wide tabbing if animation is killed
+    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');
+    });
+    // Restore nav pointer events if animation is killed
+    const navElement = document.querySelector('[data-hs-hero="nav"]');
+    if (navElement) {
+        navElement.style.pointerEvents = '';
+    }
+}
+
+function startHeroAnimations() {
+    killHeroAnimations();
+    init();
+}
+
+export async function init() {
+    if (typeof window.gsap === "undefined") {
+        console.error('GSAP not found - hero animations disabled');
+        return;
+    }
+    
+    gsap.registerPlugin(ScrollTrigger, SplitText);
+    
+    // Element selection
+    const announceElements = document.querySelectorAll('[data-hs-hero="announce"]');
+    const navElement = document.querySelector('[data-hs-hero="nav"]');
+    const navMenuElements = document.querySelectorAll('[data-hs-hero="nav-menu"]');
+    const navLogoElements = document.querySelectorAll('[data-hs-hero="nav-logo"]');
+    const imageElements = document.querySelectorAll('[data-hs-hero="image"]');
+    const appearElements = document.querySelectorAll('[data-hs-hero="appear"]');
+    
+    // Check if nav has advanced config
+    const hasAdvancedNav = navElement && navElement.hasAttribute('data-hs-heroconfig') && navElement.getAttribute('data-hs-heroconfig') === 'advanced';
+    
+    // First child elements - only select if advanced nav is enabled
+    const navButton = [];
+    if (hasAdvancedNav) {
+        const navButtonParents = document.querySelectorAll('[data-hs-hero="nav-button"]');
+        navButtonParents.forEach(el => {
+            if (el.firstElementChild) navButton.push(el.firstElementChild);
+        });
+    }
+    
+    const subheading = [];
+    const subheadingAppearElements = [];
+    const subheadingElements = document.querySelectorAll('[data-hs-hero="subheading"]');
+    const subheadingSplitElements = [];
+    
+    subheadingElements.forEach(el => {
+        if (el.firstElementChild) {
+            // Get the heroconfig attribute to determine animation type (default to appear)
+            const heroConfig = el.getAttribute('data-hs-heroconfig') || 'appear';
+            
+            if (heroConfig === 'appear') {
+                subheadingAppearElements.push(el.firstElementChild);
+            } else {
+                subheading.push(el.firstElementChild);
+                subheadingSplitElements.push(el);
+            }
+        }
+    });
+    
+    const heading = [];
+    const headingAppearElements = [];
+    const headingElements = document.querySelectorAll('[data-hs-hero="heading"]');
+    const headingSplitElements = [];
+    
+    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
+            
+            if (heroConfig === 'appear') {
+                headingAppearElements.push(el.firstElementChild);
+            } else {
+                heading.push(el.firstElementChild);
+                headingSplitElements.push(el);
+            }
+        }
+    });
+    
+    const tag = [];
+    const tagParents = document.querySelectorAll('[data-hs-hero="tag"]');
+    tagParents.forEach(el => {
+        if (el.firstElementChild) tag.push(el.firstElementChild);
+    });
+    
+    // All children elements
+    const buttonAllChildren = [];
+    const buttonParents = document.querySelectorAll('[data-hs-hero="button"]');
+    buttonParents.forEach(el => {
+        const children = Array.from(el.children);
+        buttonAllChildren.push(...children);
+    });
+    
+    const navListAllChildren = [];
+    if (hasAdvancedNav) {
+        const navListParents = document.querySelectorAll('[data-hs-hero="nav-list"]');
+        navListParents.forEach(el => {
+            const children = Array.from(el.children);
+            
+            // Add overflow clip class to each child and collect their first child for animation
+            children.forEach(child => {
+                child.classList.add('u-overflow-clip');
+                if (child.firstElementChild) {
+                    navListAllChildren.push(child.firstElementChild);
+                }
+            });
+        });
+    }
+    
+    // Initial states
+        if (announceElements.length > 0) gsap.set(announceElements, { opacity: 0, y: -50 });
+        if (navElement) {
+            gsap.set(navElement, { opacity: 0, y: -50 });
+            // Disable nav pointer events until animation completes
+            navElement.style.pointerEvents = 'none';
+        }
+        if (hasAdvancedNav && navListAllChildren.length > 0) gsap.set(navListAllChildren, { opacity: 0, yPercent: 110 });
+        if (hasAdvancedNav && navMenuElements.length > 0) gsap.set(navMenuElements, { opacity: 0 });
+        if (hasAdvancedNav && navButton.length > 0) gsap.set(navButton, { opacity: 0 });
+        if (hasAdvancedNav && navLogoElements.length > 0) gsap.set(navLogoElements, { opacity: 0 });
+        if (subheadingAppearElements.length > 0) gsap.set(subheadingAppearElements, { y: config.appear.y, opacity: 0 });
+        if (tag.length > 0) gsap.set(tag, { y: config.appear.y, opacity: 0 });
+        if (buttonAllChildren.length > 0) gsap.set(buttonAllChildren, { y: config.appear.y, opacity: 0 });
+        if (imageElements.length > 0) gsap.set(imageElements, { opacity: 0 });
+        if (appearElements.length > 0) gsap.set(appearElements, { y: config.appear.y, opacity: 0 });
+        if (headingAppearElements.length > 0) gsap.set(headingAppearElements, { y: config.appear.y, opacity: 0 });
+        
+        // Disable page-wide tabbing and interactions until animation completes
+        const allFocusableElements = document.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        allFocusableElements.forEach(el => {
+            el.style.pointerEvents = 'none';
+            el.setAttribute('data-original-tabindex', el.getAttribute('tabindex') || '0');
+            el.setAttribute('tabindex', '-1');
+        });
+        
+        // Animation timeline
+        document.fonts.ready.then(() => {
+        
+        // Split text setup (after fonts are loaded)
+        headingSplits = [];
+        
+        if (heading.length > 0) {
+            headingSplitElements.forEach((parent, index) => {
+                const textElement = heading[index];
+                const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
+                
+                let splitConfig = {};
+                let elementsClass = '';
+                
+                if (splitType === 'char') {
+                    splitConfig = {
+                        type: "words,chars",
+                        mask: "chars",
+                        charsClass: "char"
+                    };
+                    elementsClass = 'chars';
+                } else if (splitType === 'line') {
+                    splitConfig = {
+                        type: "lines",
+                        mask: "lines",
+                        linesClass: "line"
+                    };
+                    elementsClass = 'lines';
+                } else {
+                    splitConfig = {
+                        type: "words",
+                        mask: "words",
+                        wordsClass: "word"
+                    };
+                    elementsClass = 'words';
+                }
+                
+                const split = new SplitText(textElement, splitConfig);
+                split.elementsClass = elementsClass;
+                headingSplits.push(split);
+                
+                gsap.set(split[elementsClass], { yPercent: config.headingSplit.yPercent });
+                gsap.set(textElement, { autoAlpha: 1 });
+            });
+        }
+        
+        // Split text setup for subheadings
+        if (subheading.length > 0) {
+            subheadingSplitElements.forEach((parent, index) => {
+                const textElement = subheading[index];
+                const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
+                
+                let splitConfig = {};
+                let elementsClass = '';
+                
+                if (splitType === 'char') {
+                    splitConfig = {
+                        type: "words,chars",
+                        mask: "chars",
+                        charsClass: "char"
+                    };
+                    elementsClass = 'chars';
+                } else if (splitType === 'line') {
+                    splitConfig = {
+                        type: "lines",
+                        mask: "lines",
+                        linesClass: "line"
+                    };
+                    elementsClass = 'lines';
+                } else {
+                    splitConfig = {
+                        type: "words",
+                        mask: "words",
+                        wordsClass: "word"
+                    };
+                    elementsClass = 'words';
+                }
+                
+                const split = new SplitText(textElement, splitConfig);
+                split.elementsClass = elementsClass;
+                subheadingSplits.push(split);
+                
+                gsap.set(split[elementsClass], { yPercent: config.subheadingSplit.yPercent });
+                gsap.set(textElement, { autoAlpha: 1 });
+            });
+        }
+        
+        heroTimeout = setTimeout(() => {
+            heroTimeline = gsap.timeline();
+            
+            if (announceElements.length > 0) {
+                heroTimeline.to(announceElements, 
+                    { opacity: 1, y: 0, duration: config.nav.duration, ease: config.nav.ease }, 
+                    timing.announce
+                );
+            }
+            
+            if (navElement) {
+                heroTimeline.to(navElement, 
+                    { opacity: 1, y: 0, duration: config.nav.duration, ease: config.nav.ease }, 
+                    timing.nav
+                );
+            }
+            
+            if (hasAdvancedNav && navLogoElements.length > 0) {
+                heroTimeline.to(navLogoElements, 
+                    { opacity: 1, duration: .5, ease: config.nav.ease }, 
+                    timing.navLogo
+                );
+            }
+            
+            if (hasAdvancedNav && navListAllChildren.length > 0) {
+                heroTimeline.to(navListAllChildren, 
+                    { 
+                        opacity: 1, 
+                        yPercent: 0, 
+                        duration: config.nav.duration, 
+                        stagger: 0.05, 
+                        ease: config.nav.ease,
+                        onComplete: () => {
+                            // Remove u-overflow-clip class from list children
+                            const navListParents = document.querySelectorAll('[data-hs-hero="nav-list"]');
+                            navListParents.forEach(parent => {
+                                const children = parent.children;
+                                Array.from(children).forEach(child => {
+                                    child.classList.remove('u-overflow-clip');
+                                });
+                            });
+                        }
+                    }, 
+                    timing.navList
+                );
+            }
+            
+            if (hasAdvancedNav && navMenuElements.length > 0) {
+                heroTimeline.to(navMenuElements, 
+                    { opacity: 1, duration: config.nav.duration, ease: config.nav.ease }, 
+                    timing.navMenu
+                );
+            }
+            
+            if (hasAdvancedNav && navButton.length > 0) {
+                heroTimeline.to(navButton, 
+                    { opacity: 1, duration: config.nav.duration, ease: config.nav.ease }, 
+                    timing.navButton
+                );
+            }
+            
+            if (headingSplits.length > 0) {
+                headingSplits.forEach(split => {
+                    heroTimeline.to(split[split.elementsClass], 
+                        { 
+                            yPercent: 0, 
+                            duration: config.headingSplit.duration, 
+                            stagger: config.headingSplit.stagger, 
+                            ease: config.headingSplit.ease,
+                            onComplete: () => {
+                                if (split && split.revert) {
+                                    split.revert();
+                                }
+                            }
+                        }, 
+                        timing.heading
+                    );
+                });
+            }
+            
+            if (subheadingSplits.length > 0) {
+                subheadingSplits.forEach(split => {
+                    heroTimeline.to(split[split.elementsClass], 
+                        { 
+                            yPercent: 0, 
+                            duration: config.subheadingSplit.duration, 
+                            stagger: config.subheadingSplit.stagger, 
+                            ease: config.subheadingSplit.ease,
+                            onComplete: () => {
+                                if (split && split.revert) {
+                                    split.revert();
+                                }
+                            }
+                        }, 
+                        timing.subheading
+                    );
+                });
+            }
+            
+            if (subheadingAppearElements.length > 0) {
+                heroTimeline.to(subheadingAppearElements, 
+                    { y: 0, opacity: 1, duration: config.appear.duration, ease: config.appear.ease }, 
+                    timing.subheading
+                );
+            }
+            
+            if (tag.length > 0) {
+                heroTimeline.to(tag, 
+                    { y: 0, opacity: 1, duration: config.appear.duration, ease: config.appear.ease }, 
+                    timing.tag
+                );
+            }
+            
+            if (buttonAllChildren.length > 0) {
+                heroTimeline.to(buttonAllChildren, 
+                    { y: 0, opacity: 1, duration: config.navStagger.duration, stagger: config.navStagger.stagger, ease: config.navStagger.ease }, 
+                    timing.button
+                );
+            }
+            
+            if (imageElements.length > 0) {
+                heroTimeline.to(imageElements, 
+                    { opacity: 1, duration: config.appear.duration, ease: config.appear.ease }, 
+                    timing.image
+                );
+            }
+            
+            // Combine appear elements and heading appear elements
+            const allAppearElements = [...appearElements, ...headingAppearElements];
+            
+            if (allAppearElements.length > 0) {
+                heroTimeline.to(allAppearElements, 
+                    { 
+                        y: 0, 
+                        opacity: 1, 
+                        duration: config.appear.duration, 
+                        ease: config.appear.ease,
+                        onComplete: () => {
+                            // Restore page-wide tabbing and interactions after hero animation completes
+                            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');
+                            });
+                            // Restore nav pointer events
+                            if (navElement) {
+                                navElement.style.pointerEvents = '';
+                            }
+                        }
+                    }, 
+                    timing.appear
+                );
+            } else {
+                // If no appear elements, restore tabbing when timeline completes
+                heroTimeline.call(() => {
+                    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');
+                    });
+                    // Restore nav pointer events
+                    if (navElement) {
+                        navElement.style.pointerEvents = '';
+                    }
+                });
+            }
+            
+            heroTimeout = null;
+            
+        }, config.global.animationDelay * 1000);
+        
+        });
+    
+    // API exposure
+    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' };
+}