experimental: Allow styling staggering and text animations (#5135)

## Description

1. What is this PR about (link the issue and add a short description)

## 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/app/__generated__/[animations]._index.tsx

@@ -40,6 +40,8 @@ type AnimateChildrenProps = {
    * Defines how the text is split for animation (e.g., by character, space, or symbol).
    */
   splitBy?: keyof typeof split;
+} & {
+  className?: string;
 };
 
 export const AnimateText = forwardRef<ElementRef<"div">, AnimateChildrenProps>(

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

@@ -2,6 +2,7 @@ import { TextAnimationIcon } from "@webstudio-is/icons/svg";
 import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
 import { animation } from "./shared/meta";
 import { props } from "./__generated__/animate-text.props";
+import { div } from "@webstudio-is/sdk/normalize.css";
 
 export const meta: WsComponentMeta = {
   category: "animations",
@@ -18,6 +19,9 @@ export const meta: WsComponentMeta = {
       text: false,
     },
   ],
+  presetStyle: {
+    div,
+  },
 };
 
 export const propsMeta: WsComponentPropsMeta = {

fixtures/webstudio-features/app/__generated__/index.css

@@ -29,6 +29,8 @@ type StaggerAnimationProps = {
    * Text content to animate.
    */
   children: React.ReactNode;
+} & {
+  className?: string;
 };
 
 export const StaggerAnimation = forwardRef<

packages/sdk-components-animation/private-src

@@ -2,6 +2,7 @@ import { StaggerAnimationIcon } from "@webstudio-is/icons/svg";
 import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
 import { animation } from "./shared/meta";
 import { props } from "./__generated__/stagger-animation.props";
+import { div } from "@webstudio-is/sdk/normalize.css";
 
 export const meta: WsComponentMeta = {
   category: "animations",
@@ -18,6 +19,9 @@ export const meta: WsComponentMeta = {
       text: false,
     },
   ],
+  presetStyle: {
+    div,
+  },
 };
 
 export const propsMeta: WsComponentPropsMeta = {