@hortonstudio/main 1.1.14 → 1.1.16

package/animations/hero.js

@@ -244,14 +244,59 @@ export async function init() {
         // Animation timeline
         document.fonts.ready.then(() => {
         
+        // Helper function to flatten heading and extract span info
+        function flattenHeading(textElement) {
+            const spanMappings = new Map();
+            const spans = textElement.querySelectorAll('span');
+            
+            // Extract span text and classes before flattening
+            spans.forEach(span => {
+                const text = span.textContent.trim();
+                const classes = Array.from(span.classList);
+                if (text && classes.length > 0) {
+                    spanMappings.set(text, classes);
+                }
+            });
+            
+            // Get the original tag name and attributes
+            const tagName = textElement.tagName;
+            const originalClasses = Array.from(textElement.classList);
+            const originalAttributes = {};
+            
+            for (let attr of textElement.attributes) {
+                if (attr.name !== 'class') {
+                    originalAttributes[attr.name] = attr.value;
+                }
+            }
+            
+            // Create completely new element with just text content
+            const newElement = document.createElement(tagName);
+            newElement.textContent = textElement.textContent;
+            
+            // Restore original attributes and classes
+            originalClasses.forEach(cls => newElement.classList.add(cls));
+            Object.entries(originalAttributes).forEach(([name, value]) => {
+                newElement.setAttribute(name, value);
+            });
+            
+            // Replace the original element
+            textElement.parentNode.replaceChild(newElement, textElement);
+            
+            return { newElement, spanMappings };
+        }
+        
         // Split text setup (after fonts are loaded)
         headingSplits = [];
         
         if (heading.length > 0) {
             headingSplitElements.forEach((parent, index) => {
-                const textElement = heading[index];
+                let textElement = heading[index];
                 const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
                 
+                // Flatten the heading and get span mappings
+                const { newElement, spanMappings } = flattenHeading(textElement);
+                textElement = newElement; // Use the flattened element
+                
                 let splitConfig = {};
                 let elementsClass = '';
                 
@@ -282,6 +327,19 @@ export async function init() {
                 split.elementsClass = elementsClass;
                 headingSplits.push(split);
                 
+                // Apply span classes to matching words if we have words available
+                if (split.words && spanMappings.size > 0) {
+                    split.words.forEach(wordElement => {
+                        const wordText = wordElement.textContent.trim();
+                        if (spanMappings.has(wordText)) {
+                            const classes = spanMappings.get(wordText);
+                            classes.forEach(className => {
+                                wordElement.classList.add(className);
+                            });
+                        }
+                    });
+                }
+                
                 gsap.set(split[elementsClass], { yPercent: config.headingSplit.yPercent });
                 gsap.set(textElement, { autoAlpha: 1 });
             });

package/package.json

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

package/styles.css

@@ -13,7 +13,12 @@ body .transition {display: block}
 
 /* safari line detection fix */
 [data-hs-hero="heading"] {
-    contain: layout style;
+    text-rendering: optimizeSpeed;
+    font-variant-ligatures: none;
+    -webkit-font-feature-settings: "kern" 0;
+    font-feature-settings: "kern" 0;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
 }
 
 /* scroll cleanliness */