experimental: Text Animation storybook (#4938)

# Description

This PR introduces prototypes for a set of versatile animation
components:
• AnimateProxy: A wrapper component supporting staggered animations and
integrations with third-party animation engines.
• AnimateTextProgress: Demonstrates per-character staggered text
animations.

👉 [View Storybook
Preview](https://6382151c8b47d4399fb9fc69-uyomckzwfj.chromatic.com/iframe.html?args=&globals=&id=sdk-components-animation-animate-proxy--in-out&viewMode=story)

Features
	•	Added Storybook examples showcasing text animation capabilities.
• Supports custom CSS properties within keyframes for enhanced animation
flexibility.

Upcoming PRs

Future PRs will introduce more specialized animation components
utilizing the AnimateProxy:
```jsx
// Example usage of AnimateText
<AnimateProxy>
  {($progress, getStylesAt) => (
    <AnimateTextProgress
      $progress={$progress}
      getStylesAt={getStylesAt}
      charWindow={50}
      easing="easeInQuart"
    >
      {children}
    </AnimateTextProgress>
  )}
</AnimateProxy>

// Example usage of AnimateStager
<AnimateProxy>
  {($progress, getStylesAt) => (
    <Stager
      $progress={$progress}
      getStylesAt={getStylesAt}
      // Additional props...
    />
  )}
</AnimateProxy>

// Example usage of AnimateLottie
<AnimateProxy>
  {($progress, getStylesAt) => (
    <Lottie
      $progress={$progress}
      getStylesAt={getStylesAt}
      // Additional props...
    />
  )}
</AnimateProxy>
```
See corresponding PR: (link to be added)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

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";