experimental: Text Animation storybook

apps/builder/app/builder/features/components/components.tsx

@@ -66,6 +66,12 @@ const $metas = computed(
         continue;
       }
 
+      if (
+        isFeatureEnabled("animation") === false &&
+        name.endsWith(":AnimateText")
+      ) {
+        continue;
+      }
       // only set available components from component meta
       availableComponents.add(name);
       if (

packages/sdk-components-animation/package.json

@@ -59,8 +59,10 @@
     "@webstudio-is/react-sdk": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",
     "change-case": "^5.4.4",
+    "nanostores": "^0.11.3",
     "react-error-boundary": "^5.0.0",
-    "scroll-timeline-polyfill": "^1.1.0"
+    "scroll-timeline-polyfill": "^1.1.0",
+    "shallow-equal": "^3.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",

packages/sdk-components-animation/src/animate-text.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, type ElementRef } from "react";
+
+const easings = {
+  linear: true,
+  easeIn: true,
+  easeInCubic: true,
+  easeInQuart: true,
+  easeOut: true,
+  easeOutCubic: true,
+  easeOutQuart: true,
+  ease: true,
+  easeInOutCubic: true,
+  easeInOutQuart: true,
+};
+
+type AnimateChildrenProps = {
+  charWindow: number;
+  easing: keyof typeof easings;
+  children: React.ReactNode;
+};
+
+export const AnimateText = forwardRef<ElementRef<"div">, AnimateChildrenProps>(
+  ({ charWindow: _, easing: __, ...props }, ref) => {
+    return <div ref={ref} {...props} />;
+  }
+);
+
+const displayName = "AnimateText";
+AnimateText.displayName = displayName;

packages/sdk-components-animation/src/animate-text.ws.ts

@@ -0,0 +1,17 @@
+import { TextIcon } from "@webstudio-is/icons/svg";
+import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import { props } from "./__generated__/animate-text.props";
+
+export const meta: WsComponentMeta = {
+  category: "general",
+  type: "container",
+  description: "Animate Text",
+  icon: TextIcon,
+  order: 6,
+  label: "Animate Text",
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["charWindow", "easing"],
+};

packages/sdk-components-animation/src/components.ts

@@ -1 +1,2 @@
 export { AnimateChildren } from "./animate-children";
+export { AnimateText } from "./animate-text";

packages/sdk-components-animation/src/metas.ts

@@ -1 +1,2 @@
-export { meta as AnimateChildren } from "./scroll.ws";
+export { meta as AnimateChildren } from "./animate-children.ws";
+export { meta as AnimateText } from "./animate-text.ws";

packages/sdk-components-animation/src/props.ts

@@ -1 +1,2 @@
-export { propsMeta as AnimateChildren } from "./scroll.ws";
+export { propsMeta as AnimateChildren } from "./animate-children.ws";
+export { propsMeta as AnimateText } from "./animate-text.ws";