Download Code
<!-- wp:greenshift-blocks/element {"id":"gsbp-69633d3","dynamicGClasses":[{"value":"intro-spacer","type":"local","label":"intro-spacer","localed":false,"css":".intro-spacer{height:50vh;width:100%;display:flex;justify-content:center;align-items:center;color:#999;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.1em;}","attributes":{"styleAttributes":{"height":["50vh"],"width":["100%"],"display":["flex"],"justifyContent":["center"],"alignItems":["center"],"color":["#999"],"fontSize":["0.9rem"],"textTransform":["uppercase"],"letterSpacing":["0.1em"]}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"content-wrapper","type":"local","label":"content-wrapper","localed":false,"css":".content-wrapper{width: 100%;\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-start;\n            align-items: center;\n            padding-bottom: 40vh; \n            position: relative;\n            z-index: 1;}","attributes":{"styleAttributes":{"width":["100%"],"display":["flex"],"flexDirection":["column"],"justifyContent":["flex-start"],"alignItems":["center"],"paddingBottom":["40vh"],"position":["relative"],"zIndex":["1"]}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"manifesto-container","type":"local","label":"manifesto-container","localed":false,"css":".manifesto-container{width: 95%;\n            max-width: 1400px;\n            padding: 2rem;\n            text-align: center;\n            opacity: 0; \n            animation: fadeIn 1.2s ease forwards;}","attributes":{"styleAttributes":{"width":["95%"],"maxWidth":["1400px"],"padding":["2rem"],"textAlign":["center"],"opacity":["0"],"animation":["fadeIn 1.2s ease forwards"]}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"line","type":"local","label":"line","localed":false,"css":".line{display: flex;\n            flex-wrap: nowrap;\n            justify-content: center;\n            align-items: center;\n            gap: 0.25em;\n            margin-bottom: 0.15em;\n            \n            font-size: clamp(2rem, 5.5vw, 5rem);\n            font-weight: 900;\n            line-height: 1.1;\n            letter-spacing: -0.04em;}","attributes":{"styleAttributes":{"display":["flex"],"flexWrap":["nowrap"],"justifyContent":["center"],"alignItems":["center"],"gap":["0.25em"],"marginBottom":["0.15em"],"fontSize":["clamp(2rem, 5.5vw, 5rem)"],"fontWeight":["900"],"lineHeight":["1.1"],"letterSpacing":["-0.04em"]}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"word","type":"local","label":"word","localed":false,"css":".word{display: inline-block;\n            white-space: pre;\n            color: #1a1a1a;\n            \n            \n            \n            -webkit-mask-image: linear-gradient(90deg, #fff 33.3%, rgba(255, 255, 255, 0.1) 66.6%);\n            mask-image: linear-gradient(90deg, #fff 33.3%, rgba(255, 255, 255, 0.1) 66.6%);\n            \n            -webkit-mask-size: 300% 100%;\n            mask-size: 300% 100%;\n            \n            \n            -webkit-mask-position: 100% 0;\n            mask-position: 100% 0;\n            \n            \n            transition: mask-position 2.5s cubic-bezier(0.16, 1, 0.3, 1);\n            \n            will-change: mask-position;}","attributes":{"styleAttributes":{"display":["inline-block"],"color":["#1a1a1a"],"maskImage":["linear-gradient(90deg, #fff 33.3%, rgba(255, 255, 255, 0.1) 66.6%)"],"maskSize":["300% 100%"],"maskPosition":["100% 0"],"transition":["mask-position 2.5s cubic-bezier(0.16, 1, 0.3, 1)"],"customCSS_Extra":"{CURRENT}{white-space:pre;-webkit-mask-image:linear-gradient(90deg, #fff 33.3%, rgba(255, 255, 255, 0.1) 66.6%);-webkit-mask-size:300% 100%;-webkit-mask-position:100% 0;will-change:mask-position}{CURRENT}{-webkit-mask-position:0% 0}"}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","selectors":[{"value":".revealed","attributes":{"styleAttributes":{"maskPosition":["0% 0"],"customCSS_Extra":"{CURRENT}.revealed{-webkit-mask-position:0% 0}"}},"css":".word.revealed{-webkit-mask-position: 0% 0;\n            mask-position: 0% 0;}"}]},{"value":"image-wrapper","type":"local","label":"image-wrapper","localed":false,"css":".image-wrapper{display:inline-flex;overflow:hidden;height:0.8em;border-radius:0.1em;width:0px;opacity:0;margin:0;transition:width 2.5s cubic-bezier(0.16, 1, 0.3, 1),\n                margin 2.5s cubic-bezier(0.16, 1, 0.3, 1),\n                opacity 1.5s ease-out;flex-shrink:0;}.image-wrapper{vertical-align:middle;will-change:width, margin, opacity}","attributes":{"styleAttributes":{"display":["inline-flex"],"overflow":["hidden"],"height":["0.8em"],"borderRadius":["0.1em"],"width":["0px"],"opacity":["0"],"margin":["0"],"transition":["width 2.5s cubic-bezier(0.16, 1, 0.3, 1),\n                margin 2.5s cubic-bezier(0.16, 1, 0.3, 1),\n                opacity 1.5s ease-out"],"flexShrink":["0"],"customCSS_Extra":"{CURRENT}{vertical-align:middle;will-change:width, margin, opacity}"}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","selectors":[{"value":".revealed","attributes":{"styleAttributes":{"width":["var(\u002d\u002dtarget-width)"],"opacity":["1"],"margin":["0 0.25em"]}},"css":".image-wrapper.revealed{width:var(\u002d\u002dtarget-width);opacity:1;margin:0 0.25em;}"},{"value":" img","attributes":{"styleAttributes":{"height":["100%"],"width":["auto"],"display":["block"],"objectFit":["cover"]}},"css":".image-wrapper img{height:100%;width:auto;display:block;object-fit:cover;}"}],"localedSpace":""},{"value":"image-editor","type":"local","label":"image-editor","localed":false,"css":"body.gspb-bodyadmin .image-editor{width:auto !important; opacity:1}","attributes":{"styleAttributes":{"customCSS_Extra":"{CURRENT}{width:auto !important; opacity:1}"}},"originalID":"gsbp-69633d3","originalBlock":"greenshift-blocks/element","tag":"div","selectors":[],"localedSpace":"editor"}],"type":"no","className":"intro-spacer content-wrapper manifesto-container line word image-wrapper image-editor","localId":"gsbp-69633d3","isVariation":"stylemanager","customCss":"@keyframes fadeIn {\n            to { opacity: 1; }\n        }","customJs":"const container = document.getElementById('manifesto');\n        \n        let items = [];\n        let ticking = false;\n\n        function init() {\n            const allNodes = container.querySelectorAll('.word, .image-wrapper');\n            \n            items = Array.from(allNodes).map(node =\u003e ({\n                node: node,\n                type: node.classList.contains('image-wrapper') ? 'image' : 'text'\n            }));\n\n            // 1. Measure layout for images\n            measureImageWidths();\n\n            // 2. Setup Staggering\n            // We want items on the same line to reveal sequentially (left to right)\n            // even if they hit the trigger point at the same time.\n            setupStaggerDelays(allNodes);\n\n            // 3. Initial check\n            updateVisuals();\n        }\n\n        function measureImageWidths() {\n            items.forEach(item =\u003e {\n                if (item.type === 'image') {\n                    const originalWidth = item.node.style.width;\n                    const originalMargin = item.node.style.margin;\n                    \n                    item.node.style.width = 'auto';\n                    item.node.style.margin = '0 0.25em'; \n                    \n                    const rect = item.node.getBoundingClientRect();\n                    \n                    item.node.style.setProperty('\u002d\u002dtarget-width', `${rect.width}px`);\n                    \n                    item.node.style.width = '';\n                    item.node.style.margin = '';\n                }\n            });\n        }\n\n        function setupStaggerDelays(nodes) {\n            // Group nodes by their visual line (based on Y position)\n            let currentTop = -1;\n            let indexInLine = 0;\n            \n            // Note: We assume nodes are in DOM order. \n            // We need to measure their positions relative to the document or container, \n            // but since we are just checking relative alignment, getBoundingClientRect works\n            // if we assume initial render.\n            \n            nodes.forEach(node =\u003e {\n                const rect = node.getBoundingClientRect();\n                \n                // Simple threshold to detect new line\n                if (Math.abs(rect.top - currentTop) \u003e 20) {\n                    currentTop = rect.top;\n                    indexInLine = 0;\n                }\n\n                // Add delay based on index in line\n                // 0s, 0.1s, 0.2s, etc.\n                node.style.transitionDelay = `${indexInLine * 0.15}s`;\n                indexInLine++;\n            });\n        }\n\n        function updateVisuals() {\n            // Trigger point: 20% from the bottom of the viewport\n            // This is equivalent to 80% of window height\n            const triggerBottom = window.innerHeight * 0.8;\n\n            items.forEach(item =\u003e {\n                const rect = item.node.getBoundingClientRect();\n                \n                // If the top of the item is above the trigger line, reveal it.\n                if (rect.top \u003c triggerBottom) {\n                    item.node.classList.add('revealed');\n                } else {\n                    item.node.classList.remove('revealed');\n                }\n            });\n        }\n\n        window.addEventListener('load', init);\n        \n        window.addEventListener('resize', () =\u003e {\n            measureImageWidths();\n            // Re-calc delays might be needed if line breaks change, \n            // but usually 'rect.top' in loop handles the trigger.\n            // For simplicity, we keep delays fixed or could re-run setupStaggerDelays.\n            requestAnimationFrame(updateVisuals);\n        });\n\n        window.addEventListener('scroll', () =\u003e {\n            if (!ticking) {\n                window.requestAnimationFrame(() =\u003e {\n                    updateVisuals();\n                    ticking = false;\n                });\n                ticking = true;\n            }\n        }, { passive: true });","customJsEnabled":true} -->
<div class="intro-spacer content-wrapper manifesto-container line word image-wrapper image-editor"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-c1c9c98","type":"inner","className":"intro-spacer","localId":"gsbp-c1c9c98"} -->
<div class="intro-spacer"><!-- wp:greenshift-blocks/element {"id":"gsbp-ca691b3","textContent":"Scroll Down ↓","tag":"span","localId":"gsbp-ca691b3"} -->
<span>Scroll Down ↓</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-e6c96ea","type":"inner","className":"content-wrapper","localId":"gsbp-e6c96ea","align":"wide"} -->
<div class="content-wrapper alignwide"><!-- wp:greenshift-blocks/element {"id":"gsbp-03e134f","anchor":"manifesto","type":"inner","className":"manifesto-container","localId":"gsbp-03e134f"} -->
<div class="manifesto-container" id="manifesto"><!-- wp:greenshift-blocks/element {"id":"gsbp-acc8b01","type":"inner","className":"line","localId":"gsbp-acc8b01"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-671f6f7","textContent":"IN","tag":"span","className":"word","localId":"gsbp-671f6f7"} -->
<span class="word">IN</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-919edbb","textContent":"A","tag":"span","className":"word","localId":"gsbp-919edbb"} -->
<span class="word">A</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-66c4b6e","tag":"span","type":"inner","className":"image-wrapper image-editor","localId":"gsbp-66c4b6e"} -->
<span class="image-wrapper image-editor"><!-- wp:greenshift-blocks/element {"id":"gsbp-3d12bed","tag":"img","type":"image","localId":"gsbp-3d12bed","src":"https://picsum.photos/id/338/200/200","alt":"Square","disablelazy":true} -->
<img src="https://picsum.photos/id/338/200/200" alt="Square"/>
<!-- /wp:greenshift-blocks/element --></span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-292c235","textContent":"WORLD","tag":"span","className":"word","localId":"gsbp-292c235"} -->
<span class="word">WORLD</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-998cc79","type":"inner","className":"line","localId":"gsbp-998cc79"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-35479fd","textContent":"FULL","tag":"span","className":"word","localId":"gsbp-35479fd"} -->
<span class="word">FULL</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-e19279d","textContent":"OF","tag":"span","className":"word","localId":"gsbp-e19279d"} -->
<span class="word">OF</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-d51e380","textContent":"NOISE,","tag":"span","className":"word","localId":"gsbp-d51e380"} -->
<span class="word">NOISE,</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-17a491b","textContent":"WE","tag":"span","className":"word","localId":"gsbp-17a491b"} -->
<span class="word">WE</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-0a4470f","type":"inner","className":"line","localId":"gsbp-0a4470f"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-dbb6cc3","textContent":"HELP","tag":"span","className":"word","localId":"gsbp-dbb6cc3"} -->
<span class="word">HELP</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-db9297a","textContent":"BRANDS","tag":"span","className":"word","localId":"gsbp-db9297a"} -->
<span class="word">BRANDS</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-4fe070e","tag":"span","type":"inner","className":"image-wrapper image-editor","localId":"gsbp-4fe070e"} -->
<span class="image-wrapper image-editor"><!-- wp:greenshift-blocks/element {"id":"gsbp-6c54025","tag":"img","type":"image","localId":"gsbp-6c54025","src":"https://picsum.photos/id/129/300/200","alt":"Landscape"} -->
<img src="https://picsum.photos/id/129/300/200" alt="Landscape" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-5ff292c","textContent":"STAND","tag":"span","className":"word","localId":"gsbp-5ff292c"} -->
<span class="word">STAND</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-221bedc","type":"inner","className":"line","localId":"gsbp-221bedc"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-7807f24","textContent":"OUT","tag":"span","className":"word","localId":"gsbp-7807f24"} -->
<span class="word">OUT</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-022d0fe","textContent":"WITH","tag":"span","className":"word","localId":"gsbp-022d0fe"} -->
<span class="word">WITH</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-f44ff34","textContent":"CLEAR","tag":"span","className":"word","localId":"gsbp-f44ff34"} -->
<span class="word">CLEAR</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-a248cb5","textContent":"IDEAS","tag":"span","className":"word","localId":"gsbp-a248cb5"} -->
<span class="word">IDEAS</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-b3c4b0e","type":"inner","className":"line","localId":"gsbp-b3c4b0e"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-3ca006b","textContent":"AND","tag":"span","className":"word","localId":"gsbp-3ca006b"} -->
<span class="word">AND</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-85fed5f","tag":"span","type":"inner","className":"image-wrapper image-editor","localId":"gsbp-85fed5f"} -->
<span class="image-wrapper image-editor"><!-- wp:greenshift-blocks/element {"id":"gsbp-575fcbf","tag":"img","type":"image","localId":"gsbp-575fcbf","src":"https://picsum.photos/id/64/300/200","alt":"Landscape"} -->
<img src="https://picsum.photos/id/64/300/200" alt="Landscape" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-0884c10","textContent":"GOOD","tag":"span","className":"word","localId":"gsbp-0884c10"} -->
<span class="word">GOOD</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-45a7982","textContent":"DESIGN","tag":"span","className":"word","localId":"gsbp-45a7982"} -->
<span class="word">DESIGN</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-e5b1869","type":"inner","className":"line","localId":"gsbp-e5b1869"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-cb2c9cc","textContent":"THAT","tag":"span","className":"word","localId":"gsbp-cb2c9cc"} -->
<span class="word">THAT</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-a35975b","textContent":"MAKES","tag":"span","className":"word","localId":"gsbp-a35975b"} -->
<span class="word">MAKES</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-57a2dbd","textContent":"AN","tag":"span","className":"word","localId":"gsbp-57a2dbd"} -->
<span class="word">AN</span>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-5af7274","tag":"span","type":"inner","className":"image-wrapper image-editor","localId":"gsbp-5af7274"} -->
<span class="image-wrapper image-editor"><!-- wp:greenshift-blocks/element {"id":"gsbp-e279492","tag":"img","type":"image","localId":"gsbp-e279492","src":"https://picsum.photos/id/91/200/300","alt":"Portrait"} -->
<img src="https://picsum.photos/id/91/200/300" alt="Portrait" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-40eea30","type":"inner","className":"line","localId":"gsbp-40eea30"} -->
<div class="line"><!-- wp:greenshift-blocks/element {"id":"gsbp-88f8d79","textContent":"IMPACT.","tag":"span","className":"word","localId":"gsbp-88f8d79"} -->
<span class="word">IMPACT.</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

Text reveal effect with Images

Scroll Down ↓
IN A Square WORLD
FULL OF NOISE, WE
HELP BRANDS Landscape STAND
OUT WITH CLEAR IDEAS
AND Landscape GOOD DESIGN
THAT MAKES AN Portrait
IMPACT.