experimental: Text Animation storybook

[istarkov]

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

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:

// 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 document
• added tests
• if any new env variables are added, added them to .env file