From c561a4913829382922132fc834792be8d16f0311 Mon Sep 17 00:00:00 2001
From: Adam Stepinski <adam@instawork.com>
Date: Sun, 24 Aug 2025 15:57:25 -0700
Subject: [PATCH 1/2] PoC of scroll transform

---
 demo/backend/_includes/icons/back-white.svg   |  14 ++
 .../elements/scroll-transform/_styles.xml.njk |  22 ++
 .../elements/scroll-transform/index.xml.njk   | 192 ++++++++++++++++++
 demo/schema/scroll-transform.xsd              |  51 +++++
 .../ScrollTransform/ScrollTransform.tsx       | 132 ++++++++++++
 demo/src/Components/ScrollTransform/index.ts  |   1 +
 demo/src/Components/ScrollTransform/utils.ts  | 115 +++++++++++
 demo/src/Components/index.ts                  |   2 +
 8 files changed, 529 insertions(+)
 create mode 100644 demo/backend/_includes/icons/back-white.svg
 create mode 100644 demo/backend/advanced/community/elements/scroll-transform/_styles.xml.njk
 create mode 100644 demo/backend/advanced/community/elements/scroll-transform/index.xml.njk
 create mode 100644 demo/schema/scroll-transform.xsd
 create mode 100644 demo/src/Components/ScrollTransform/ScrollTransform.tsx
 create mode 100644 demo/src/Components/ScrollTransform/index.ts
 create mode 100644 demo/src/Components/ScrollTransform/utils.ts

diff --git a/demo/backend/_includes/icons/back-white.svg b/demo/backend/_includes/icons/back-white.svg
new file mode 100644
index 000000000..083e0ef9e
--- /dev/null
+++ b/demo/backend/_includes/icons/back-white.svg
@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M11.7803 0.96967C12.0732 1.26256 12.0732 1.73744 11.7803 2.03033L2.56066 11.25H23.25C23.6642 11.25 24 11.5858 24 12C24 12.4142 23.6642 12.75 23.25 12.75H2.56066L11.7803 21.9697C12.0732 22.2626 12.0732 22.7374 11.7803 23.0303C11.4874 23.3232 11.0126 23.3232 10.7197 23.0303L0.21967 12.5303C-0.0732233 12.2374 -0.0732233 11.7626 0.21967 11.4697L10.7197 0.96967C11.0126 0.676777 11.4874 0.676777 11.7803 0.96967Z"
+    fill="white"
+  />
+</svg>
\ No newline at end of file
diff --git a/demo/backend/advanced/community/elements/scroll-transform/_styles.xml.njk b/demo/backend/advanced/community/elements/scroll-transform/_styles.xml.njk
new file mode 100644
index 000000000..b793c0f7e
--- /dev/null
+++ b/demo/backend/advanced/community/elements/scroll-transform/_styles.xml.njk
@@ -0,0 +1,22 @@
+
+<style
+  id="text"
+  marginHorizontal="24"
+  marginBottom="16"
+/>
+
+<style
+  id="instructions-text"
+  flex="1"
+  alignItems="flex-end"
+/>
+
+<style
+  id="red-square"
+  width="100"
+  height="100"
+  backgroundColor="#ff0000"
+  marginHorizontal="24"
+  marginVertical="32"
+  alignSelf="center"
+/>
diff --git a/demo/backend/advanced/community/elements/scroll-transform/index.xml.njk b/demo/backend/advanced/community/elements/scroll-transform/index.xml.njk
new file mode 100644
index 000000000..aaf20c1d8
--- /dev/null
+++ b/demo/backend/advanced/community/elements/scroll-transform/index.xml.njk
@@ -0,0 +1,192 @@
+---
+permalink: "/backend/advanced/community/scroll-transform.xml"
+tags: "Advanced/Community/Elements"
+hv_title: "Scroll Transform"
+---
+
+{% extends 'templates/base.xml.njk' %}
+
+{% block styles %}
+  {% include './_styles.xml.njk' %}
+  <style id="hero-container" width="100%" position="relative" top="-24" />
+  <style id="hero-image" width="460" height="360" />
+  <style id="hero-title" fontSize="36" color="white" position="absolute" bottom="16" left="0" zIndex="100" />
+
+  <style id="header-transparent" backgroundColor="transparent" borderBottomColor="transparent" />
+
+  <style id="hero-header-container"
+    position="absolute"
+    top="0"
+    bottom="0"
+    left="0"
+    height="0"
+    width="100%"
+    zIndex="1000"
+  />
+  <style id="hero-header"
+    backgroundColor="white"
+    borderBottomWidth="1"
+    borderBottomColor="black"
+    flexDirection="row"
+    padding="16"
+    alignItems="center"
+    position="absolute"
+    top="0"
+    paddingTop="60"
+    width="100%"
+  />
+{% endblock %}
+
+{% block body %}
+
+    <header style="hero-header-container">
+
+      <scroll-transform:container
+        xmlns:scroll-transform="https://hyperview.org/scroll-transform"
+      >
+        <scroll-transform:transform
+          context-key="scroll-view"
+          style-attr="opacity"
+          scroll-range="[200, 230]"
+          attr-range="[1, 0]"
+          axis="vertical"
+        />
+        <view style="hero-header header-transparent">
+          <view action="back" href="#" style="header-btn">
+            {% include 'icons/back-white.svg' %}
+          </view>
+        </view>
+      </scroll-transform:container>
+
+      <scroll-transform:container
+        xmlns:scroll-transform="https://hyperview.org/scroll-transform"
+      >
+        <scroll-transform:transform
+          context-key="scroll-view"
+          style-attr="opacity"
+          scroll-range="[200, 230]"
+          attr-range="[0, 1]"
+          axis="vertical"
+        />
+        <view style="hero-header">
+          <view action="back" href="#" style="header-btn">
+            {% include 'icons/back.svg' %}
+          </view>
+          <text style="header-title" key="title">{{ hv_title }}</text>
+        </view>
+      </scroll-transform:container>
+
+    </header>
+
+  <view
+    style="main"
+    xmlns:scroll="https://hyperview.org/hyperview-scroll"
+    scroll="true"
+    scroll:context-key="scroll-view"
+    scroll:event-throttle="16"
+  >
+
+    <view style="hero-container">
+      <scroll-transform:container
+        xmlns:scroll-transform="https://hyperview.org/scroll-transform"
+        transform-origin="bottom center"
+      >
+        <scroll-transform:transform
+          context-key="scroll-view"
+          transform-attr="scale"
+          scroll-range="[0, -200]"
+          attr-range="[1, 1.6]"
+          axis="vertical"
+          duration="0"
+        />
+
+        <image
+          style="hero-image"
+          source="https://instawork-pro-vetting-dev.imgix.net/skills_hero_images/a1c548b2-2379-4482-83d8-3bfa6d571ff1.png?w=360&h=360&dpr=2"
+        />
+      </scroll-transform:container>
+
+      <scroll-transform:container
+        xmlns:scroll-transform="https://hyperview.org/scroll-transform"
+      >
+        <scroll-transform:transform
+          context-key="scroll-view"
+          style-attr="opacity"
+          scroll-range="[100, 180]"
+          attr-range="[1, 0]"
+          axis="vertical"
+        />
+        <text style="header-title text hero-title">{{ hv_title }}</text>
+      </scroll-transform:container>
+    </view>
+
+    <text style="text">
+      Velit voluptas et alias atque provident sapiente consequuntur deserunt. Dolorem et
+      non error dolorem voluptate amet accusantium. Corporis rerum sed labore quae sed qui quis quasi. Illo pariatur sint qui.
+      Quasi quaerat id molestias. Necessitatibus et ipsa quia asperiores laborum neque. Quisquam dolorem consequatur illum. Ut
+      magni iusto explicabo blanditiis quasi laborum incidunt earum. Eius ut in rerum ipsam. Officiis dolores suscipit
+      consequatur placeat commodi eum. Vel possimus placeat aut eos tempore saepe. Esse assumenda eum illo sed aut earum quia
+      voluptatibus. Recusandae qui iusto corporis sed atque. Veniam et possimus praesentium. Cum molestiae non velit minus
+      voluptatibus quos illo sed. Et omnis ut soluta qui inventore molestias. Dolores voluptatem perspiciatis exercitationem
+      consectetur minus illum. Quos quaerat omnis aut eius eos dolores velit. Et quia vel ea unde eum repudiandae. Repellat et
+      ab sed.
+    </text>
+
+    <!-- Red square that rotates and shrinks as we scroll -->
+    <!--scroll-transform:container
+      xmlns:scroll-transform="https://hyperview.org/scroll-transform"
+      style="red-square"
+    >
+      <scroll-transform:transform
+        context-key="scroll-view"
+        transform-attr="translateX"
+        scroll-range="[100, 400]"
+        attr-range="[-100, 100]"
+        axis="vertical"
+        duration="1"
+      />
+      <scroll-transform:transform
+        context-key="scroll-view"
+        transform-attr="scale"
+        scroll-range="[100, 400]"
+        attr-range="[1, 0.3]"
+        axis="vertical"
+        duration="1"
+      />
+    </scroll-transform:container-->
+
+    <text style="text">
+      Velit voluptas et alias atque provident sapiente consequuntur deserunt. Dolorem et
+      non error dolorem voluptate amet accusantium. Corporis rerum sed labore quae sed qui quis quasi. Illo pariatur sint qui.
+      Quasi quaerat id molestias. Necessitatibus et ipsa quia asperiores laborum neque. Quisquam dolorem consequatur illum. Ut
+      magni iusto explicabo blanditiis quasi laborum incidunt earum. Eius ut in rerum ipsam. Officiis dolores suscipit
+      consequatur placeat commodi eum. Vel possimus placeat aut eos tempore saepe. Esse assumenda eum illo sed aut earum quia
+      voluptatibus. Recusandae qui iusto corporis sed atque. Veniam et possimus praesentium. Cum molestiae non velit minus
+      voluptatibus quos illo sed. Et omnis ut soluta qui inventore molestias. Dolores voluptatem perspiciatis exercitationem
+      consectetur minus illum. Quos quaerat omnis aut eius eos dolores velit. Et quia vel ea unde eum repudiandae. Repellat et
+      ab sed.
+    </text>
+    <text style="text">
+      Velit voluptas et alias atque provident sapiente consequuntur deserunt. Dolorem et
+      non error dolorem voluptate amet accusantium. Corporis rerum sed labore quae sed qui quis quasi. Illo pariatur sint qui.
+      Quasi quaerat id molestias. Necessitatibus et ipsa quia asperiores laborum neque. Quisquam dolorem consequatur illum. Ut
+      magni iusto explicabo blanditiis quasi laborum incidunt earum. Eius ut in rerum ipsam. Officiis dolores suscipit
+      consequatur placeat commodi eum. Vel possimus placeat aut eos tempore saepe. Esse assumenda eum illo sed aut earum quia
+      voluptatibus. Recusandae qui iusto corporis sed atque. Veniam et possimus praesentium. Cum molestiae non velit minus
+      voluptatibus quos illo sed. Et omnis ut soluta qui inventore molestias. Dolores voluptatem perspiciatis exercitationem
+      consectetur minus illum. Quos quaerat omnis aut eius eos dolores velit. Et quia vel ea unde eum repudiandae. Repellat et
+      ab sed.
+    </text>
+    <text style="text">
+      Velit voluptas et alias atque provident sapiente consequuntur deserunt. Dolorem et
+      non error dolorem voluptate amet accusantium. Corporis rerum sed labore quae sed qui quis quasi. Illo pariatur sint qui.
+      Quasi quaerat id molestias. Necessitatibus et ipsa quia asperiores laborum neque. Quisquam dolorem consequatur illum. Ut
+      magni iusto explicabo blanditiis quasi laborum incidunt earum. Eius ut in rerum ipsam. Officiis dolores suscipit
+      consequatur placeat commodi eum. Vel possimus placeat aut eos tempore saepe. Esse assumenda eum illo sed aut earum quia
+      voluptatibus. Recusandae qui iusto corporis sed atque. Veniam et possimus praesentium. Cum molestiae non velit minus
+      voluptatibus quos illo sed. Et omnis ut soluta qui inventore molestias. Dolores voluptatem perspiciatis exercitationem
+      consectetur minus illum. Quos quaerat omnis aut eius eos dolores velit. Et quia vel ea unde eum repudiandae. Repellat et
+      ab sed.
+    </text>
+  </view>
+{% endblock %}
diff --git a/demo/schema/scroll-transform.xsd b/demo/schema/scroll-transform.xsd
new file mode 100644
index 000000000..2a809807b
--- /dev/null
+++ b/demo/schema/scroll-transform.xsd
@@ -0,0 +1,51 @@
+<xs:schema
+    xmlns:xs="http://www.w3.org/2001/XMLSchema"
+    attributeFormDefault="qualified"
+    elementFormDefault="qualified"
+    targetNamespace="https://hyperview.org/scroll-transform"
+    xmlns:scroll-transform="https://hyperview.org/scroll-transform"
+    xmlns:hv="https://hyperview.org/hyperview"
+>
+    <xs:import
+        namespace="https://hyperview.org/hyperview"
+        schemaLocation="hyperview.xsd"
+    />
+    <xs:simpleType name="scroll-range">
+        <xs:restriction base="xs:string">
+            <xs:pattern value="\[-?[0-9]+,\s?-?[0-9]+\]" />
+        </xs:restriction>
+    </xs:simpleType>
+    <xs:simpleType name="attr-range">
+        <xs:restriction base="xs:string">
+            <xs:pattern value="\[-?[0-9]\.?[0-9]*,\s?-?[0-9]\.?[0-9]*\]" />
+        </xs:restriction>
+    </xs:simpleType>
+    <xs:element name="container">
+        <xs:complexType>
+            <xs:sequence>
+                <xs:element ref="scroll-transform:transform" minOccurs="0" maxOccurs="unbounded" />
+                <xs:any minOccurs="0" maxOccurs="unbounded" />
+            </xs:sequence>
+            <xs:attribute name="style" type="hv:styleList" form="unqualified" />
+            <xs:attribute name="transformOrigin" type="xs:string" form="unqualified" />
+        </xs:complexType>
+    </xs:element>
+    <xs:element name="transform">
+        <xs:complexType>
+            <xs:attribute name="context-key" type="xs:token" use="required" />
+            <xs:attribute name="style-attr" type="xs:token" />
+            <xs:attribute name="transform-attr" type="xs:token" />
+            <xs:attribute name="axis">
+                <xs:simpleType>
+                    <xs:restriction base="xs:string">
+                        <xs:enumeration value="horizontal" />
+                        <xs:enumeration value="vertical" />
+                    </xs:restriction>
+                </xs:simpleType>
+            </xs:attribute>
+            <xs:attribute name="duration" type="xs:nonNegativeInteger" />
+            <xs:attribute name="scroll-range" type="scroll-transform:scroll-range" />
+            <xs:attribute name="attr-range" type="scroll-transform:attr-range" />
+        </xs:complexType>
+    </xs:element>
+</xs:schema>
\ No newline at end of file
diff --git a/demo/src/Components/ScrollTransform/ScrollTransform.tsx b/demo/src/Components/ScrollTransform/ScrollTransform.tsx
new file mode 100644
index 000000000..04bbe378d
--- /dev/null
+++ b/demo/src/Components/ScrollTransform/ScrollTransform.tsx
@@ -0,0 +1,132 @@
+import React, { useEffect, useRef } from 'react';
+import {
+    calculateValue,
+    namespaceURI,
+    parseTransformElement,
+    type TransformConfig,
+} from './utils';
+import { createStyleProp, useScrollContext } from 'hyperview';
+import * as Render from 'hyperview/src/services/render';
+import { Animated } from 'react-native';
+import type { HvComponentProps } from 'hyperview';
+import { NODE_TYPE } from 'hyperview';
+
+
+interface AnimatedValues {
+    [key: string]: Animated.Value;
+}
+
+const ScrollTransformContainer = (props: HvComponentProps) => {
+    const style = createStyleProp(props.element, props.stylesheets, {
+        ...props.options,
+        styleAttr: 'style',
+    });
+
+    // Parse transformOrigin prop
+    const transformOriginValue = props.element.getAttribute('transform-origin');
+
+    // Parse transform elements from children
+    const transformConfigs: TransformConfig[] = [];
+    const transformElements = Array.from(props.element.childNodes).filter(
+        (child) =>
+            child.nodeType === NODE_TYPE.ELEMENT_NODE &&
+            (child as Element).namespaceURI === namespaceURI &&
+            (child as Element).localName === 'transform'
+    );
+
+    transformElements.forEach((element) => {
+        try {
+            const config = parseTransformElement(element as Element);
+            transformConfigs.push(config);
+        } catch (error) {
+            console.error('Error parsing transform element:', error);
+        }
+    });
+
+    // Create animated values for each transform
+    const animatedValuesRef = useRef<AnimatedValues>({});
+    const { offsets } = useScrollContext();
+    //console.log('offsets', offsets);
+    // Initialize animated values
+    transformConfigs.forEach((config, index) => {
+        const key = `${config.styleAttr || config.transformAttr}-${index}`;
+        if (!animatedValuesRef.current[key]) {
+            // Assumes the default scroll position is 0
+            const defaultPosition = { x: 0, y: 0 };
+            const contextPosition = offsets[config.contextKey] || defaultPosition;
+            const position = config.axis === 'horizontal' ? contextPosition.x : contextPosition.y;
+            const initialValue = calculateValue(position, config.scrollRange, config.attrRange);
+            animatedValuesRef.current[key] = new Animated.Value(initialValue);
+        }
+    });
+
+    // Update animated values when scroll position changes
+    useEffect(() => {
+        transformConfigs.forEach((config, index) => {
+            const key = `${config.styleAttr || config.transformAttr}-${index}`;
+            const defaultPosition = { x: 0, y: 0 };
+            const contextPosition = offsets[config.contextKey] || defaultPosition;
+            const position = config.axis === 'horizontal' ? contextPosition.x : contextPosition.y;
+            const toValue = calculateValue(position, config.scrollRange, config.attrRange);
+
+            Animated.timing(animatedValuesRef.current[key], {
+                duration: config.duration,
+                toValue,
+                useNativeDriver: true,
+            }).start();
+        });
+    }, [transformConfigs, offsets]);
+
+    // Build animated style from transform configs
+    const animatedStyle: any = {};
+    const transformArray: any[] = [];
+
+    transformConfigs.forEach((config, index) => {
+        const key = `${config.styleAttr || config.transformAttr}-${index}`;
+        const animatedValue = animatedValuesRef.current[key];
+
+        if (config.styleAttr) {
+            // For style attributes like opacity, backgroundColor, etc.
+            animatedStyle[config.styleAttr] = animatedValue;
+        } else if (config.transformAttr) {
+            // For transform attributes like scale, rotate, etc.
+            const transformObj: any = {};
+            transformObj[config.transformAttr] = animatedValue;
+            transformArray.push(transformObj);
+        }
+    });
+
+    if (transformArray.length > 0) {
+        animatedStyle.transform = transformArray;
+    }
+
+    // Apply transformOrigin if specified
+    if (transformOriginValue) {
+        animatedStyle.transformOrigin = transformOriginValue;
+    }
+
+    // Filter out transform child elements since they're configuration, not content
+    const nonTransformChildNodes = Array.from(props.element.childNodes).filter(
+        (child) => {
+            if (child.nodeType === NODE_TYPE.ELEMENT_NODE) { // Element node
+                const element = child as Element;
+                return !(element.namespaceURI === namespaceURI && element.localName === 'transform');
+            }
+            return true; // Keep text nodes and other types
+        }
+    );
+
+    const children = Render.renderChildNodes(
+        nonTransformChildNodes,
+        props.stylesheets,
+        props.onUpdate,
+        props.options,
+    );
+
+    return <Animated.View style={[style, animatedStyle]}>{children}</Animated.View>;
+};
+
+ScrollTransformContainer.namespaceURI = namespaceURI;
+ScrollTransformContainer.localName = 'container';
+
+export { ScrollTransformContainer };
diff --git a/demo/src/Components/ScrollTransform/index.ts b/demo/src/Components/ScrollTransform/index.ts
new file mode 100644
index 000000000..f599dbb58
--- /dev/null
+++ b/demo/src/Components/ScrollTransform/index.ts
@@ -0,0 +1 @@
+export { ScrollTransformContainer } from './ScrollTransform';
diff --git a/demo/src/Components/ScrollTransform/utils.ts b/demo/src/Components/ScrollTransform/utils.ts
new file mode 100644
index 000000000..ffe957312
--- /dev/null
+++ b/demo/src/Components/ScrollTransform/utils.ts
@@ -0,0 +1,115 @@
+export const namespaceURI = 'https://hyperview.org/scroll-transform';
+
+export const getNumberAttr = (
+    element: Element,
+    attrName: string,
+    defaultValue: number,
+): number => {
+    const value: string | null = element.getAttribute(attrName);
+    if (!value) {
+        return defaultValue;
+    }
+    return parseInt(value, 10);
+};
+
+export const getRangeAttr = (
+    element: Element,
+    attrName: string,
+    defaultValue: [number, number],
+): [number, number] => {
+    const value: string | null = element.getAttribute(attrName);
+    if (!value) {
+        return defaultValue;
+    }
+    try {
+        return JSON.parse(value);
+    } catch (e) {
+        throw new Error(`Invalid range attribute: ${value}`);
+    }
+};
+
+// Reuse the same calculation function as ScrollOpacity
+export const calculateValue = (
+    position: number,
+    inputRange: [number, number],
+    outputRange: [number, number],
+) => {
+    const [a, b] = inputRange;
+    const [c, d] = outputRange;
+
+    // Check if the input range has the same start and end values
+    if (a === b) {
+        // If the position is exactly at a (or b), return the start of the output range
+        // Otherwise, return the end of the output range
+        return position <= a ? c : d;
+    }
+
+    // Calculate the slope
+    const slope = (d - c) / (b - a);
+
+    // Handle both ascending and descending input ranges
+    const isAscending = b > a;
+
+    if (isAscending) {
+        // Ascending range: a < b
+        if (position < a) {
+            return c;
+        }
+        if (position > b) {
+            return d;
+        }
+    } else {
+        // Descending range: a > b
+        if (position > a) {
+            return c;
+        }
+        if (position < b) {
+            return d;
+        }
+    }
+
+    // Interpolate between the ranges
+    return c + slope * (position - a);
+};
+
+export interface TransformConfig {
+    contextKey: string;
+    styleAttr?: string;
+    transformAttr?: string;
+    scrollRange: [number, number];
+    attrRange: [number, number];
+    axis: 'horizontal' | 'vertical';
+    duration: number;
+}
+
+export const parseTransformElement = (element: Element): TransformConfig => {
+    const contextKey = element.getAttribute('context-key');
+    const styleAttr = element.getAttribute('style-attr') || undefined;
+    const transformAttr = element.getAttribute('transform-attr') || undefined;
+    const axis = (element.getAttribute('axis') || 'vertical') as 'horizontal' | 'vertical';
+    const scrollRange = getRangeAttr(element, 'scroll-range', [0, 100]);
+    const attrRange = getRangeAttr(element, 'attr-range', [0, 1]);
+    const duration = getNumberAttr(element, 'duration', 0);
+
+    if (!contextKey) {
+        throw new Error('context-key is required for scroll-transform:transform');
+    }
+
+    if (!styleAttr && !transformAttr) {
+        throw new Error('Either style-attr or transform-attr is required for scroll-transform:transform');
+    }
+
+    if (styleAttr && transformAttr) {
+        throw new Error('Cannot specify both style-attr and transform-attr for scroll-transform:transform');
+    }
+
+    return {
+        contextKey,
+        styleAttr,
+        transformAttr,
+        scrollRange,
+        attrRange,
+        axis,
+        duration,
+    };
+};
diff --git a/demo/src/Components/index.ts b/demo/src/Components/index.ts
index ec8785b97..0e9a0b6a2 100644
--- a/demo/src/Components/index.ts
+++ b/demo/src/Components/index.ts
@@ -6,6 +6,7 @@ import { NavBack } from './NavBack';
 import { ProgressBar } from './ProgressBar';
 import { SafeAreaView } from './SafeAreaView';
 import { ScrollOpacity } from './ScrollOpacity';
+import { ScrollTransformContainer } from './ScrollTransform';
 import { Svg } from './Svg';
 
 export default [
@@ -19,5 +20,6 @@ export default [
   ProgressBar,
   SafeAreaView,
   ScrollOpacity,
+  ScrollTransformContainer,
   Svg,
 ];

From 6e084c8b232690e3e25ceb03d8c32fad76ca6d48 Mon Sep 17 00:00:00 2001
From: Adam Stepinski <adam@instawork.com>
Date: Mon, 25 Aug 2025 09:10:47 -0700
Subject: [PATCH 2/2] Clean up

---
 .../elements/scroll-transform/index.xml.njk   | 23 -------------------
 1 file changed, 23 deletions(-)

diff --git a/demo/backend/advanced/community/elements/scroll-transform/index.xml.njk b/demo/backend/advanced/community/elements/scroll-transform/index.xml.njk
index aaf20c1d8..c8641a8e1 100644
--- a/demo/backend/advanced/community/elements/scroll-transform/index.xml.njk
+++ b/demo/backend/advanced/community/elements/scroll-transform/index.xml.njk
@@ -132,29 +132,6 @@ hv_title: "Scroll Transform"
       ab sed.
     </text>
 
-    <!-- Red square that rotates and shrinks as we scroll -->
-    <!--scroll-transform:container
-      xmlns:scroll-transform="https://hyperview.org/scroll-transform"
-      style="red-square"
-    >
-      <scroll-transform:transform
-        context-key="scroll-view"
-        transform-attr="translateX"
-        scroll-range="[100, 400]"
-        attr-range="[-100, 100]"
-        axis="vertical"
-        duration="1"
-      />
-      <scroll-transform:transform
-        context-key="scroll-view"
-        transform-attr="scale"
-        scroll-range="[100, 400]"
-        attr-range="[1, 0.3]"
-        axis="vertical"
-        duration="1"
-      />
-    </scroll-transform:container-->
-
     <text style="text">
       Velit voluptas et alias atque provident sapiente consequuntur deserunt. Dolorem et
       non error dolorem voluptate amet accusantium. Corporis rerum sed labore quae sed qui quis quasi. Illo pariatur sint qui.