From a5c9aa0b460af4d17e6b3e8363841e491cc57be0 Mon Sep 17 00:00:00 2001
From: Edouard Wautier <4435185+Duncid@users.noreply.github.com>
Date: Fri, 8 Nov 2024 10:58:57 +0100
Subject: [PATCH] Updating Animated text (#8533)

* Updating Animated text

* fixing linting

* Update sparkle/src/components/AnimatedText.tsx

Co-authored-by: Philippe Rolet <pr@dust.tt>

* cleaning

---------

Co-authored-by: Philippe Rolet <pr@dust.tt>
---
 sparkle/src/components/AnimatedShinyText.tsx  | 34 ------------
 sparkle/src/components/AnimatedText.tsx       | 53 +++++++++++++++++++
 sparkle/src/components/index.ts               |  2 +-
 .../src/stories/AnimatedShinyText.stories.tsx | 29 ----------
 sparkle/src/stories/AnimatedText.stories.tsx  | 46 ++++++++++++++++
 sparkle/tailwind.config.js                    | 11 ++--
 6 files changed, 106 insertions(+), 69 deletions(-)
 delete mode 100644 sparkle/src/components/AnimatedShinyText.tsx
 create mode 100644 sparkle/src/components/AnimatedText.tsx
 delete mode 100644 sparkle/src/stories/AnimatedShinyText.stories.tsx
 create mode 100644 sparkle/src/stories/AnimatedText.stories.tsx

diff --git a/sparkle/src/components/AnimatedShinyText.tsx b/sparkle/src/components/AnimatedShinyText.tsx
deleted file mode 100644
index d554e29a142c..000000000000
--- a/sparkle/src/components/AnimatedShinyText.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { CSSProperties, ReactNode } from "react";
-import React from "react";
-
-import { cn } from "@sparkle/lib/utils";
-
-interface AnimatedShinyTextProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export function AnimatedShinyText({
-  children,
-  className,
-}: AnimatedShinyTextProps) {
-  return (
-    <p
-      style={
-        {
-          "--shiny-width": `100px`,
-        } as CSSProperties
-      }
-      className={cn(
-        "dark:s-text-element-400/70 s-mx-auto s-max-w-md s-text-element-600/70",
-        // Shine effect
-        "s-animate-shiny-text s-bg-clip-text s-bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)]",
-        // Shine gradient
-        "s-bg-gradient-to-r s-from-transparent s-via-black/80 s-via-50% s-to-transparent dark:s-via-white/80",
-        className
-      )}
-    >
-      {children}
-    </p>
-  );
-}
diff --git a/sparkle/src/components/AnimatedText.tsx b/sparkle/src/components/AnimatedText.tsx
new file mode 100644
index 000000000000..e70d593b3025
--- /dev/null
+++ b/sparkle/src/components/AnimatedText.tsx
@@ -0,0 +1,53 @@
+import { cva, VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+import React from "react";
+
+import { cn } from "@sparkle/lib/utils";
+
+const animVariants = cva(
+  "s-relative s-mx-auto s-max-w-md s-text-black/0 s-animate-shiny-text s-bg-clip-text s-bg-no-repeat [background-position:0_0] [background-size:50%_100%] s-bg-gradient-to-r",
+  {
+    variants: {
+      variant: {
+        muted:
+          "s-from-transparent s-via-primary-950/80 s-via-50%  s-to-transparent",
+        highlight:
+          "s-from-highlight s-via-highlight-800 s-via-50% s-to-highlight",
+      },
+    },
+    defaultVariants: {
+      variant: "muted",
+    },
+  }
+);
+
+const textVariants = cva("s-absolute s-inset-0", {
+  variants: {
+    variant: {
+      muted: "s-text-muted-foreground",
+      highlight: "s-text-highlight",
+    },
+  },
+  defaultVariants: {
+    variant: "muted",
+  },
+});
+
+interface AnimatedShinyTextProps {
+  children: ReactNode;
+  variant?: VariantProps<typeof textVariants>["variant"];
+  className?: string;
+}
+
+export function AnimatedText({
+  children,
+  variant,
+  className,
+}: AnimatedShinyTextProps) {
+  return (
+    <span className={cn("s-relative s-inline-block", className)}>
+      <span className={textVariants({ variant })}>{children}</span>
+      <span className={animVariants({ variant })}>{children}</span>
+    </span>
+  );
+}
diff --git a/sparkle/src/components/index.ts b/sparkle/src/components/index.ts
index 0d8e57983562..55360e1d3923 100644
--- a/sparkle/src/components/index.ts
+++ b/sparkle/src/components/index.ts
@@ -1,4 +1,4 @@
-export { AnimatedShinyText } from "./AnimatedShinyText";
+export { AnimatedText } from "./AnimatedText";
 export { AssistantPreview } from "./AssistantPreview";
 export { Avatar } from "./Avatar";
 export { Banner } from "./Banner";
diff --git a/sparkle/src/stories/AnimatedShinyText.stories.tsx b/sparkle/src/stories/AnimatedShinyText.stories.tsx
deleted file mode 100644
index f1bc8a4aa1b8..000000000000
--- a/sparkle/src/stories/AnimatedShinyText.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Meta } from "@storybook/react";
-import React from "react";
-
-import { cn } from "@sparkle/lib";
-
-import { AnimatedShinyText } from "../index_with_tw_base";
-
-const meta = {
-  title: "Primitives/AnimatedShinyText",
-  component: AnimatedShinyText,
-} satisfies Meta<typeof AnimatedShinyText>;
-
-export default meta;
-
-export function AnimatedShinyTextDemo() {
-  return (
-    <div className="s-z-10 s-flex s-min-h-64 s-items-center s-justify-center">
-      <div
-        className={cn(
-          "dark:s-bg-structure-900 dark:hover:s-bg-structure-800 s-group s-rounded-full s-border s-border-black/5 s-bg-structure-100 s-text-element-800 s-transition-all s-ease-in hover:s-cursor-pointer hover:s-bg-structure-200 dark:s-border-white/5"
-        )}
-      >
-        <AnimatedShinyText className="hover:dark:s-text-element-400 s-inline-flex s-items-center s-justify-center s-px-4 s-py-1 s-transition s-ease-out hover:s-text-element-600 hover:s-duration-300">
-          <span>✨ Introducing Magic UI</span>
-        </AnimatedShinyText>
-      </div>
-    </div>
-  );
-}
diff --git a/sparkle/src/stories/AnimatedText.stories.tsx b/sparkle/src/stories/AnimatedText.stories.tsx
new file mode 100644
index 000000000000..dedf7f8ec1c8
--- /dev/null
+++ b/sparkle/src/stories/AnimatedText.stories.tsx
@@ -0,0 +1,46 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+
+import { AnimatedText } from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/AnimatedText",
+  component: AnimatedText,
+} satisfies Meta<typeof AnimatedText>;
+
+export default meta;
+
+export function AnimatedShinyTextDemo() {
+  return (
+    <div className="s-flex s-gap-3">
+      <div className="s-z-10 s-flex s-min-h-64 s-flex-col s-items-center s-justify-center s-gap-4">
+        <div className="s-rounded-2xl s-bg-muted s-p-4">
+          <AnimatedText>Thinking...</AnimatedText>
+        </div>
+
+        <div className="s-rounded-2xl s-bg-muted s-p-4">
+          <AnimatedText>Thinking a long time</AnimatedText>
+        </div>
+
+        <div className="s-rounded-2xl s-bg-muted s-p-4">
+          <AnimatedText>Thinking a long long long long time</AnimatedText>
+        </div>
+      </div>
+      <div className="s-z-10 s-flex s-min-h-64 s-flex-col s-items-center s-justify-center s-gap-4">
+        <div className="s-rounded-2xl s-bg-highlight-50 s-p-4">
+          <AnimatedText variant="highlight">Thinking...</AnimatedText>
+        </div>
+
+        <div className="s-rounded-2xl s-bg-highlight-50 s-p-4">
+          <AnimatedText variant="highlight">Thinking a long time</AnimatedText>
+        </div>
+
+        <div className="s-rounded-2xl s-bg-highlight-50 s-p-4">
+          <AnimatedText variant="highlight">
+            Thinking a long long long long time
+          </AnimatedText>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/sparkle/tailwind.config.js b/sparkle/tailwind.config.js
index 12c21e796a98..3039739adeb8 100644
--- a/sparkle/tailwind.config.js
+++ b/sparkle/tailwind.config.js
@@ -31,6 +31,7 @@ const safeColorlist = safeColorsArray.flatMap((color) => [
   `s-border-${color}-100`,
   `s-border-${color}-200`,
   `s-border-${color}-300`,
+  `s-text-${color}-500`,
   `s-text-${color}-800`,
   `s-text-${color}-900`,
   `s-text-${color}-950`,
@@ -166,16 +167,16 @@ module.exports = {
           },
         },
         "shiny-text": {
-          "0%, 90%, 100%": {
-            "background-position": "calc(-100% - 100px) 0",
+          "0%": {
+            "background-position": "calc(-200%) 0",
           },
-          "30%, 60%": {
-            "background-position": "calc(100% + 100px) 0",
+          "100%": {
+            "background-position": "calc(200%) 0",
           },
         },
       },
       animation: {
-        "shiny-text": "shiny-text 8s infinite",
+        "shiny-text": "shiny-text 2s infinite",
         pulse: "pulse var(--duration) ease-out infinite",
         "opacity-pulse": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
         "background-position-spin":