experimental: Animate Text Split (#5048)

## Description

New Split By option

Animated Text 2nd example


https://p-1ada14ed-beb3-4910-8af1-dacaa550310b-dot-anim-txt.staging.webstudio.is/?authToken=1e621fc4-dfb0-4189-a9b0-4fe2e189ec93&mode=preview


https://animations.wstd.work/text-animations


<img width="258" alt="image"
src="https://github.com/user-attachments/assets/b007ec9a-11fd-4a20-969b-a8451f599eeb"
/>

See 2nd animated per word


![Screen Recording 2025-03-26 at 10 30
31](https://github.com/user-attachments/assets/f6f5e364-d290-4bfb-98c0-9046c85281c7)



## 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

Author: istarkov

fixtures/webstudio-features/.webstudio/data.json

@@ -1,10 +1,10 @@
 {
   "build": {
-    "id": "342a7c73-ed72-441d-8a69-8b2659639e93",
+    "id": "3a8c8a9c-cfd9-46b8-a8bf-30d48250bc1b",
     "projectId": "cddc1d44-af37-4cb6-a430-d300cf6f932d",
-    "version": 543,
-    "createdAt": "2025-03-10T13:33:47.683+00:00",
-    "updatedAt": "2025-03-10T13:33:47.683+00:00",
+    "version": 554,
+    "createdAt": "2025-03-26T12:23:17.308+00:00",
+    "updatedAt": "2025-03-26T12:23:17.308+00:00",
     "pages": {
       "meta": {
         "siteName": "KittyGuardedZone",
@@ -3805,11 +3805,11 @@
         }
       ],
       [
-        "WXm4SG4hn0GOxQzlx1onL",
+        "PkOUxrUpSNIkRV8MuLSQh",
         {
-          "id": "WXm4SG4hn0GOxQzlx1onL",
+          "id": "PkOUxrUpSNIkRV8MuLSQh",
           "instanceId": "GRj9UMUzk-HAWRctEcfFH",
-          "name": "charWindow",
+          "name": "slidingWindow",
           "type": "number",
           "value": 20
         }

fixtures/webstudio-features/app/__generated__/$resources.sitemap.xml.ts

@@ -6,7 +6,7 @@
     "dev": "react-router dev",
     "cli": "NODE_OPTIONS='--conditions=webstudio --import=tsx' webstudio",
     "fixtures:link": "pnpm cli link --link https://p-cddc1d44-af37-4cb6-a430-d300cf6f932d-dot-${BUILDER_HOST:-main.development.webstudio.is}'?authToken=1cdc6026-dd5b-4624-b89b-9bd45e9bcc3d'",
-    "fixtures:sync": "pnpm cli sync --buildId 342a7c73-ed72-441d-8a69-8b2659639e93 && pnpm prettier --write ./.webstudio/",
+    "fixtures:sync": "pnpm cli sync --buildId 3a8c8a9c-cfd9-46b8-a8bf-30d48250bc1b && pnpm prettier --write ./.webstudio/",
     "fixtures:build": "pnpm cli build --template react-router --template ./.template && pnpm prettier --write ./app/ ./package.json ./tsconfig.json"
   },
   "private": true,

fixtures/webstudio-features/app/__generated__/[animations]._index.tsx

@@ -13,14 +13,25 @@ const easings = {
   easeInOutQuart: true,
 };
 
+const split = {
+  char: true,
+  space: true,
+  'symbol "#"': true,
+  'symbol "~"': true,
+};
+
 type AnimateChildrenProps = {
-  charWindow?: number;
+  slidingWindow?: number;
   easing?: keyof typeof easings;
   children: React.ReactNode;
+  splitBy?: keyof typeof split;
 };
 
 export const AnimateText = forwardRef<ElementRef<"div">, AnimateChildrenProps>(
-  ({ charWindow = 5, easing = "linear", ...props }, ref) => {
+  (
+    { slidingWindow = 5, easing = "linear", splitBy = "char", ...props },
+    ref
+  ) => {
     return <div ref={ref} {...props} />;
   }
 );

fixtures/webstudio-features/package.json

@@ -20,5 +20,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["charWindow", "easing"],
+  initialProps: ["slidingWindow", "easing", "splitBy"],
 };